[Colophon]
How this site is made
This site is built by the same studio that builds the client work, with the same decisions and the same constraints. So here is what it is made of.
[01] Type
Three faces, no more
Archivo is used only as architecture — the large words that hold a composition together. Geist carries anything meant to be read. Geist Mono carries all the small text: labels, section markers, specs and captions.
- Display
- Archivo Variable, width axis set to 118
- Body
- Geist
- Mono
- Geist Mono
- Why variable
- The width axis gives the stretched poster form without loading a second face.
[02] Colour
Orange is territory, not text
#ff7a3d measures roughly 1.9:1 against the paper ground. That is not readable, so it is never used for body text on light. Instead it owns whole fields: a band, a button, a rule.
- Paper
- #dbdbd8 — the page ground
- Ink
- #0d0d0c
- Ember
- #ff7a3d — locked, the brand colour
- Grounds
- Three: paper, ink, ember. A band changes ground and every token changes with it. No dark: variants anywhere.
[03] Build
Custom code, no builder
The same stack the studio builds client projects in when a project needs more than a template.
- Framework
- Next.js 16, App Router
- UI
- React 19, TypeScript
- Styling
- Tailwind CSS v4 with @theme and custom tokens
- Motion
- Motion, plus Lenis for weighted scroll
- Page changes
- The browser's own View Transitions API
[04] Motion
Always switchable off
Motion is decoration here, never information. Nothing on the site needs you to see an animation to make sense of it.
- Reduced motion
- prefers-reduced-motion disables both Lenis and every reveal
- Touch
- Lenis does not run on touch — the system's own scroll is better there
- Anchors
- anchors: false, so the browser's jump to #id keeps working
[05] Measured
Proven, not assumed
The site was redesigned from scratch with 138 URLs live. To avoid losing anything on the way, a tool was built that snapshots every single page and compares it against the old version.
- Routes checked
- 138
- What is compared
- title, meta description, canonical, hreflang, every JSON-LD field, every H1
- Deliberate changes
- have to be written down with a reason, or the check fails
- Result
- 0 losses
[Elsewhere]
If you want to know how the same becomes your project, the process is written down step by step.