Design1 min read
Design system
The tokens, palettes, motion curves and accessibility rules shared by the products and this site.
On this page
The design system is a set of executable constraints, not a mood. Every value below has a counterpart in app/styles/globals.css or app/lib/theme/registry.ts, and the tests fail if they drift.
The four laws#
- Invisible assistance — a feature should explain itself through form and state, not through helper text.
- Coherent familiarity — the same action has the same shape, hit area and focus treatment everywhere.
- Progressive disclosure — start with the decision, fold the internals until they are requested.
- Cinematic momentum — motion explains cause and effect; leaving is faster than arriving.
Tokens#
| Group | Rule |
|---|---|
| Colour | OKLCH only. Components consume semantic tokens, never hex/rgb/hsl literals. |
| Type | Inter Variable for Latin, system CJK fallback; JetBrains Mono for code and identifiers. |
| Radius | Controls 10px, cards 16px, panels 20px, stages 24px. |
| Material | Surface, card, panel and float shadows; dark mode replaces soft shadows with a top highlight. |
| Spacing | 8pt base; section rhythm clamp(72px, 10vw, 144px). |
Accent axistypescript
Palettes#
- Paper — warm neutral light. Long reading without the clinical blue cast of pure white.
- Graphite — near-black neutral. The quietest dark surface.
- Midnight — cool blue dark with a clearer lightness ladder.
- Dark surfaces separate by lightness: background → card → popover → hover. Borders sit above every surface.
Motion#
| Token | Curve | Use |
|---|---|---|
--ease-standard | cubic-bezier(0.2, 0, 0, 1) | Hover, colour, width. |
--ease-emphasis | cubic-bezier(0.16, 1, 0.3, 1) | Entrance, hero reveals. |
--ease-exit | cubic-bezier(0.4, 0, 1, 1) | Exit, 25–40% shorter. |
Accessibility#
- Visible focus ring on every interactive element; removal is a defect.
- Target size: 44px on touch, 32px in dense desktop surfaces, 24px absolute minimum.
- Contrast: body text and metadata at least 4.5:1; large text 3:1.
prefers-reduced-motionremoves large movement while keeping state changes legible.
Test the tokens, not the screenshot
Contrast is computed from OKLCH in the test suite. A palette cannot ship because it looked fine on one monitor.