Design info
For the design geeks.
A few people always want to know the fonts, colors, tools, and decisions behind the site. This page is for you.
Why it looks this way
The palette is dark and restrained, with strong contrast and one purple, so the case studies and the ideas carry the visual weight instead of the chrome around them.
The type is editorial: one grotesk for headings, one face for reading, one mono for labels. Generous whitespace and a steady rhythm of headings, lists, and pull quotes keep long-form work easy to scan.
Everything is built once and reused, so a page reads the same on a phone as it does on a desktop, and a new case study looks like it belongs the day it ships.
Typography
Three open-source typefaces, each with one job.
Instrument Sans
Rodrigo Fuenzalida with Jordan Egstad, Instrument. SIL Open Font License.
Geist
Andrés Briganti and Mateo Zaragoza, Basement Studio for Vercel. SIL Open Font License.
Geist Mono
Basement Studio for Vercel. SIL Open Font License.
Color
Six colors, each with its nearest PANTONE Solid Coated match.
#000F1F
PANTONE Black 6 C · ΔE 4.4
#061C2F
PANTONE 296 C · ΔE 2.0
#F5F5F4
PANTONE 663 C · ΔE 5.9
#A3A3A3
PANTONE 422 C · ΔE 1.5
#6B5CFF
PANTONE 2725 C · ΔE 7.1
#A798FF
PANTONE 2705 C · ΔE 6.6
Each swatch shows the screen color above and its nearest PANTONE® Solid Coated match below, found by CIEDE2000 against Pantone's published Lab values. A ΔE under 2 is hard to see; above that the difference is visible. The two purples sit furthest out because saturated screen violets are brighter than spot ink on coated paper can print. PANTONE® is a registered trademark of Pantone LLC.
Design system
The site is treated as a living system rather than a collection of one-off pages. Typography, spacing, color, content patterns, cards, and interactions are reused so the experience stays consistent as the work evolves. Four type roles cover every heading on the site, and the hash-mark rule beside lists and quotes is the same six-pixel tile everywhere it appears.
The habit comes from the work. I've spent years collaborating with creative and strategy teams on brand books and visual design systems: color, tone of voice, writing style, and UX patterns, set down so a brand holds together everywhere it shows up. Today that means a website, print, social, sponsorships, and collaborations with other brands, often made by different teams at the same time. The system is what keeps all of it recognizably one brand.
Built with
Designed and built by me.
- Next.js
- App Router, with every page a server component and the interactive parts in client components.
- TypeScript
- Throughout.
- Tailwind CSS
- Version 4. The design tokens live in one @theme block in app/globals.css.
- Vercel
- Hosting. Every push to main deploys.
- next/font
- Fetches the three typefaces once at build time and serves them with the site, so nothing is requested from Google when a page loads.
The typefaces are named and credited here under their licenses; no font files are distributed from this page.