Skip to content
WeDanceDocs
Foundationsstable

Typography

One serif for character, the system sans for everything you read and tap. Two families, nothing else.

Font families

Consolidated on 2026-10-10. Caveat, Permanent Marker, Anton and DM Serif Display are retired.

Displayfont-displayvar(--wd-font-display)

From your first night to your best year.

Headings, titles, numbers that matter, the brand voice. · 'Playfair Display', serif

Display italicfont-display italicvar(--wd-font-display)

— see who’s going before you book

Warm asides and highlights — the slot Caveat used to fill. · 'Playfair Display', serif · italic

Sansfont-sansvar(--wd-font-sans)

Every dance. Every teacher. Every city.

Body copy, UI labels, buttons, forms, tables. · system-ui, sans-serif

Type scale

Use these steps. Arbitrary sizes like text-[13px] are the main source of visual drift — use a scale step or one of the small-size tokens below.

DisplayDance tonighttext-5xl → 6xl · 48–60px · bold
Hero titles
H1Dance tonighttext-4xl · 36px · bold
Page titles
H2Dance tonighttext-3xl · 30px · bold
Section titles
H3Dance tonighttext-2xl · 24px · bold
Card titles, sub-sections
H4Dance tonighttext-xl · 20px · bold
Small headings
LeadDance tonighttext-lg · 18px
Intro paragraph under a title
BodyDance tonighttext-base · 16px
Default reading text
SmallDance tonighttext-sm · 14px
Secondary text, card body
CaptionDance tonighttext-xs · 12px
Meta, timestamps, help text
EyebrowDance tonighttext-eyebrow · 10px · caps · 0.3em · amber
Label above a title

Small-size tokens

Below text-xs (12px) the Tailwind scale stops, so pages reached for arbitrary sizes. 292 text-[Npx] remain in product pages; 99.7% of them are these three sizes, now tokens. They set font-size only, exactly like the arbitrary class — swapping is a no-op.

text-eyebrow10px · was text-[10px] ×216The journeyEyebrows, section labels, status pills — usually uppercase with wide tracking
text-meta11px · was text-[11px] ×46Salsa · Bachata · 120 goingMeta lines under card titles: style, win rate, counts
text-tag9px · was text-[9px] ×29RecommendedTiny tags inside cards and chips (“Recommended”, “New”). Never for reading text.

Not tokens: text-[12px] is text-xs; 13px appears only in these docs; 7–8px only in sketches. Anything under 11px is for labels, never for sentences someone has to read.

The heading pattern

Eyebrow, serif title with one italic red phrase, lead in muted sans. The signature WeDance section opener.

The journey

From your first move to your own stage.

Whichever step you're on.

vue
<div class="text-eyebrow uppercase tracking-[0.3em] font-bold text-secondary">
  The journey
</div>
<h2 class="text-3xl font-display font-bold">
  From your first move to <span class="italic text-primary">your own stage.</span>
</h2>
<p class="text-lg text-muted-foreground">Whichever step you're on.</p>

Guidelines

Plan the year.

Do — keep the italic highlight to one short phrase per heading.

Plan the whole year now.

Don't — italicise whole sentences or stack several highlights — the accent stops meaning anything.

Weekly socials and practicas. Go with friends.

Do — set body, buttons and forms in the sans for fast reading on a phone.

Weekly socials and practicas. Go with friends.

Don't — set long paragraphs or form labels in the display serif.