Tokens

Typography

Hanken Grotesk carries everything the page says. JetBrains Mono carries everything it measures — labels, specs, code — and is never used for reading.

Scale

Every step interpolates between a phone value and a desktop value, so type never jumps at a breakpoint. The range is deliberately wide: small interface text against large display text is what lets a layout be composed rather than uniform.

Design is how it works

--text-3xl38 → 58px

Design is how it works

--text-2xl30 → 40px

Design is how it works

--text-xl24 → 28px

Design is how it works

--text-lg20 → 22px

Design is how it works

--text-md17 → 18px

Design is how it works

--text-base15 → 15.5px

Design is how it works

--text-sm13 → 14px

Design is how it works

--text-xs12px fixed

Design is how it works

--text-2xs11px fixed

Weight

Hanken Grotesk is a variable font, so any weight is available — but only four are sanctioned. An unrestricted axis produces pages where nothing is consistently emphasised.

Senior Product Designer

--weight-regular400body, everything by default

Senior Product Designer

--weight-medium500controls, active nav

Senior Product Designer

--weight-semibold600headings

Senior Product Designer

--weight-bold700display only

Tracking

Negative tracking scales with size. A grotesque set at 58px with default spacing looks loose and amateurish; the same tracking applied to 15px body text makes it unreadable. The value is a function of size, never a preference.