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.