Design Tokens

Design tokens are CSS custom properties that provide consistent values across your design system. They adapt automatically to light and dark modes.

Colors

OKLCH-based color system with automatic light/dark mode switching via light-dark() function.

Gray Scale

Token Value Description
--color-gray-50oklch(98% 0 0)Lightest gray
--color-gray-100oklch(96% 0 0)
--color-gray-200oklch(90% 0 0)
--color-gray-300oklch(80% 0 0)
--color-gray-400oklch(70% 0 0)
--color-gray-500oklch(55% 0 0)Mid gray
--color-gray-600oklch(45% 0 0)
--color-gray-700oklch(35% 0 0)
--color-gray-800oklch(25% 0 0)
--color-gray-900oklch(15% 0 0)Darkest gray

Semantic Colors

Use semantic tokens for automatic light/dark adaptation.

Token Description
--color-backgroundPage background
--color-surfaceCard/component surface
--color-surface-raisedElevated surface
--color-surface-sunkenRecessed surface
--color-textPrimary text
--color-text-mutedSecondary text
--color-text-subtleTertiary text
--color-borderDefault borders
--color-border-strongEmphasized borders
--color-interactiveButtons, links
--color-interactive-hoverInteractive hover state

Brand Colors

Primary Secondary Accent
Token Description
--color-primaryPrimary brand color
--color-primary-hoverPrimary hover state
--color-primary-subtlePrimary tint for backgrounds
--color-secondarySecondary brand color
--color-accentAccent/highlight color

Status Colors

Success Warning Error Info
Token Hue Description
--color-success145Green for positive
--color-warning70Yellow/orange for caution
--color-error25Red for errors
--color-info240Blue for informational

Usage Example

/* Semantic colors adapt to light/dark mode */ .card { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); } /* Brand colors */ .button { background: var(--color-primary); color: var(--color-text-on-primary); } .button:hover { background: var(--color-primary-hover); }

Spacing

T-shirt size scale for consistent spacing throughout your design.

Spacing scale visualization:

3xs
2px
2xs
4px
xs
8px
s
12px
m
16px
l
24px
xl
32px
2xl
48px
3xl
64px
Token Value Pixels
--size-3xs0.125rem2px
--size-2xs0.25rem4px
--size-xs0.5rem8px
--size-s0.75rem12px
--size-m1rem16px
--size-l1.5rem24px
--size-xl2rem32px
--size-2xl3rem48px
--size-3xl4rem64px

Numeric Aliases

Open Props compatible numeric scale for easy migration.

Alias Maps To
--size-1--size-2xs
--size-2--size-xs
--size-3--size-m
--size-5--size-l
--size-7--size-xl
--size-8--size-2xl
--size-9--size-3xl

Usage Example

/* T-shirt size scale */ .section { padding: var(--size-l); /* 1.5rem / 24px */ margin-block: var(--size-xl); /* 2rem / 32px */ gap: var(--size-m); /* 1rem / 16px */ } /* Numeric aliases (Open Props compatible) */ .card { padding: var(--size-3); /* Same as --size-m */ gap: var(--size-2); /* Same as --size-xs */ }

Typography

System font stacks and a harmonious type scale.

Font Families

Token Stack
--font-sanssystem-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
--font-serifCharter, "Bitstream Charter", "Sitka Text", Cambria, serif
--font-monoui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace

Font Sizes

xs - 0.75rem (12px)

sm - 0.875rem (14px)

md - 1rem (16px)

lg - 1.125rem (18px)

xl - 1.25rem (20px)

2xl - 1.5rem (24px)

3xl - 1.875rem (30px)

4xl - 2.25rem (36px)

5xl - 3rem (48px)

Line Heights

Token Value Use Case
--line-height-none1Single line text
--line-height-tight1.25Headings
--line-height-snug1.375UI text
--line-height-normal1.5Default body
--line-height-relaxed1.625Long-form prose
--line-height-loose1.75Generous spacing

Measure (Line Length)

Token Value
--measure-narrow45ch
--measure-normal65ch
--measure-wide80ch

Usage Example

/* Font families */ body { font-family: var(--font-sans); } code { font-family: var(--font-mono); } /* Font sizes */ h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } p { font-size: var(--font-size-md); } /* Line heights */ .dense { line-height: var(--line-height-tight); } .prose { line-height: var(--line-height-relaxed); }

Borders

Border widths and radius scale for consistent UI shapes.

Border Widths

Token Value
--border-width-thin1px
--border-width-medium2px
--border-width-thick4px

Border Radius

xs
s
m
l
xl
full
Token Value Pixels
--radius-xs0.125rem2px
--radius-s0.25rem4px
--radius-m0.5rem8px
--radius-l0.75rem12px
--radius-xl1rem16px
--radius-2xl1.5rem24px
--radius-full9999pxPill/circle

Usage Example

/* Border widths */ .input { border: var(--border-width-thin) solid var(--color-border); } /* Border radius */ .button { border-radius: var(--radius-m); } .avatar { border-radius: var(--radius-full); } .card { border-radius: var(--radius-l); }

Shadows

Elevation system with subtle to dramatic shadow depths.

xs
sm
md
lg
xl
Token Use Case
--shadow-xsSubtle elevation
--shadow-smCards, buttons
--shadow-mdDropdowns
--shadow-lgPopovers, tooltips
--shadow-xlModals
--shadow-2xlDramatic elevation
--shadow-innerInset effect
--shadow-noneRemove shadow

Usage Example

/* Shadow scale */ .card { box-shadow: var(--shadow-sm); } .modal { box-shadow: var(--shadow-xl); } /* Numeric aliases */ .tooltip { box-shadow: var(--shadow-2); }

Motion

Animation timing and easing functions. Automatically respects prefers-reduced-motion.

Durations

Token Value Use Case
--duration-instant50msImmediate feedback
--duration-fast100msHover states
--duration-normal200msStandard transitions
--duration-slow300msComplex animations
--duration-slower500msPage transitions

Easing Functions

Token Character
--ease-1Subtle
--ease-2Moderate
--ease-3Standard (default)
--ease-4Emphasized
--ease-5Dramatic
--ease-inAccelerating
--ease-outDecelerating
--ease-elastic-1Slight bounce
--ease-elastic-2More bounce

Reduced Motion

All duration tokens automatically become 0ms when users have prefers-reduced-motion: reduce enabled.

Usage Example

/* Duration scale */ .transition-fast { transition: all var(--duration-fast) var(--ease-default); } .transition-slow { transition: all var(--duration-slow) var(--ease-out); } /* Respects prefers-reduced-motion automatically */

Next Steps

Themes

Apply brand themes to change colors and personality.

Attributes

Data attributes for layout and styling.

Elements

Browse all styled HTML elements.