Section 03 · Foundations

Typography.

Three families with non-overlapping jobs. Twelve sizes you can actually keep in your head. Five weights — most of which you won't reach for.

Families

--vp-font-displayChakra Petch 500/600/700 · marketing surfaces, section headers, metric numbers
--vp-font-bodyGeist 300/400/500/600 · body copy, UI labels, button text
--vp-font-monoGeist Mono 400/500/600 · literals, code, technical labels

All three are self-hostable from Google Fonts. The application should bundle them locally for offline operation — see Integration · Vuetify.

When each family appears

● Display
Probe HTTP
3
Section headlines, dashboard metric values, the wordmark. Anywhere identity beats density.
● Body
Save probe
Stores this request to the project library.
Buttons, labels, help text, paragraphs. The default for everything that isn't a literal.
● Mono
https://api.target.com/v1/users
200
820 ms · 4.1 KB
URLs, headers, codes, hashes, paths, IDs, latencies, byte counts — every literal.
● Don't
Save probe
Display in dense UI looks like a billboard. It's narrower than Geist; reading 30 button labels in it is slow.

Size scale

--vp-text-3xs · 10pxUPPERCASE MONO LABELS
--vp-text-2xs · 11pxbadges · status pills · meta
--vp-text-xs · 12pxcode blocks · breadcrumb · table secondary
--vp-text-sm · 13.5pxUI labels · button text · sidebar items
--vp-text-base · 15pxBody copy · default paragraph
--vp-text-md · 16pxEmphasised body · feature list lead
--vp-text-lg · 19pxLead paragraph · card title
--vp-text-xl · 22pxSubsection heading
--vp-text-2xl · 28pxH2 · in-page section
--vp-text-3xl · 40pxPage title
--vp-text-4xl · 56pxMarketing H1 (small)
--vp-text-5xl · 72pxMarketing H1 (hero)

The eyebrow pattern

The "small green dot + uppercase mono label above a heading" pattern is system-wide. Use it for any titled region — section openers, sidebar groups, card category labels. Never for body copy or for emphasising arbitrary lines of text.

Recent activity

Don't