Work / 09 · Design system
Classic Cottrell Design System
A token-driven, multi-theme design system pairing a warm editorial canvas with reusable React primitives.
- Role
- Design and build
- Year
- 2026
- Status
- Live
- Stack
- CSS custom properties · React 19 · Base UI
- Numbers
- 1 token layer · 2 themes
- Links
- Live system · Source
Every new interface started as a fresh set of decisions: which green, which radius, which type pairing, made again from scratch each time and drifting a little further from the last one. Re-theming meant hunting down hardcoded values across a dozen components.
The Classic Cottrell Design System is the fix: one set of CSS custom properties for color, type, and spacing, and a library of primitives built on top of them, so re-theming is a values-only edit instead of a rewrite.
What it is
One token layer, one component library, one showcase that proves both:
- A warm, editorial baseline. A cream canvas, a single forest-green accent, and a Rosarivo-serif / Red Hat Display-sans pairing, defined once as CSS variables in globals.css and mapped to light and dark themes.
- Primitives, not one-off pages. Button, Card, Input, Badge, and the rest live in components/ui/, built with React 19 and Base UI primitives, so every demo page — landing, form, about, gallery — assembles entirely from the same reusable set.
- The showcase is the documentation. The home page renders the tokens, type, and components live, so what you see is what you get, not a static style guide that drifts out of sync with the code.