Skip to content
Design System
Contact

Typography

A dense UI type scale, a condensed display cut for headlines and mono for code only.

FoundationsInstrument SansJetBrains Mono

Type scale

Nine steps from 11px meta to the 40px hero. Every number on the right is read back from the browser with getComputedStyle, so it is what actually renders at this viewport.

MetaTimestamps, counters, badge text

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
CaptionLabels, helper text, tags

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
Dense UITables, menus, sidebars, controls

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
BodyDefault UI and body copy

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
ReadingLong-form copy, page descriptions

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
SubsectionDocs sections, panel titles

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
SectionPage sections, dialog titles

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
Page titleOne per page, in the header

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…
HeroOverview greeting, case study hero

Northwind signed the renewal on Sep 29

Size
…
Line
…
Weight
…
Tracking
…

Click a class to copy it. Sizes without their own line height inherit the body's 1.5; the hero steps down to 32px below 640px.

Weights

Instrument Sans is variable, but the UI uses four stops. Medium does most of the work in dense views.

Weights
Northwind signed the renewal on Sep 29Regular 400font-normalBody copy, table cells, descriptions
Northwind signed the renewal on Sep 29Medium 500font-mediumLabels, buttons, nav items, table headers
Northwind signed the renewal on Sep 29Semibold 600font-semiboldTitles, stat values, emphasis
Northwind signed the renewal on Sep 29Bold 700font-boldRare: one-word emphasis in marketing copy

Display and body

One family, two cuts. Switch the display width to see what the 88% token buys over the regular width.

Same family, two cuts
Body cut

Quarterly pipeline

Stretch
…
Tracking
…
Size
…
font-sans
Display cut

Quarterly pipeline

Stretch
…
Tracking
…
Size
…
font-display

The display cut is the same variable font at 88% width with −0.028em tracking. It fits long titles and big numerals into dense headers. Use it at 26px and up only; below that the tight tracking hurts legibility.

Display width (the token is 88%)

Text colors

Four inks, each with its contrast against the sheet in the preview theme.

Ink hierarchy

  • Acme Corporation renewal

    Titles, body copy, values in cells

    text-foreground

  • Owner and next step

    Secondary text, labels, icons next to text

    text-ink-2

  • Renews automatically unless cancelled

    Descriptions, helper text, empty states

    text-muted-foreground

  • 12

    Icons, counters beside a label, dividers in text

    text-ink-3

Ink-3 sits near 3:1 in the light theme, so it is for icons and counters beside a readable label, never for text that has to be read on its own.

Numerals

Add tabular to any column of numbers, stat tile or timer. The widths are measured live: tabular digits share one advance width.

Numerals
Proportionaldefault
  • …$1,111.11
  • …$8,480.00
  • …$10,247.50
  • …$711.19
  • …$4,096.64

Measuring…

Tabulartabular
  • …$1,111.11
  • …$8,480.00
  • …$10,247.50
  • …$711.19
  • …$4,096.64

Measuring…

Monospace

JetBrains Mono is reserved for code and keys. Data labels, IDs and amounts use the UI font.

Do

Run npm run dev, then press ⌘ K to search.

JetBrains Mono for code, paths and keyboard keys.

Don't
INV-1042$8,480.00

Mono for IDs and amounts reads as code. Use tabular sans instead.

mono.tsxtsx
1// Mono is for code, file names and keys — nothing else
2<code className="font-mono text-[0.8125rem]">npm run dev</code>
3<Kbd>⌘K</Kbd>
4
5// Numbers and IDs in tables stay in the UI font, tabular
6<td className="text-right tabular">$8,480.00</td>

Rules

  • Sentence case everywhere

    Buttons, titles, menu items and table headers. Proper nouns keep their capitals.

    DoCreate project
    Don'tCreate New Project

  • No all-caps eyebrows

    Small labels above titles are 12px medium in muted ink, not tracked capitals.

    DoPipeline
    Don'tPipeline

  • Keep lines under 70 characters

    Body copy caps at max-w-[70ch]; descriptions under titles at about 62ch.

    Domax-w-[70ch]
    Don'tFull-width paragraphs

  • One display title per page

    font-display is for the page header and hero numerals. Sections use the sans at 18–22px.

    DoInvoices
    Don'tInvoices