Typography

Instrument Sans for prose (the Swiss canvas). Berkeley Mono for labels and data (the exposed mechanism). Every character earns its place.

Font Pairing

SANS Instrument Sans

Interface text, prose, headings. The quiet backdrop.

MONO Berkeley Mono

Labels, data, numbers, code. The exposed mechanism.

Type Scale

The quick brown fox

.type-display-2xl Instrument Sans 600 Public pages only — the headline IS the message

The quick brown fox

.type-display-xl Instrument Sans 600 Public pages only — sub-headlines, section openers

The quick brown fox

.type-display Instrument Sans 600 Largest application step — page-level brand moments

The quick brown fox

.type-heading-lg Instrument Sans 500 Page titles

The quick brown fox

.type-heading Instrument Sans 500 Section headings, card titles

The quick brown fox

.type-heading-sm Instrument Sans 500 Subsection headings

The quick brown fox

.type-body Instrument Sans 400 Default prose

The quick brown fox

.type-body-sm Instrument Sans 400 Secondary prose, help text

LABEL TEXT

.type-label Berkeley Mono 400 Control labels, nav, tags

The quick brown fox

.type-data Berkeley Mono 400 Numbers, times, code, metrics

The quick brown fox

.type-caption Instrument Sans 400 Footnotes, fine print

KEY RULE

Labels and data are always Berkeley Mono. This is the "exposed mechanism" — the interface reveals its structure through monospace type. Instrument Sans is the quiet backdrop for prose and headings.

APPLICATION vs PUBLIC

The scale has two halves. Application surfaces start at type-display (36px) and go down — that is the whole range a product screen needs. type-display-xl and type-display-2xl are for public pages only, where the headline is not a page title but the message itself. Reaching for them inside an application is a sign the page is doing marketing; reaching for a raw font-size above 36px on a public page means these two are missing something — fix them here, not in the consuming project.

Both step down one role below 900px, so a three-line headline stays three lines instead of becoming six.