Building this site's token system

Every version of this site before this one started with a blank Figma file and a vague sense that it should look “clean.” That approach produces indecision, not cleanliness. This time I set the constraints first and let the design fall out of them.

The constraint

Six colors, two typefaces, one accent used sparingly. That’s the entire palette:

• A canvas near-white, not pure white — #FDFDFD reads calmer on a large monitor than #FFFFFF.
• A near-black ink, #101010, for anything that needs to read as foreground.
• Two supporting grays for secondary text and hairline dividers.
• One accent — a muted rust red — used only for links, hover states, and the handful of moments that need to pull focus.

Everything else in the interface is one of those six values, referenced by name, never a one-off hex code typed into a component.

Why a monospace for labels

Body copy is set in Inter because long-form reading wants a typeface that disappears. But every label, date, and spec — the small print that describes the content rather than being the content — is set in JetBrains Mono. The contrast does two things at once: it gives the page a second visual register without adding a second color, and it borrows the “this is metadata, not prose” convention every developer already has from reading code.

Why no rounded corners

Swiss typographic posters don’t have rounded corners, and neither does this site. It’s a small decision that ends up mattering more than it should — sharp edges make a 1px divider read as a deliberate structural line instead of a stray border a framework left behind. Once the divider is doing real work, you stop needing shadows to establish hierarchy.

What I’d change

The type scale — 12/14/16/20/28/40/56 — is close to right but the jump from 28 to 40 feels slightly early on a few of the longer headings. Small enough that it’s on the list for the next pass, not urgent enough to block shipping.