Foundations
Typography
Four typefaces, each with one job. Pick the typeface by what the text is for, then choose a size from the scale.
Typefaces
Display: Bebas Neue Big headlines only. It has no lowercase, so keep it short.
One source of truth
Interface: Manrope Body text, labels, and buttons. Your default.
Save changes to your workspace
Data: Space Mono Code, tokens, and measurements.
--as-space-4: 16px
Editorial: Merriweather Quotes and long-form callouts.
Good systems stay out of the way.
Size scale
The sizes sm and base are both 14px today. Use base for controls and body text.
2xs Micro labels
Aster
xs Helper text, captions, data
Aster
sm Secondary interface text
Aster
base Default for controls and body
Aster
md Large body text
Aster
lg Section headings
Aster
xl Small headlines, quotes
Aster
2xl Headlines
Aster
3xl Large headlines
Aster
display-s Small display
Aster
display-m Medium display
Aster
display-l Large display
Aster
Weight
Regular Body text
Clear hierarchy
Medium Labels and buttons
Clear hierarchy
Semibold Subheadings
Clear hierarchy
Bold Strong emphasis
Clear hierarchy
Line height
Display Display headlines
Line height sets the space between lines. Tighter suits short headings, and looser makes long passages easier to read.
Tight Short headings
Line height sets the space between lines. Tighter suits short headings, and looser makes long passages easier to read.
Normal Interface text
Line height sets the space between lines. Tighter suits short headings, and looser makes long passages easier to read.
Relaxed Long reading text
Line height sets the space between lines. Tighter suits short headings, and looser makes long passages easier to read.
Using type
Do
Keep text at 12px or larger wherever people need to read it, and load the fonts as shown in Installation.
Don't
Set paragraphs in Bebas Neue or add typefaces outside these four.