Foundations

Typography

The type scale: sizes, weights and when to use each

SF Pro through the system stack with Inter as a fallback; SF Mono for monospace with IBM Plex Mono as a fallback. No text is larger than Display 36/40 except the intro heading on the site’s home page (DESIGN.md, Typography)

Light

Meetings

text-display · Display 36 / 40, 700

Section title

text-title · Title 22 / 28, 700

Heading in a long text

text-heading · Heading 20 / 28, 600

12:04

text-timer · Timer 32 / 36, 700, tabular

Main app text: what happened and what to do

text-body · Body 15 / 22, 400

Reading on the site: text column up to 760 px

text-body-web · Body web 16 / 24, 400

Button and row labels, chips

text-label · Label 14 / 20, 500

Meta, secondary content

text-caption · Caption 13 / 18, 400

TUE, 10:00 · MEETING ROOM

text-mono · Mono 12 / 16, 400, +0.02em

Dark