Audition the sans workhorse + serif display pairing on the locked brand palette — not bare font-name swatches. Pick families per role, dial in a modular type scale, tune weight/line-height/tracking per role, and try serif headlines against an all-sans system with one toggle. Settings persist automatically.
Fonts are loaded live from the Google Fonts CDN — the one external dependency this dev-only tool allows itself. Every candidate (Inter, Geist, IBM Plex Sans/Mono, Fraunces, Newsreader, Source Serif 4, JetBrains Mono, Geist Mono) is open-source and self-hostable; the production build vendors the chosen faces locally with no runtime CDN call.
Preview
Quality from the interface to the code.
Senior Director, Digital Platforms at Spectrum. Still builds the team that builds.
Every typeface here is judged in place — on the real background, next to the real accent, at the sizes the site will actually ship. A pairing that looks sharp in isolation can go flat against the brand's near-black; this stage exists so that never happens twice. Pick the workhorse, pick the voice, then lock it.
Type scale
Every named step, set at its real computed size, in the role's actual family/weight — display & headings follow the heading-driver toggle, body/small/caption stay on the sans workhorse.
Default pairing (tokens/type.json): Geist (sans) + Fraunces (serif display) + JetBrains Mono (mono). Each chip below previews itself, set in its own typeface.
Which family drives headlines?
Per ADR-015 the serif is the display/editorial voice and the sans is UI/body/technical. This toggle re-routes the display line AND h1–h3 together, so you can compare serif headlines against an all-sans system in one click.
A modular scale anchored on body. Named steps: display, h1, h2, h3, body, small, caption — display/h1/h2/h3 step UP by the ratio, small/caption step DOWN.
Computed scale (px)
Per-role controls for the four roles the specimen exercises. Collapsed by default — open a group to adjust it.