Style Guide
This style guide documents the design language and visual standards used across this website.
It also serves as a practical learning tool for understanding Docusaurus's theming system.
Explore the color palettes, typography, and component styles below to see how CSS custom properties and Infima design tokens create a cohesive, themeable design system.
Color Palette
The color system uses CSS variables that automatically adapt to light and dark themes. These swatches show the current theme's colors.
| Color | Token | Usage |
|---|---|---|
Primary | --ifm-color-primary | Main brand color, links, buttons |
Primary Dark | --ifm-color-primary-dark | Hover states, active elements |
Primary Darker | --ifm-color-primary-darker | Pressed states, emphasis |
Primary Darkest | --ifm-color-primary-darkest | Text on light backgrounds |
Primary Light | --ifm-color-primary-light | Subtle highlights, borders |
Primary Lighter | --ifm-color-primary-lighter | Light backgrounds, subtle accents |
Primary Lightest | --ifm-color-primary-lightest | Very light backgrounds, disabled states |
Background | --ifm-background-color | Main page background |
Background Surface | --ifm-background-surface-color | Cards, panels, elevated surfaces |
Base Text | --ifm-font-color-base | Primary text content |
Secondary Text | --ifm-font-color-secondary | Supporting text, captions |
Font Families
Typography system using carefully selected font families for optimal readability and visual hierarchy.
| Token | Usage | Preview |
|---|---|---|
| --ifm-font-family-heading | Headings, display text | The quick brown fox jumps over the lazy dog |
| --ifm-font-family-base | Body text, UI elements | The quick brown fox jumps over the lazy dog |
| --ifm-font-family-monospace | Code, technical content | The quick brown fox jumps over the lazy dog |
Font Sizes
Typography scale using responsive font sizes that adapt to different screen sizes for optimal readability.
| Value | Usage | Preview |
|---|---|---|
| --ifm-font-size-base | Base font size for body text, paragraphs | Base - The quick brown fox jumps over the lazy dog |
| --ifm-h1-font-size | Main headings, page titles | H1 Heading |
| --ifm-h2-font-size | Section headings | H2 Heading |
| --ifm-h3-font-size | Subsection headings | H3 Heading |
| --ifm-h4-font-size | Minor headings | H4 Heading |
| --ifm-h5-font-size | Small headings | H5 Heading |
| --ifm-h6-font-size | Smallest headings | H6 Heading |
| --ifm-code-font-size | Inline code, technical content | const example = 'code'; |
| --ifm-font-size-list | List items, secondary content | List item - The quick brown fox jumps over the lazy dog |
Vertical Rhythm
Vertical rhythm creates consistent spacing and line heights throughout the design, ensuring optimal readability and visual harmony.
| Token | Value | Preview |
|---|---|---|
| --ifm-line-height-base | 1.65 | This is an example of base line height. It provides comfortable reading with proper spacing between lines for body text and general content. |
| --ifm-line-height-h1 | 1.15 | H1 Heading |
| --ifm-line-height-h2 | 1.25 | H2 Heading |
| --ifm-line-height-h3 | 1.35 | H3 Heading |
| --ifm-spacing-lg | 1.5rem | Element 1 Element 2 Element 3 |
| --ifm-spacing-md | 1rem | Item Item Item |
Components
Reusable UI components that follow the design system principles and can be used throughout the website.
| Component | Description | Usage | Preview |
|---|---|---|---|
| AvatarBlock | Displays a person's photo, name, title, and social links in a compact card format | Author profiles, team member cards, contact information |  Senior Software Engineer |
| Tag | Small labels used to categorize content or indicate status | Blog post tags, category labels, status indicators | Design SystemsDevelopment |
AvatarBlock Component
The AvatarBlock component is used to display author information with social links. It's commonly used in blog posts and team pages.
Tag Component
Tags are used to categorize content and provide visual context. They can be styled with different colors and sizes based on their importance.