Typography

One typeface, Satoshi, across the whole system. What separates a headline from a caption is size, weight and tracking — not a second family.

Each specimen below is rendered at the values printed under it, so the sample is the spec rather than a description of it.

Display

Page headlines. Tight tracking is what makes these read as one shape rather than a row of words — the larger the size, the more negative it goes.

The quick brown fox jumps over the lazy dog
HeroRegular / 40048px49.5px line-2.24px tracking
Page heroes — pricing, figma, blocks.
The quick brown fox jumps over the lazy dog
Page titleRegular / 40044px50px line-2px tracking
Docs and legal page titles.
The quick brown fox jumps over the lazy dog
SectionMedium / 50032px36px line-1.2px tracking
Section headings inside a page.

Headings inside running content, down to the label above a card.

The quick brown fox jumps over the lazy dog
H2Medium / 50026px34px line-0.6px tracking
Documentation section headings.
The quick brown fox jumps over the lazy dog
H3Medium / 50020px24px line-0.4px tracking
Card titles.
The quick brown fox jumps over the lazy dog
H4Medium / 50016px22px line-0.2px tracking
Dense card and panel titles.

Reading sizes. Light weight at the larger end keeps a long paragraph from feeling heavy; regular takes over once the size drops.

The quick brown fox jumps over the lazy dog
LeadLight / 30018.5px31px line-0.16px tracking
The opening paragraph of a page.
The quick brown fox jumps over the lazy dog
BodyLight / 30016.5px29px line-0.14px tracking
Documentation and long-form copy.
The quick brown fox jumps over the lazy dog
SmallRegular / 40014px20px line-0.1px tracking
Navigation, card descriptions, table cells.
The quick brown fox jumps over the lazy dog
CaptionRegular / 40012px16px line0px tracking
Metadata under a price or a name.

Interface text: buttons, badges and the uppercase eyebrows that title a group.

The quick brown fox jumps over the lazy dog
ButtonMedium / 50013.7px20px line-0.084px tracking
Every CTA on the site, at one size.
The quick brown fox jumps over the lazy dog
BadgeMedium / 50011px16px line0.02em tracking
Tier chips and status pills.
The quick brown fox jumps over the lazy dog
EyebrowMedium / 50011px16px line0.12em tracking
Uppercase group titles in the sidebar and rails.