Foundations
Spacing · Radius · Shadow
Geometry, motion, depth, and rhythm tokens. An 8-point grid, a four-tier motion system, and hairline-first elevation.
01 — Radius
Geometry tokens
Badge
Input (outer)
Tailwind built-in
Input (inner)
Small card
Tailwind built-in
Card inner
Tailwind built-in
02 — Motion
Duration tiers
Every animation picks one of four duration tiers. Easing comes from --motion-spring-easing unless a component overrides it. Hover any card to feel the duration.
duration-micro
100ms
Color / opacity transitions, hover, focus ring
duration-feedback
180ms
Border, background fills, button press
duration-reveal
250ms
Menus, tooltips appearing · utility ships with first consumer
duration-orchestration
500ms
Page transitions, modals, multi-step reveals
Three of the four tiers are exposed as Tailwind utilities today: duration-micro, duration-feedback, and duration-orchestration. The reveal tier is callable via --motion-reveal-duration; the duration-reveal Tailwind utility will land with its first consumer (Tooltip / Accordion brief). duration-button is a deprecated legacy alias for duration-feedback.
03 — Shadows
Depth tokens
Stationary in-flow surfaces (cards, panels, score boxes) earn their depth from 1px hairlines and tinted backgrounds — never drop shadows. Three sanctioned exceptions: (1) the brand CTA (variant="brand") gets an inset 1px highlight + brand-overlay glow on hover, because the orange voltage IS the affordance; (2) inputs and buttons get 3px brand-overlay focus halos; (3) transient overlays (tooltip, dialog, toast, dropdown) lift via subtle drop shadows because they float above unpredictable content.
--shadow-sm
sm
none — kept for callsite parity
--shadow-md
md
Tooltip overlay only (transient lift)
--shadow-lg
lg
Dialog / Toast overlay only (transient lift)
--shadow-button-brand
button-brand
Inset 1px hairline on the orange CTA (P2 — not a drop shadow)
--shadow-button-brand-hover
button-brand-hover
Inset hairline + brand-overlay-20 glow on brand-button hover (P3 voltage)
--shadow-inset-highlight
inset-highlight
Top-edge glass refraction — 1px hairline (0.08 white)
--shadow-inset-sm
inset-sm
Subtle 1px inset highlight (0.05 white)
--shadow-inset-xs
inset-xs
1px inset for hints and secondary bubbles (0.03 white)
--shadow-inner-dark
inner-dark
Input / textarea 1px inset hairline
04 — Gradients
Brand vignettes
Use these tokens in style={{ backgroundImage: 'var(--bg-brand-vignette-top)' }} instead of inline rgba() values. Eliminates hardcoded brand opacity strings across components.
--bg-brand-vignette-top
top
Session shell, summarizing state (ellipse at 50% 0%)
--bg-brand-vignette-mid
mid
Revealed answer header (ellipse at 50% 15%)
--bg-brand-vignette-center
center
Auth loading gate (ellipse at 50% 45%, stronger)
05 — Focus ring
Focus ring
Focus ring uses a balanced alpha-white glow that sits flush with borders.
06 — Spacing
8pt grid
07 — Z-index
Named layers
Use semantic utility names instead of bare numbers. Each layer maps to a --z-* token in @theme. Arbitrary values (z-[44], z-[100]) are reserved for intentional between-layer stacking or accessibility skip links.