Foundation

Typography

Plakat Grotesk for display, Inter for everything else — and the type-size flip that happens at the md breakpoint.

Two families

One for identity, one for everything else.

Plakat Grotesk

Display · Bold 700 only

Ships as a self-hosted woff2. One weight, used for page titles, section headings and numerals in stat blocks. It is a brand voice, not a text face — never set a paragraph in it.

Inter

Text · System stack fallback

Everything else. The theme stack is -apple-system, BlinkMacSystemFont, Segoe UI, Inter, Roboto — note that Inter sits fourth, so on macOS you are usually seeing San Francisco.

Known gap: Inter is not actually loaded

The product app pulls it in with a <link> in index.html. The library has no equivalent, so the system font masks the problem on macOS and the wrong typeface ships on Linux CI. Recorded as audit gap #3 — self-host the woff2 the way Plakat Grotesk already is.

The scale

Five steps. Everything else is a mistake.

Display

Behind the scenes

Plakat Grotesk Bold. Page titles and the landing hero.

Heading

Behind the scenes

Section headings.

Body

Behind the scenes

14px. The mobile default, and the desktop reading size.

Behind the scenes

12px. The desktop default for dense product chrome.

The size flip

Type gets smaller on desktop, not larger. This surprises people.

Most components carry text-sm md:text-xs — 14px on mobile, 12px from the md breakpoint up. Mobile needs the larger size for legibility at arm's length; desktop is dense product chrome viewed close, and 12px is what lets a settings table hold its columns.

button.tsx — from the base class

"... whitespace-nowrap rounded-md text-sm md:text-xs font-medium ..."

The same pair appears on Badge, Input, Label, Tooltip and seven parts of DropdownMenu. It is not decoration — reviewing only one viewport means signing off half the component.