Gesso

Typography

Geist Sans for interface and prose, Geist Mono for code and data. Most of the dashboard reads at 13 and 14px.

In the Dashboard

App components set type with Tailwind sizes. One medium name per row; everything else ranks by gray.

text-sm font-medium
Titles, names
runtime-cache-fixture
text-sm
Primary text
4 production deploys failed
text-[13px] text-geist-gray-900
Details, hints
Each project still serves its previous deploy.
text-[12px] font-mono text-geist-gray-900
Branches, IDs
fix/edge-cache · 45f0254
text-[11px] tabular-nums text-geist-gray-900
Figures in rows
7.9k req

Rank With Gray, Not Weight

A row holds one medium name and everything else at 400. Secondary text steps down in color before it steps down in size.

acme-web
Production · Ready · fix/edge-cache
Deployed 3 minutes ago

Headings

Geist Sans sets UI and prose; Geist Mono sets code, data, and tabular figures. Both are open-source. The `typography` tokens above carry concrete `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, and `letterSpacing`:

heading-72
72/72 · 600
Deployments
heading-64
64/64 · 600
Deployments
heading-56
56/56 · 600
Deployments
heading-48
48/56 · 600
Deployments
heading-40
40/48 · 600
Deployments
heading-32
32/40 · 600
Deployments
heading-24
24/32 · 600
Deployments
heading-20
20/26 · 600
Deployments
heading-16
16/24 · 600
Deployments
heading-14
14/20 · 600
Deployments

Labels

label-20
20/32 · 400
Environment Variables
label-18
18/20 · 400
Environment Variables
label-16
16/20 · 400
Environment Variables
label-14
14/20 · 400
Environment Variables
label-14-mono
14/20 · 400
Environment Variables
label-13
13/16 · 400
Environment Variables
label-13-mono
13/20 · 400
Environment Variables
label-12
12/16 · 400
Environment Variables
label-12-mono
12/16 · 400
Environment Variables

Copy

copy-24
24/36 · 400
Each project still serves its previous deploy.
copy-20
20/36 · 400
Each project still serves its previous deploy.
copy-18
18/28 · 400
Each project still serves its previous deploy.
copy-16
16/24 · 400
Each project still serves its previous deploy.
copy-14
14/20 · 400
Each project still serves its previous deploy.
copy-14-mono
14/20 · 400
Each project still serves its previous deploy.
copy-13
13/18 · 400
Each project still serves its previous deploy.
copy-13-mono
13/18 · 400
Each project still serves its previous deploy.

Buttons

button-16
16/20 · 500
Redeploy
button-14
14/20 · 500
Redeploy
button-12
12/16 · 500
Redeploy

Rules

  • Headings, heading-72 through heading-14, title pages and sections; letterSpacing tightens as the size grows.
  • Labels, label-20 through label-12, carry single-line, scannable text: navigation, form labels, table headers, metadata.
  • Copy, copy-24 through copy-13, set multi-line body text with a taller lineHeight.
  • Buttons, button-16 through button-12, are medium-weight labels for buttons and compact controls.

copy-14 and label-14 cover most text. The -mono tokens pair Geist Mono with the same metrics; prefer tabular figures when numbers need to align.

A frame's band title stays at body size in medium, so the count or link beside it shares the line without a jump in size.