Design System · Internal
Token-driven design system in vanilla CSS — no framework, no runtime cost
30+ pages, consistent rhythm, zero CSS framework in the bundle
0 KB
CSS framework added to the production bundle
WCAG 2.2 AA
Contrast and focus checks across all interactive elements
0+
Pages styled from the shared design system
Why we built it
The problem we wanted to solve.
We didn't want to ship 200 KB of utility CSS to make a marketing site green. We wanted a design system small enough to read end-to-end, brand-consistent across hero/cards/forms/CTAs, AA-accessible, and easy to customise per-section without breaking the global grid.
How we built it
The approach, step by step.
- CSS custom properties for colour, spacing, radius, shadow, typography — one source of truth in globals.css
- Component-scoped <style> blocks colocated with each component for local overrides
- JetBrains Mono for numerals and stat values; Inter system-stack for body copy
- Reduced-motion fallbacks, AA-contrast verified, visible focus rings on every interactive element
- next/font with no external font CDN — fonts are self-hosted and preloaded
More builds