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.
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
39px
Clarity over cleverness
Heading 1
31px
Designed and made with restraint
Heading 2
25px
The shape of how I think
Heading 3
20px
Decisions before pixels
Body
16px
The interface follows the decision underneath it.
Small
13px
Quiet labels, captions, and metadata.
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
L #FAFAF7
D #0C1024
Paper raised
L #FFFFFF
D #11162E
Paper deep
L #F2F1ED
D #080B1B
Ink
L #0C1024
D #F2F1ED
Ink muted
L rgba(12, 16, 36, 0.65)
D rgba(242, 241, 237, 0.72)
Ink subtle
L rgba(12, 16, 36, 0.4)
D rgba(242, 241, 237, 0.48)
Accent
L #E8631A
D #F58A4B
Accent strong
L #BE4F0C
D #F58A4B
Invert
L #0C1024
D #1A2147
Rule
L rgba(12, 16, 36, 0.12)
D rgba(242, 241, 237, 0.14)
Everything on a 4px unit.
One base unit. Every gap and inset is a multiple of it, so the rhythm stays even without measuring.
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.
cubic-bezier(0.33, 1, 0.68, 1)
- Fast150ms
- Base300ms
- Slow600ms
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.