Typography

Geist Variable is the single interface family. Geist Mono is reserved for code; comparable numbers use tabular-nums while remaining in Geist Sans.

heading-display · 300

Run the whole workshop.

heading-title · 400

Today’s work

heading-section · 400

Work orders

text-default · 400

Keep the team, customers, and work in one clear view from booking to payment.

text-compact · 400

Updated 29 Sep 2026 · 14:32

Show codeCopy

Website display headings range from text-3xl to text-7xl with heading-display. Product pages use the smaller semantic heading utilities. Body copy stays at a readable 16px; controls and dense metadata may use 14px or 12px.

Rules

• Use weight 300 only for marketing display headings, 400 for body and structural headings, and 500 for controls, labels, and compact titles.
• Use sentence case. Reserve uppercase tracking for heading-meta.
• Keep reading copy near 65 characters per line.
• Use a visible label for controls. Placeholder text is an example, not a label.
• Keep mobile input text at 16px so browsers do not zoom the viewport.

<h1 className="heading-display text-5xl md:text-7xl">Run the whole workshop.</h1>
<p className="text-subTitle text-muted-foreground">One calm place for the work ahead.</p>