Matter — primary
Weights 400 and 500, sizes from 10px to 295px. Weight 500 carries every heading and the oversized kinetic text; weight 400 carries body and UI copy. Substitute Inter, DM Sans or Satoshi for a close geometric-grotesk match.
Design system
Typography
Matter at weight 500 for every heading, Arial at 14px for the interactive chrome, and one scale between them.
Faces
One custom face, one safe fallback.
Matter does the work at every size. Arial covers the interactive chrome where Matter isn't loaded.
Arial — fallback
Weight 400 at 14px, line-height 1.43. The safe generic fallback for nav, buttons, hero micro-copy and footer, covering form labels, button text and small utility copy.
Type scale
A minor third, from a 15px base.
Line-height 1.0 above 36px and 1.4 for body — the contrast between them defines the typographic rhythm.
| 01 | caption | 10px · line-height 1.4 · letter-spacing 1.5px |
|---|---|---|
| 02 | body | 16px · line-height 1.4 · tracking normal |
| 03 | subheading | 24px · line-height 1.3 · letter-spacing -0.48px |
| 04 | heading | 36px · line-height 1 · tracking normal |
| 05 | heading-lg | 61px · line-height 1 · letter-spacing -2.44px |
| 06 | display | 96px · line-height 1 · letter-spacing -3.84px |
Next
Build on the abyss.
Take the surface stack, the two radii and the rules as written, and the interface holds its register without further supervision.