Zetta v0.10

Tokens

Typography

Inter for structure, Geist for operation, Geist Mono for code — a 10-step scale with a 12px floor. Each specimen below is rendered with its actual token values.

The system your front end is built on display · Inter · 36px / 800
The system your front end is built on heading-1 · Inter · 28px / 700
The system your front end is built on heading-2 · Inter · 22px / 600
The system your front end is built on heading-3 · Inter · 18px / 600
The system your front end is built on app-header-brand · Inter · 16px / 700
The system your front end is built on body · Geist · 14px / 400
The system your front end is built on label · Geist · 13px / 500
The system your front end is built on navigation · Geist · 14px / 500
The system your front end is built on caption · Geist · 12px / 400
const theme = "zetta" code · Geist Mono · 13px / 400

Reference

TokenFamilySizeWeightLineTracking
--text-display Inter 36px 800 1.15 -0.02em
--text-heading-1 Inter 28px 700 1.25 -0.01em
--text-heading-2 Inter 22px 600 1.3 -0.01em
--text-heading-3 Inter 18px 600 1.35 —
--text-app-header-brand Inter 16px 700 1.3 -0.01em
--text-body Geist 14px 400 1.6 —
--text-label Geist 13px 500 1.4 —
--text-navigation Geist 14px 500 1.4 —
--text-caption Geist 12px 400 1.5 —
--text-code Geist Mono 13px 400 1.6 —