Blur
sm 8px, md 16px, lg 24px
Design Tokens and Theme Contract
Shared OKLCH color, spacing, motion, shadow, and glass tokens used by the component library and docs shell.
Continue to Glass Physics for elevation-level surface previews.
Color Tokens
Light
background
oklch(0.985 0.002 240)foreground
oklch(0.23 0.01 248)surface
oklch(0.997 0.002 245)border
oklch(0.89 0.01 246)accent
oklch(0.20 0.005 250)accentForeground
oklch(0.98 0.003 250)Dark
background
oklch(0.18 0.01 250)foreground
oklch(0.95 0.01 247)surface
oklch(0.23 0.01 250)border
oklch(0.34 0.01 250)accent
oklch(0.92 0.005 250)accentForeground
oklch(0.15 0.005 250)Glass Tokens
Surface
light rgba(255, 255, 255, 0.18)
Border
light rgba(255, 255, 255, 0.20)
Motion Preset Preview
Preset: slideUp
{
"from": {
"opacity": 0,
"transform": "translateY(10px)"
},
"to": {
"opacity": 1,
"transform": "translateY(0)"
},
"duration": "var(--motion-normal)",
"easing": "var(--easing-standard)"
}Reduced motion is handled by CSS token overrides in `@media (prefers-reduced-motion: reduce)`.
Core Token Table
| Group | Name | Value |
|---|---|---|
| Radius Tokens | sm | 0.5rem |
| md | 0.75rem | |
| lg | 1rem | |
| xl | 1.25rem | |
| 2xl | 1.75rem | |
| Spacing Tokens | xs | 0.25rem |
| sm | 0.5rem | |
| md | 0.75rem | |
| lg | 1rem | |
| xl | 1.5rem | |
| 2xl | 2rem | |
| Shadow Tokens | glass-sm | 0 2px 8px rgba(0, 0, 0, 0.08) |
| glass-md | 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) | |
| glass-lg | 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.08) | |
| glass-inset | inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.05) | |
| Motion Duration | fast | 150ms |
| normal | 250ms | |
| slow | 400ms | |
| spring | 500ms | |
| Motion Easing | standard | cubic-bezier(0.2, 0.0, 0.0, 1.0) |
| spring | cubic-bezier(0.34, 1.56, 0.64, 1) | |
| glass | cubic-bezier(0.4, 0.0, 0.2, 1.0) |