Design tokens are the single source of truth for every visual decision in the system. They capture color, typography, spacing, and border values as reusable variables so that design and code stay in sync. This page lists every token defined in design-system.css for quick reference.
Tokens are organised into two layers: primitive tokens (raw values) and semantic tokens (intent-based aliases that reference primitives). Always prefer semantic tokens in production code.
Every token, value, and hex on this page is a click-to-copy chip. The convention is intentionally explicit so the syntax in the markdown source matches what you copy:
`var(--token-name)`→ CSS variable, copies`.class-name`→ utility class, copies`#abc123`→ hex colour, copies and renders a swatch
Brand Tokens
Font Families
The four typeface stacks used across the system.
| Token | Value | Description |
|---|---|---|
"Inclusive Sans", sans-serif |
Body text and UI | |
"RecifeText", Georgia, serif |
Headings and display | |
"Bugrino", sans-serif |
Brand display, eyebrows, buttons, badges | |
"IBM Plex Mono", monospace |
Code and monospace |
Brand Colors
Core palette colors that define the brand identity.
| Token | Value | Description |
|---|---|---|
| Light brand color | ||
| Warm light tone | ||
| Dark brand color | ||
| Near-black | ||
| Lighter red (backgrounds) | ||
| Light red | ||
| Accent red | ||
| Dark red | ||
| Lighter blue (backgrounds) | ||
| Light blue | ||
| Accent blue | ||
| Dark blue | ||
| Lighter yellow (backgrounds) | ||
| Light yellow | ||
| Accent yellow | ||
| Dark yellow | ||
| Lighter green (backgrounds) | ||
| Light green | ||
| Accent green | ||
| Dark green | ||
| Lighter purple (backgrounds) | ||
| Light purple | ||
| Accent purple | ||
| Dark purple |
Typography
Font Sizes
The full type scale from 10px to 72px, defined in rem.
| Token | Value | px Equivalent |
|---|---|---|
0.625rem |
10px |
|
0.75rem |
12px |
|
0.875rem |
14px |
|
1rem |
16px |
|
1.125rem |
18px |
|
1.25rem |
20px |
|
1.375rem |
22px |
|
1.5rem |
24px |
|
1.75rem |
28px |
|
2rem |
32px |
|
2.25rem |
36px |
|
2.5rem |
40px |
|
3rem |
48px |
|
3.5rem |
56px |
|
4rem |
64px |
|
4.5rem |
72px |
Semantic Font Sizes
Named aliases that map to the type scale for specific UI roles.
| Token | Value | Description |
|---|---|---|
| Global body text size | ||
| Default button text | ||
| Small button text |
Line Heights
Vertical rhythm values from tight display text to loose body copy.
| Token | Value | Description |
|---|---|---|
0.7 |
Tight display text | |
1 |
Compact headings | |
1.3 |
Default headings | |
1.4 |
Short paragraphs | |
1.6 |
Body text | |
1.8 |
Loose body text |
Font Weights
Available weight values from light to black.
| Token | Value | Description |
|---|---|---|
300 |
Light | |
400 |
Regular | |
500 |
Medium | |
600 |
Semi-bold | |
700 |
Bold | |
800 |
Extra-bold | |
900 |
Black |
Letter Spacing
Tracking values for labels, eyebrows, and display text.
| Token | Value | Description |
|---|---|---|
0.03em |
Subtle tracking | |
0.06em |
Medium tracking | |
0.12em |
Wide tracking | |
0.24em |
Extra-wide (eyebrows, labels) |
Colors
Neutral Scale
Warm grey ramp from lightest (50) to near-black (990).
| Token | Value |
|---|---|
Black Alpha Scale
Semi-transparent black values for overlays, borders, and tints.
| Token | Value | Opacity |
|---|---|---|
| 100% | ||
| 3% | ||
| 5% | ||
| 10% | ||
| 15% | ||
| 20% | ||
| 30% | ||
| 40% | ||
| 50% | ||
| 60% | ||
| 70% | ||
| 80% | ||
| 90% | ||
| 95% |
White Alpha Scale
Semi-transparent white values for highlights and light overlays.
| Token | Value | Opacity |
|---|---|---|
| 100% | ||
| 5% | ||
| 10% | ||
| 15% | ||
| 20% | ||
| 30% | ||
| 40% | ||
| 50% | ||
| 60% | ||
| 70% | ||
| 80% | ||
| 90% | ||
| 95% |
Color-Mix Alpha Scale
Transparency values used with color-mix() to create translucent variants of any color.
| Token | Value |
|---|---|
transparent 5% |
|
transparent 10% |
|
transparent 15% |
|
transparent 20% |
|
transparent 25% |
|
transparent 30% |
|
transparent 35% |
|
transparent 40% |
|
transparent 45% |
|
transparent 50% |
|
transparent 55% |
|
transparent 60% |
|
transparent 65% |
|
transparent 70% |
|
transparent 75% |
|
transparent 80% |
|
transparent 85% |
|
transparent 90% |
|
transparent 95% |
Text Colors
Semantic tokens that control text color by intent, not by value.
| Token | Value | Description |
|---|---|---|
| Primary body text | ||
| Secondary/supporting text | ||
| Pure black text | ||
| De-emphasised text | ||
| Accent/highlight text | ||
| Link text | ||
| Text on dark backgrounds | ||
| Sidebar navigation text | ||
| Top nav text |
Background Colors
Semantic tokens for surface fills, from primary to overlays.
| Token | Value | Description |
|---|---|---|
| Main page background | ||
| Secondary/alternate background | ||
| Clean white background | ||
| Subtle tinted background | ||
| Darker tinted background | ||
| Lighter overlay background | ||
rgba(0, 0, 0, 0.75) |
Modal backdrop | |
| Sidebar background | ||
| Top nav background |
Border Colors
Semantic tokens for border color by visual weight.
| Token | Value | Description |
|---|---|---|
| Strong/prominent borders | ||
| Medium borders | ||
| Subtle/light borders |
Selection Colors
Text and background colors applied to user-selected content.
| Token | Value | Description |
|---|---|---|
| Text color when selected | ||
| Highlight color when selected |
Component Tokens
Button
Fill and text colors for primary, secondary, and ghost button variants.
| Token | Value | Description |
|---|---|---|
| Primary button background | ||
| Primary button text | ||
| Secondary button background | ||
| Secondary button text | ||
| Faded/ghost button background |
Status
Semantic colors for informational, success, warning, danger, and accent states.
| Token | Value | Description |
|---|---|---|
| Informational | ||
| Info background | ||
| Success | ||
| Success background | ||
| Warning | ||
| Warning background | ||
| Danger/error | ||
| Danger background | ||
| Accent/highlight | ||
| Accent background |
Form
Colors for inputs, checkboxes, and toggle switches across all states.
| Token | Value | Description |
|---|---|---|
| Input border | ||
| Input background | ||
| Input text | ||
| Placeholder text | ||
| Focus ring color | ||
| Disabled input background | ||
| Disabled input text | ||
| Checkbox background | ||
| Checkbox selected fill | ||
| Checkbox border | ||
| Checkmark color | ||
| Toggle track background | ||
| Toggle knob | ||
| Toggle selected track | ||
| Toggle selected knob |
Card
Surface, border, and hover colors for the card component.
| Token | Value | Description |
|---|---|---|
| Card background | ||
| Card border | ||
| Card border on hover |
Tooltip
Background and text colors for tooltip popups.
| Token | Value | Description |
|---|---|---|
| Tooltip background | ||
| Tooltip text |
Toast
Background and text colors for toast notifications.
| Token | Value | Description |
|---|---|---|
| Toast background | ||
| Toast text |
Tabs
Active, inactive, and indicator colors for the tab component.
| Token | Value | Description |
|---|---|---|
| Active tab text | ||
| Inactive tab text | ||
| Tab underline indicator |
Progress
Track and fill colors for the progress bar.
| Token | Value | Description |
|---|---|---|
| Track background | ||
| Fill/bar color |
Divider
Line color for horizontal dividers.
| Token | Value | Description |
|---|---|---|
| Divider line color |
Dropdown
Surface, border, and hover colors for dropdown menus.
| Token | Value | Description |
|---|---|---|
| Dropdown background | ||
| Dropdown border | ||
| Hovered item background |
Tag
Background and border colors for inline tags.
| Token | Value | Description |
|---|---|---|
| Tag background | ||
| Tag border |
Dialog
Surface, border, shadow, and backdrop colors for modal dialogs.
| Token | Value | Description |
|---|---|---|
| Dialog background | ||
560px |
Dialog maximum width | |
0 8px 32px var(--black-alpha-20) |
Dialog drop shadow | |
rgba(0, 0, 0, 0.6) |
Dialog backdrop overlay |
Slider
Track, fill, and thumb colors for range sliders.
| Token | Value | Description |
|---|---|---|
| Slider track | ||
| Slider filled portion | ||
| Thumb fill | ||
| Thumb border |
Rating
Star colors and sizing for the rating component.
| Token | Value | Description |
|---|---|---|
| Filled star color | ||
| Empty star color | ||
1.5rem |
Star size |
Spacing
Unit Scale
The base spacing ramp from 0 to 160px, used as building blocks for all spacing.
| Token | Value | px Equivalent |
|---|---|---|
0 |
0px |
|
0.125rem |
2px |
|
0.25rem |
4px |
|
0.5rem |
8px |
|
0.75rem |
12px |
|
1rem |
16px |
|
1.5rem |
24px |
|
2rem |
32px |
|
2.5rem |
40px |
|
3rem |
48px |
|
3.5rem |
56px |
|
4rem |
64px |
|
4.5rem |
72px |
|
5rem |
80px |
|
5.5rem |
88px |
|
6rem |
96px |
|
6.5rem |
104px |
|
7rem |
112px |
|
7.5rem |
120px |
|
10rem |
160px |
Space Tokens
Semantic spacing aliases that reference the unit scale — use these in layouts and components.
| Token | Value | px Equivalent |
|---|---|---|
0px |
||
2px |
||
4px |
||
8px |
||
12px |
||
16px |
||
24px |
||
32px |
||
40px |
||
48px |
||
56px |
||
64px |
||
72px |
||
80px |
||
88px |
||
96px |
||
104px |
||
112px |
||
120px |
||
160px |
Section Spacing
Vertical rhythm tokens for macro-level section padding.
| Token | Value | px Equivalent |
|---|---|---|
24px |
||
32px |
||
64px |
||
96px |
||
160px |
Borders
Border Widths
Available thickness values for the composable border system.
| Token | Value | Description |
|---|---|---|
1.5px |
Default/thin border | |
2px |
Medium border | |
4px |
Thick/accent border |
Border Composition
Default values applied when using structural border classes like or .
| Token | Value | Description |
|---|---|---|
| Default border width | ||
solid |
Default border style | |
| Default border color |
Border Radius
Rounding scale from subtle corners to fully rounded pills.
| Token | Value | Description |
|---|---|---|
4px |
Subtle rounding | |
6px |
Small rounding | |
10px |
Medium rounding | |
16px |
Large rounding | |
24px |
Extra-large rounding | |
999px |
Fully rounded / pill shape |