Tokens

Stable

The three-tier token system in one place — primitives feed global semantic roles, which feed component tokens. Components reference Tier 3 only. Every swatch and bar below is painted live by the compiled tokens; swap the skin (bottom-right) to watch color and canvas re-map.

Brand scale

brand-50

brand-100

brand-200

brand-300

brand-400 · focus

brand-500 · primary

brand-600 · hover

brand-700 · active

brand-800

brand-900

Neutral scale

neutral-0 · surface

neutral-50 · page

neutral-100 · subtle

neutral-200 · border

neutral-300

neutral-400 · disabled

neutral-500 · secondary

neutral-600

neutral-700 · body

neutral-900 · heading

Feedback

success-500

warning-500

error-500

error-700 · destructive

Spacing scale

spacing-1 · 4px

spacing-2 · 8px

spacing-4 · 16px

spacing-6 · 24px

spacing-8 · 32px

spacing-12 · 48px

spacing-16 · 64px

spacing-24 · 96px

Radius

sm · 4

md · 8

lg · 12

xl · 16

2xl · 24

Elevation

Motion

Duration + easing tokens drive every transition. The entrance curve cubic-bezier(0.16, 1, 0.3, 1) is the system default for entrances. All motion is neutralized under prefers-reduced-motion.

`--motion-duration-fast`	100ms	Micro-interactions, links
`--motion-duration-normal`	200ms	Standard component transitions
`--motion-duration-slow`	300ms	Larger moves
`--motion-duration-entrance`	500ms	Entrance animations
`--motion-ease-standard`	cubic-bezier(0.4, 0, 0.2, 1)	State changes
`--motion-ease-entrance`	cubic-bezier(0.16, 1, 0.3, 1)	Entrances (never linear/bounce)