Foundations
Design Tokens
Every colour, space, radius, shadow, and duration in this system is a CSS custom property defined once in app/globals.css. Components reference the token, never a raw value.
Colour
--color-primary
--color-primary-dark
--color-primary-faint
--color-text
--color-text-secondary
--color-border
--color-bg-subtle
--color-success-text
--color-warning-text
--color-error-text
--color-info-text
Typography
--font-display · 600 · 24px
Aa Design system
--font-sans · 400 · 15px
The quick brown fox jumps over the lazy dog.
--font-mono · 400 · 13px
ref_8f3a2c1e · #F7C948 · 200ms
Spacing
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
Border Radius
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-full
Elevation
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-5
Motion
Hover the square — it scales using --duration-base (200ms) and --easing. Quick UI feedback (hover, focus) uses --duration-fast (120ms) instead. Both are disabled automatically for prefers-reduced-motion.
Usage rules
| Rule | Detail |
|---|---|
| Semantic aliases | Components reference --color-primary, never a raw scale value or hex code directly. |
| Colour scale | Runs 25 (near-white tint) to 900 (near-black shade); semantic aliases point at one specific stop. |
| Contrast | Every text/background token pair meets WCAG AA — 4.5:1 for normal text, 3:1 for large text. |
| Spacing unit | 4px base unit. Every gap, padding, and margin used anywhere is a multiple of 4. |
| New tokens | Proposed in the same PR as their first real usage — never added speculatively. |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug tokens to manage the usage rules above from the CMS.