Typography

Inter set tight and semibold, with a two-tone trick borrowed from Apple: the second clause of a headline drops to the muted colour.

Scale

type-display

48 → 72px · 600 · -0.03em

Hero headlines

type-headline

30 → 48px · 600 · -0.025em

Section headlines

type-title

20 → 24px · 600 · -0.02em

Card and page titles

type-lead

18 → 20px · muted

Intro paragraphs

text-base

16px · 1.5

Body

text-sm

14px

UI labels, captions

type-eyebrow

12px · 500 · uppercase · +0.08em

Overlines

Bring your projects, tasks, and team together in one place.

<Headline size="display">
  Bring your projects,{" "}
  <Headline.Muted>tasks, and team together in one place.</Headline.Muted>
</Headline>

Inter with stylistic sets cv01–cv04 and ss03 enabled, which reads closest to SF Pro. Swap the --font-sans variable to change it everywhere.