Design Tokens
Visual reference for all design tokens in our system
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values to ensure flexibility and consistency.
How to Use Tokens
Reference tokens in your CSS using CSS custom properties:
.my-component {
color: var(--color-primary);
padding: var(--spacing-md);
border-radius: var(--border-radius-md);
}
Token Categories
Our design system includes the following token categories:
- Colors - Brand colors, semantic colors, and neutral palette
- Spacing - Consistent spacing scale for margins and padding
- Typography - Font families, sizes, and weights
- Borders - Border radius values for consistent rounding
- Shadows - Elevation and depth through box shadows
- Transitions - Duration values for animations
Color
#6366f1
--color-brand
#6366f1
Base brand color - change this and the entire palette updates automatically
#f6f8ff
--color-primary-50
#f6f8ff
#e5e9ff
--color-primary-100
#e5e9ff
#cbd3ff
--color-primary-200
#cbd3ff
#aab5ff
--color-primary-300
#aab5ff
#838eff
--color-primary-400
#838eff
#6366f1
--color-primary-500
#6366f1
Base primary
#4d48d4
--color-primary-600
#4d48d4
#3928b8
--color-primary-700
#3928b8
#220082
--color-primary-800
#220082
#0b003e
--color-primary-900
#0b003e
#000000
--color-on-primary
#000000
Accessible text on primary - auto-selects white or black for WCAG compliance
#907b00
--color-accent
#907b00
Accent color - complementary (180deg hue rotation) from brand
#22c55e
--color-success-base
#22c55e
#c1ffcb
--color-success-light
#c1ffcb
#00863a
--color-success-dark
#00863a
#000000
--color-success-on
#000000
#f59e0b
--color-warning-base
#f59e0b
#ffecd8
--color-warning-light
#ffecd8
#a76a00
--color-warning-dark
#a76a00
#000000
--color-warning-on
#000000
#ef4444
--color-danger-base
#ef4444
#ffdedb
--color-danger-light
#ffdedb
#b00019
--color-danger-dark
#b00019
#000000
--color-danger-on
#000000
#f9fafb
--color-neutral-50
#f9fafb
#f3f4f6
--color-neutral-100
#f3f4f6
#e5e7eb
--color-neutral-200
#e5e7eb
#d1d5db
--color-neutral-300
#d1d5db
#9ca3af
--color-neutral-400
#9ca3af
#6b7280
--color-neutral-500
#6b7280
#4b5563
--color-neutral-600
#4b5563
#374151
--color-neutral-700
#374151
#1f2937
--color-neutral-800
#1f2937
#111827
--color-neutral-900
#111827
#f9fafb
--color-background
#f9fafb
#ffffff
--color-surface
#ffffff
#e5e7eb
--color-border
#e5e7eb
#111827
--color-text
#111827
#6b7280
--color-text-muted
#6b7280
rgba(17, 24, 39, 0.1)
--color-overlay-light
rgba(17, 24, 39, 0.1)
rgba(17, 24, 39, 0.5)
--color-overlay-medium
rgba(17, 24, 39, 0.5)
rgba(17, 24, 39, 0.8)
--color-overlay-dark
rgba(17, 24, 39, 0.8)
#f3f4f6
--color-light
#f3f4f6
Light background for tracks, inputs
#1f2937
--color-dark
#1f2937
#ffffff
--color-white
#ffffff
#4d48d4
--color-primary-hover
#4d48d4
#4b5563
--color-secondary
#4b5563
#374151
--color-secondary-hover
#374151
#b00019
--color-danger-hover
#b00019
#3b82f6
--color-info
#3b82f6
Informational blue
Spacing
| Scale | Token | CSS Variable | Value | Description | |
|---|---|---|---|---|---|
|
|
spacing-base |
--spacing-base |
1rem |
Base spacing unit - change this to scale all spacing proportionally | |
|
|
spacing-3xs |
--spacing-3xs |
0.125rem |
||
|
|
spacing-2xs |
--spacing-2xs |
0.25rem |
||
|
|
spacing-xs |
--spacing-xs |
0.5rem |
||
|
|
spacing-sm |
--spacing-sm |
0.75rem |
||
|
|
spacing-md |
--spacing-md |
1rem |
||
|
|
spacing-lg |
--spacing-lg |
1.5rem |
||
|
|
spacing-xl |
--spacing-xl |
2rem |
||
|
|
spacing-2xl |
--spacing-2xl |
3rem |
||
|
|
spacing-3xl |
--spacing-3xl |
4rem |
||
|
|
spacing-fluid-sm |
--spacing-fluid-sm |
clamp(0.5rem, 0.8333vw + 0.3333rem, 1rem) |
||
|
|
spacing-fluid-md |
--spacing-fluid-md |
clamp(1rem, 1.6667vw + 0.6667rem, 2rem) |
||
|
|
spacing-fluid-lg |
--spacing-fluid-lg |
clamp(2rem, 3.3333vw + 1.3333rem, 4rem) |
Border
| Preview | Token | CSS Variable | Value | Description | |
|---|---|---|---|---|---|
border-width-thin |
--border-width-thin |
1px |
|||
border-width-medium |
--border-width-medium |
2px |
|||
border-width-thick |
--border-width-thick |
4px |
|||
border-radius-sm |
--border-radius-sm |
0.25rem |
|||
border-radius-md |
--border-radius-md |
0.375rem |
|||
border-radius-lg |
--border-radius-lg |
0.5rem |
|||
border-radius-xl |
--border-radius-xl |
0.75rem |
|||
border-radius-full |
--border-radius-full |
9999px |
Font
The quick brown fox jumps over the lazy dog
--font-family-base
system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
The quick brown fox jumps over the lazy dog
--font-family-mono
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace
Font Size: clamp(0.75rem, 0.1042vw + 0.7292rem, 0.8125rem)
--font-size-xs
Font Size: clamp(0.8125rem, 0.1042vw + 0.7917rem, 0.875rem)
--font-size-sm
Font Size: clamp(0.875rem, 0.2083vw + 0.8333rem, 1rem)
--font-size-base
Font Size: clamp(1rem, 0.2083vw + 0.9583rem, 1.125rem)
--font-size-lg
Font Size: clamp(1.125rem, 0.2083vw + 1.0833rem, 1.25rem)
--font-size-xl
Font Size: clamp(1.25rem, 0.4167vw + 1.1667rem, 1.5rem)
--font-size-2xl
Font Size: clamp(1.5rem, 0.8333vw + 1.3333rem, 2rem)
--font-size-3xl
Font Size: clamp(2rem, 0.8333vw + 1.8333rem, 2.5rem)
--font-size-4xl
Font Size: clamp(2.5rem, 1.6667vw + 2.1667rem, 3.5rem)
--font-size-5xl
Font Weight: 400
--font-weight-normal
Font Weight: 500
--font-weight-medium
Font Weight: 600
--font-weight-semibold
Font Weight: 700
--font-weight-bold
Shadow
--shadow-sm
0 1px 2px 0 rgb(0 0 0 / 0.05)
--shadow-md
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
--shadow-lg
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
--shadow-xl
0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
Transition
| Token | Type | CSS Variable | Value | Description | |
|---|---|---|---|---|---|
transition-fast |
duration | --transition-fast |
150ms ease |
||
transition-base |
duration | --transition-base |
200ms ease |
||
transition-slow |
duration | --transition-slow |
300ms ease |