Colophon
I designed this site alongside Claude Opus 5.5 from Anthropic, working in Claude Code. It’s a small, honest example of how I like teams to work now: people own the judgment and taste, AI speeds up the making.
I started by studying how design leaders present themselves today, and what hiring managers for Director and Head of Design roles actually look for.
Microsoft Copilot and Claude used in tandem for draft content creation. I edited everything.
I provided creative direction and performed pixel-level adjustments to ensure craft. Claude wrote most of the code.
Every change runs through automated contrast checks across all themes, accessibility scans and Lighthouse audits before it ships.
Each theme has its own type. Check out the pairings, or adjust them in the Style Lab. All fonts are self-hosted.
Title font override: the Style Lab’s Title font is set to Gelasio, so titles use it in every theme instead of the theme’s own, and the samples below show it that way.
Title font override: the Style Lab’s Title font is set to Gilda Display, so titles use it in every theme instead of the theme’s own, and the samples below show it that way.
The default: warm, teacherly and color-blocked.
Titles
Design teams that ship
A warm book serif by Eben Sorkin, built to share Georgia’s proportions. It stays sturdy and readable at large sizes, so headlines feel confident rather than ornate.
A high-contrast display serif by Eduardo Tunni, with fine hairlines and a single weight. More elegant and editorial than Gelasio. Studio Violet’s own title font is Gelasio; set Title font to “Theme’s own” in the Style Lab to see it.
Body
Research-grounded, code-fluent, outcome-focused.
A friendly geometric sans by Tokotype, originally drawn for Jakarta’s city identity. Open shapes keep long case studies easy to read.
Labels & numbers
2024–2026 · 290+ · 100%
A crisp monospace from Vercel, used in every theme for eyebrows, dates and stats, where even spacing helps numbers line up.
Photo captions
Paper prototyping in class
A casual handwriting face by Impallari Type, used only for the polaroid captions on the About page.
Warm paper, an oversized serif and one hot accent.
Titles
Design teams that ship
A condensed display serif from the studio Instrument, with sharp, high-contrast details and a single weight. Set large, it gives this theme its magazine-cover feel.
A warm book serif by Eben Sorkin, built to share Georgia’s proportions. It stays sturdy and readable at large sizes, so headlines feel confident rather than ornate. Editorial Kinetic’s own title font is Instrument Serif; set Title font to “Theme’s own” in the Style Lab to see it.
A high-contrast display serif by Eduardo Tunni, with fine hairlines and a single weight. More elegant and editorial than Gelasio. Editorial Kinetic’s own title font is Instrument Serif; set Title font to “Theme’s own” in the Style Lab to see it.
Body
Research-grounded, code-fluent, outcome-focused.
Rasmus Andersson’s Inter, re-spaced tighter for display sizes. Here it carries body text too, with a touch of extra letter spacing for comfort.
Labels & numbers
2024–2026 · 290+ · 100%
A crisp monospace from Vercel, used in every theme for eyebrows, dates and stats, where even spacing helps numbers line up.
Photo captions
Paper prototyping in class
A casual handwriting face by Impallari Type, used only for the polaroid captions on the About page.
Product-company confidence: an electric accent and mono labels.
Titles
Design teams that ship
Vercel’s sans-serif, made with Basement Studio. Signal sets titles in a heavy weight for a confident, product-company voice.
A warm book serif by Eben Sorkin, built to share Georgia’s proportions. It stays sturdy and readable at large sizes, so headlines feel confident rather than ornate. Signal’s own title font is Geist; set Title font to “Theme’s own” in the Style Lab to see it.
A high-contrast display serif by Eduardo Tunni, with fine hairlines and a single weight. More elegant and editorial than Gelasio. Signal’s own title font is Geist; set Title font to “Theme’s own” in the Style Lab to see it.
Body
Research-grounded, code-fluent, outcome-focused.
The same family as the titles, at a regular weight, keeps the whole theme in one voice.
Labels & numbers
2024–2026 · 290+ · 100%
A crisp monospace from Vercel, used in every theme for eyebrows, dates and stats, where even spacing helps numbers line up.
Photo captions
Paper prototyping in class
A casual handwriting face by Impallari Type, used only for the polaroid captions on the About page.
Try it
Change the theme, accent color, title font, headline animation, motion, density and corners, live, on any page. Your choices stay in your browser. Shortcut: Shift + L.
Astro, MDX for case studies, plain CSS with design tokens, and small framework-free scripts for the animations and the Style Lab. About 48 KB of JavaScript across the whole site (15 KB compressed).
Three themes, each in light and dark, with every text and color pairing checked against WCAG contrast ratios.
Built to WCAG 2.2 AA: keyboard support, visible focus, real text behind every animation, and no motion if your device asks for less.
Google Analytics and Microsoft Clarity measure visits (pages viewed, clicks and scrolling) so I can see what’s useful; both use cookies. Style choices are saved in your own browser and nowhere else.