Foundations
Typography
Typography sets how text is structured, sized and weighted across the product. The system pairs two typefaces with a responsive scale and 25 semantic text styles. Apply a style by its role, not by a pixel value, and the hierarchy holds on every screen.
Typefaces#
Satoshi carries the interface. Fraunces is reserved for editorial moments such as brand statements and feature headers. Every text style in the library is set in Satoshi.
Satoshi
Primary, for UI text
A modern, geometric sans-serif with subtle pixel-inspired character, designed to bring clarity, versatility, and a contemporary feel to the interface.
Used for
UI text, Labels and tags, Buttons and controls, Supporting brand elements
Ag
Regular
400
Ag
Medium
500
Ag
Bold
700
Ag
Black
900
Fraunces
Secondary, for editorial moments
A refined transitional serif with expressive contrast, bringing personality and editorial depth to key brand moments.
Used for
Headings (H1–H4), Section titles, Feature headers, Brand-led statements
Clarity, expressed in type.
Responsive scale#
Each style has three sizes, one per breakpoint. Desktop is the largest. Tablet is about 85% of it and mobile about 70%. H1, for example:
Desktop
1024px and up
62px
Tablet
768 to 1023px
52px
Mobile
0 to 767px
42px
Switch the breakpoint below to see every style at that size. Line height and tracking stay the same across breakpoints.
Headings#
Six levels, from page titles down to small section markers.
H1 TitleTypeScale/H1
Clarity, expressed in type.
For big, confident statements: hero sections, landing pages, page titles.
- Size / line
- 62 / 74
- Weight
- Black 900
- Line height
- 120%
- Tracking
- -1%
H2 TitleTypeScale/H2
Clarity, expressed in type.
For strong section headers: major content blocks, feature sections, and primary dividers.
- Size / line
- 48 / 58
- Weight
- Bold 700
- Line height
- 120%
- Tracking
- -1%
H3 TitleTypeScale/H3
Clarity, expressed in type.
For structured sub-headers: card titles, supporting sections, and grouped content.
- Size / line
- 40 / 52
- Weight
- Bold 700
- Line height
- 130%
- Tracking
- -1%
H4 TitleTypeScale/H4
Clarity, expressed in type.
For small but meaningful labels: module headers, sidebar sections, and compact UI titles.
- Size / line
- 32 / 42
- Weight
- Medium 500
- Line height
- 130%
- Tracking
- -0.5%
H5 TitleTypeScale/H5
Clarity, expressed in type.
For lightweight emphasis: card subtitles, secondary labels, and metadata clusters.
- Size / line
- 24 / 31
- Weight
- Medium 500
- Line height
- 130%
- Tracking
- 0%
H6 TitleTypeScale/H6
Clarity, expressed in type.
For subtle structural cues: tiny section markers, low-priority headers, and dense UI layouts.
- Size / line
- 20 / 26
- Weight
- Medium 500
- Line height
- 130%
- Tracking
- 0%
Body#
Four sizes for running text. Medium is the default.
LargeTypeScale/Body-l
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
For primary reading content where comfort and clarity matter.
- Size / line
- 24 / 36
- Weight
- Regular 400
- Line height
- 150%
- Tracking
- -1.5%
MediumTypeScale/Body-md
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
The default body size for most interfaces.
- Size / line
- 20 / 30
- Weight
- Regular 400
- Line height
- 150%
- Tracking
- -1.1%
SmallTypeScale/Body-sm
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
For supporting text that provides context without competing for attention.
- Size / line
- 16 / 22
- Weight
- Regular 400
- Line height
- 140%
- Tracking
- -0.6%
X SmallTypeScale/Body-xs
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
For low-priority or supplementary information.
- Size / line
- 14 / 20
- Weight
- Regular 400
- Line height
- 140%
- Tracking
- 0%
Captions#
Annotations and supporting detail around the main content.
MediumTypeScale/Caption-md
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
For standard annotations and supporting details.
- Size / line
- 16 / 22
- Weight
- Regular 400
- Line height
- 140%
- Tracking
- -1.5%
SmallTypeScale/Caption-sm
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
For secondary information that complements the interface.
- Size / line
- 14 / 18
- Weight
- Regular 400
- Line height
- 130%
- Tracking
- -1.5%
X SmallTypeScale/Caption-xs
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
For low-priority or reference-only content.
- Size / line
- 12 / 16
- Weight
- Regular 400
- Line height
- 130%
- Tracking
- -1.1%
Labels#
Three sizes in three weights for controls, tags and form labels. Satoshi has no semibold, so SemiBold styles use Bold (700).
Label
18 / 25 · 700
Label
18 / 25 · 500
Label
18 / 25 · 400
Label
16 / 22 · 700
Label
16 / 22 · 500
Label
14 / 20 · 400
Label
14 / 21 · 700
Label
14 / 21 · 500
Label
14 / 21 · 400
Help text#
Overlines introduce a section or group. The footnote carries clarifications and small legal notes.
Overline-mdTypeScale/Overline-md
FOUNDATIONS
For short, high-level context labels that introduce sections or group content.
- Size / line
- 18 / 27
- Weight
- Medium 500
- Line height
- 150%
- Tracking
- 1.5%
Overline-smTypeScale/Overline-sm
FOUNDATIONS
For subtle contextual cues and secondary grouping.
- Size / line
- 14 / 21
- Weight
- Medium 500
- Line height
- 150%
- Tracking
- 1.5%
FootnoteTypeScale/Footnote
Typography defines how text is structured, sized and weighted across the product, so hierarchy stays clear on every screen.
Footnotes handle clarifications, citations, small legal notes, or secondary context that shouldn’t clutter the main layout.
- Size / line
- 14 / 21
- Weight
- Medium 500
- Line height
- 150%
- Tracking
- 0%