Tokens

275 OKLCH design tokens in 3 layers: Brand → Alias → Mapped. Components consume only Mapped tokens (--surface-*, --text-*, --border-*).

Brand Scales

11-stop OKLCH scales (50–950). Alias and Mapped tokens reference these.

Accent — --color-accent-*

100

200

300

400

500

600

700

800

900

950

Success — --color-success-*

100

200

300

400

500

600

700

800

900

950

Warning — --color-warning-*

100

200

300

400

500

600

700

800

900

950

Error — --color-error-*

100

200

300

400

500

600

700

800

900

950

Info — --color-info-*

100

200

300

400

500

600

700

800

900

950

Neutral Scale

Achromatic scale, dark by default. Light theme remaps all stops.

--color-neutral-* (dark defaults shown)

100

150

200

300

400

500

600

700

800

900

950

1000

Surface

Background and fill tokens for all surfaces. Always use these in components.

--surface-pagePage background

--surface-secondarySecondary background

--surface-cardCard background

--surface-elevatedElevated surface

--surface-inputInput background

--surface-overlayOverlay / scrim

--surface-actionPrimary action

--surface-action-hoverAction hover

--surface-action-mutedAction muted

--surface-action-subtleAction subtle

--surface-hoverGeneric hover

--surface-disabledDisabled bg

--surface-destructiveDestructive bg

--surface-success-mutedSuccess muted

--surface-warning-mutedWarning muted

--surface-error-mutedError muted

--surface-info-mutedInfo muted

Text

Text color tokens for all hierarchies and semantic states.

--text-headingHeadings, primary

--text-bodyBody text

--text-labelLabels

--text-helperHelper / caption

--text-placeholderInput placeholder

--text-disabledDisabled text

--text-on-actionOn accent bg

--text-actionLinks, action text

--text-destructiveError text

--text-successSuccess text

--text-warningWarning text

--text-infoInfo text

Border

Border color tokens for separators, inputs, and semantic feedback.

--border-defaultDefault border

--border-lightSubtle border

--border-heavyStrong border

--border-inputInput border

--border-input-focusInput focus

--border-actionAction / accent

--border-destructiveError border

--border-successSuccess border

--border-warningWarning border

--border-infoInfo border

Radius

--radius-sm0.25rem (4px)

--radius-button0.5rem (8px)

--radius-input0.5rem (8px)

--radius-card0.75rem (12px)

--radius-full9999px (full)

Shadows

--shadow-xssubtle lift

--shadow-cardcard elevation

--shadow-overlaydropdown / popover

--shadow-modalmodal depth

--shadow-glow-accentaccent glow ring

--shadow-glow-errorerror glow ring

Z-index

--z-base0

--z-raised10

--z-dropdown100

--z-sticky200

--z-overlay300

--z-modal400

--z-toast500

Transitions

--transition-fast100ms ease

--transition-base150ms ease

--transition-slow300ms ease

Typography

Line height, font weight, and letter spacing scale tokens.

--ds-leading-none1

--ds-leading-tight1.25

--ds-leading-snug1.375

--ds-leading-normal1.5

--ds-leading-relaxed1.625

--ds-leading-loose2

--ds-weight-normal400

--ds-weight-medium500

--ds-weight-semibold600

--ds-weight-bold700

--ds-tracking-tighter-0.05em

--ds-tracking-tight-0.025em

--ds-tracking-normal0em

--ds-tracking-wide0.025em

--ds-tracking-wider0.05em

--ds-tracking-widest0.1em

Spacing & Sizing

Spacing scale, input heights, and icon sizes.

--ds-space-xs0.25rem / 4px

--ds-space-sm0.5rem / 8px

--ds-space-md1rem / 16px

--ds-space-lg1.5rem / 24px

--ds-space-xl2rem / 32px

--ds-space-2xl3rem / 48px

--ds-space-3xl4rem / 64px

--ds-height-input-sm2rem / 32px

--ds-height-input2.625rem / 42px

--ds-height-input-lg3rem / 48px

--ds-icon-sm1rem / 16px

--ds-icon-md1.25rem / 20px

--ds-icon-lg1.5rem / 24px