Typography
Fraunces for titles, IBM Plex Sans for everything people read, JetBrains Mono for tokens and code.
Specimen
Pick a family, set its weight and size, then type over the sample.
font-family: var(--font-display); font-weight: 400; font-size: 88px;
Scale
Every role at its real size. The display serif stays at weight 400 and is used only for titles.
- HeroFraunces 400 · clamp(48–96) / 0.98 · −0.03em
Open infrastructure
- TitleFraunces 400 · 36–48 / 1.05 · −0.02em
Backdrop cards
- HeadingPlex Sans 500 · 20–24 / 1.3 · −0.01em
One solid focus per card
- LeadPlex Sans 400 · 18–20 / 1.6
A lead adds what the title cannot say on its own.
- BodyPlex Sans 400 · 16 / 1.6
Body copy is 16px with a 1.6 line height and stays under about 65 characters per line.
- SmallPlex Sans 400–500 · 14 / 1.5
Labels, table cells and secondary actions.
- CaptionPlex Sans 400 · 12–13 / 1.4
Captions and timestamps. 12px is the floor.
- CodeJetBrains Mono 400 · 13–14 / 1.6
var(--ink-500)
Chinese and Japanese
The Latin faces have no CJK glyphs, so each language falls back to its own system faces by lang. Titles drop the negative tracking.
暖色墨水，一抹黄色
照片负责氛围，实色表面负责焦点。
温かいインク、ひとつの黄色
写真が空気をつくり、不透明な面が焦点をつくる。
Rules
- 1Never bold or italicize the display serif for emphasis.
- 2Numbers that change or line up use tabular figures.
- 3Balance titles, keep paragraphs to about 65 characters a line.
- 4Nothing smaller than 12px.