Design Tokens
CSS custom properties defined in design-tokens.css. Layout, spacing, shadows, motion, radii — shared between modes.
Layout
| Token | Value | Usage |
|---|---|---|
--max-width | 1200px | Content container |
--header-height | 60px | Fixed navbar |
Spacing
| Token | Value | Usage |
|---|---|---|
--space-xs | 0.75rem | Inline gaps |
--space-sm | 1.25rem | Card padding, container mobile |
--space-md | 2.5rem | Section gap, container desktop |
--space-lg | 5rem | Section vertical padding |
--space-xl | 8rem | Large section padding |
Shadows
| Token | Value | Usage |
|---|---|---|
--shadow-hard | 2px 2px 0 slate-300 | Neo-brutalist button |
--shadow-pressed | 0px 0px | Pressed state |
--shadow-sm | 1px 1px 0 slate-200 | Subtle card |
--shadow-card | 0 1px 3px rgba | Card default |
--shadow-pixel | 3px 3px 0 rgba | Pixel step |
Radii
| Token | Value | Usage |
|---|---|---|
--radius-sm | 2px | Sharp corners, tags, badges |
--radius-md | 4px | Cards, buttons, inputs |
--radius-lg | 6px | Large panels (max) |
Motion
| Token | Value | Usage |
|---|---|---|
--motion-duration-fast | 150ms | Hover, focus |
--motion-duration-normal | 250ms | Toggle, show/hide |
--motion-duration-slow | 400ms | Stagger, reveal |
--motion-duration-reveal | 600ms | Scroll reveal |
--motion-ease-out | cubic-bezier(.2,0,0,1) | Exit animations |
--motion-ease-spring | cubic-bezier(.34,1.56,.64,1) | Icon wiggle |
Borders
| Token | Value | Usage |
|---|---|---|
--border-style | 1px solid var(--border-primary) | Main borders |
--border-emphasis | 2px solid var(--color-slate-500) | Strong borders (dark mode) |
--border-thin | 1px solid var(--border-secondary) | Subtle separators |