The system this site is built on.
Studio is where I keep the craft honest: the type, colour, spacing, and motion this site actually runs on — documented in the open. Constraints I can point to, instead of re-deciding the basics every time.
A few working beliefs
Design is mostly structure. Get the grid, the hierarchy, and the spacing right and most of the style decisions answer themselves.
Restraint is the feature. The hard part is rarely adding — it's deciding what to remove so the few things left can carry weight.
Clarity beats cleverness. If a choice needs explaining twice, it usually isn't finished.
Type
One family, a quiet scale.
A single sans on a 1.25 scale, mostly light weights — large and calm for headings, small and widely tracked for labels.
- Display--step-6Clarity over output.
- Page title--step-5Slow, honest diagnosis.
- Section--step-4Judgment over process.
- Title--step-3The cost of unclear decisions
- Lede--step-2Understanding before screens, decisions before pixels.
- Body--step-0Calm, plain and senior — written for people making product decisions.
- Label--step--2Structural label · index · metadata
Colour
Paper, ink, one accent.
Warm paper, deep ink, a single orange accent. The same tokens invert cleanly for dark mode — switch the theme and these swatches follow.
Paper
--paper
The ground
Paper 2
--paper-2
Quiet fields
Ink
--ink
Text, rules, the wipe
Ink 3
--ink-3
Secondary text (4.5:1+)
Accent
--accent
The focus mark
Accent ink
--accent-ink
Small orange text
Field
--accent-field
The conversation
Invert
--invert
Navy fields
Spacing
Everything on a 4px unit.
One base unit. Every gap and inset is a multiple of it, so the rhythm stays even without measuring.
- 1
- 2
- 4
- 6
- 10
- gutter
- section
Motion
One curve, three speeds.
A single easing curve and three durations. Movement enhances; it never carries meaning — and it is switched off entirely under reduced motion.
- dur-1 · 160msColour and state changes
- dur-2 · 320msArrows, toggles, small moves
- dur-3 · 640msWipes, reveals, the panel
How I keep it consistent
Align to the grid. Everything sits on the same underlying structure, with square corners that keep the layout architectural rather than soft.
Flat at rest. Surfaces stay flat until they need to signal depth or interaction — shadow is information, not decoration.
Two type registers. Large, light display text against small, tracked utility labels. The contrast between them does most of the work.
The tools
A small, sharp stack — enough to take an idea from a whiteboard to production without ceremony. It's the same stack this site is built with.
- Figma — interface design, component systems, and prototyping.
- React / Next.js — production front-ends; what you're reading runs on it.
- GSAP / Framer Motion — restrained, physics-aware motion.
- React Native — when the work needs to leave the browser.
Constraint is a relief, not a cage. The blank canvas is paralysing; the grid is permission to move.
Want something built with this kind of care?
Tell me what you're working on — a short note is plenty.