Master Reference · v1.0

Wavecast Typography — Role Registry

The canonical WDS type system — 30 semantic roles with their fonts, weights and metrics, rendered as live specimens. The same tokens are consumed by the Hub product UI, the document builder render pipeline and inline editors: different application mechanisms, one source of truth.

Mirrors: Notion · Typography Role RegistryEng source: wds-theme-typography (Bruno)Design source: WDS Design System v2.0

The two families

Canonical

Poppins carries the headings; Inter carries everything read or set small.

Poppins

Display · Headline · Title — weights 600 / 700 · no italic

Inter

Body, Lead, Labels, Utility, Meta, Caption — 400 / 500 / 600 / 700 · 400 italic

Notes

Poppins — prominent heading treatments where its character carries. Working weights 600 (SemiBold) and 700 (Bold). No italic.
Inter — reading and small-text roles where screen legibility wins. Working weights 400 / 500 / 600 / 700, plus 400 italic for Blockquote.
Both load from Google Fonts at runtime on web surfaces; for PDF / Word the render pipeline must embed them.
Inter 700 isn't yet bound to a named role — it exists as a component-level override (chart-block value labels). A second consumer earns it a role.

Live specimens

30 roles

Every role at its registry values. Type settings are identical across light and dark — only colour bindings differ, so these specimens stand for both modes.

DisplayPoppins · hero & document titles

text-display-sm

Display / sm

Poppins60040 / 48

Broadcast that compounds

text-display

Display / base

Poppins70052 / 60

Broadcast that compounds

text-display-lg

Display / lg

Poppins70072 / 80

Compounds

HeadlinePoppins · page-level & prominent block titles

text-headline-sm

Headline / sm

Poppins60020 / 28

Audience engagement, end to end

text-headline

Headline / base

Poppins60024 / 32

Audience engagement, end to end

text-headline-md

Headline / md

Poppins70028 / 36

Audience engagement, end to end

text-headline-lg

Headline / lg

Poppins60032 / 40

Audience engagement, end to end

TitlePoppins · structural section & component headings

text-title-sm

Title / sm

Poppins60014 / 20

Operational feedback

text-title-xs

Title / xs

Poppins60015 / 22

Operational feedback

text-title

Title / base

Poppins60016 / 24

Operational feedback

text-title-lg

Title / lg

Poppins60018 / 26

Operational feedback

Body & readingInter · paragraph copy and tone-setters

text-body-sm

Body / sm

Inter40013 / 20

The webinar drew a steady, engaged audience throughout — retention held well past the midpoint, and the Q&A ran long.

text-body

Body / base

Inter40015 / 22

The webinar drew a steady, engaged audience throughout — retention held well past the midpoint, and the Q&A ran long.

text-body-lg

Body / lg

Inter40017 / 26

The webinar drew a steady, engaged audience throughout — retention held well past the midpoint.

text-subhead

Subhead

Inter50016 / 24

A relationship document, not a results dump

text-lead

Lead

Inter40018 / 28

This report opens the next chapter of the partnership — what worked, how we worked, and where we go next.

text-blockquote

Blockquote

Inter400 italic17 / 26

“The session gave our clinical team exactly the practical detail they'd been asking for.”

text-list-item

List Item

Inter40015 / 22

Typographically identical to Body — separate token for list-specific layout targets.

Labels & small textInter · UI labels, metadata, fine print

text-section-label

Label / Section

Inter60012 / 16 · 0.06em

Act One — What Happened

text-label

Label / base

Inter50013 / 18

Brand Manager

text-label-secondary

Label / Secondary

Inter40013 / 18

Medical Affairs

text-utility

Utility

Inter50012 / 16

Filter · Sort · Export

text-meta

The registry

Canonical

The canonical engineering tokens with full specifications. Designer references map to Sketch shared styles.

DisplayPoppins · hero & document titles

Engineering token	Variant	Font	Wt	Size	LH	Decoration	Designer ref
text-display-sm	sm	Poppins	600	40	48	—	Display / sm
text-display	base	Poppins	700	52	60	—	Display / base
text-display-lg	lg	Poppins	700	72	80	—	Display / lg

HeadlinePoppins · page-level & prominent block titles

Engineering token	Variant	Font	Wt	Size	LH	Decoration	Designer ref
text-headline-sm	sm	Poppins	600	20	28	—	Headline / sm
text-headline	base	Poppins	600	24	32	—	Headline / base
text-headline-md	md	Poppins	700	28	36	—	Headline / md
text-headline-lg	lg	Poppins	600	32	40	—	Headline / lg

TitlePoppins · structural section & component headings

Engineering token	Variant	Font	Wt	Size	LH	Decoration	Designer ref
text-title-sm	sm	Poppins	600	14	20	—	Title / sm
text-title-xs	xs	Poppins	600	15	22	—	Title / xs
text-title	base	Poppins	600	16	24	—	Title / base
text-title-lg	lg	Poppins	600	18	26	—	Title / lg

Body & readingInter · paragraph copy and tone-setters

Engineering token	Variant	Font	Wt	Size	LH	Decoration	Designer ref
text-body-sm	Body / sm	Inter	400	13	20	—	Body / sm
text-body	Body / base	Inter	400	15	22	—	Body / base
text-body-lg	Body / lg	Inter	400	17	26	—	Body / lg
text-subhead	Subhead	Inter	500	16	24	—	Subhead / base
text-lead	Lead	Inter	400	18	28	—	Lead / base
text-blockquote	Blockquote	Inter	400	17	26	italic	Blockquote / base
text-list-item	List Item	Inter	400	15	22	—	List Item / base

Labels & small textInter · UI labels, metadata, fine print

Engineering token	Variant	Font	Wt	Size	LH	Kern	Decoration	Designer ref
text-section-label	Label / Section	Inter	600	12	16	0.06	—	Label / Section
text-label	Label / base	Inter	500	13	18	0	—	Label / base
text-label-secondary	Label / Secondary	Inter	400	13	18	0	—	Label / Secondary
text-utility	Utility	Inter	500	12	16	0	—	Utility / base
text-meta	Meta	Inter	400	12	16	0	—	Meta / base
text-footnote	Footnote	Inter	400	11	16	0	—	Footnote / base
text-button	Button	Inter	600	14	20	0	—	Button / base
text-callout	Callout	Inter	500	14	20	0	—	Callout / base
text-callout-lg	Callout / lg	Inter	500	15	22	0	—	Callout / lg

Inline & annotationInter · links and captions

Engineering token	Variant	Font	Wt	Size	LH	Kern	Decoration	Designer ref
text-link	Link	Inter	400	15	22	0	underline · Link swatch	Link / base
text-caption-sm	Caption / sm	Inter	600	10	14	0.08	—	Caption / sm
text-caption	Caption / base	Inter	600	11	16	0.06	—	Caption / base

Reading the table

Size / LH are pixels — size is the max end of the fluid range; for PDF / Word use the fixed pixel value.
Kern is letter-spacing in em. Convert where needed: pt = em × fontSize (Section label 0.06×12 = +0.72pt · Caption/sm 0.08×10 = +0.8pt · Caption 0.06×11 = +0.66pt).
LM/DM are one token each. Type settings are identical; only the colour binding differs (Text 1 LM #000000 / DM #ffffff, Link #fe2767 in both). The Sketch LM / DM folder split is a designer colour-pairing convenience.

What each role means

Pick the role by what the text is, not by eyeballing a size.

Headings · Poppins

Display — hero / marketing text. Cover pages, document titles, top-of-page treatments.
Headline — high-emphasis page-level text; section H1s and prominent block titles. md (28/700) is reserved for prominent card titles where base (24) is too light and lg (32) too large.
Title — medium-emphasis section / component headings; structural rather than ornamental. xs (15/600) is for tight side-panel and playlist contexts.

Body copy · Inter

Body — default reading typography.
Subhead (16/500) — component sub-headings needing emphasis below the heading hierarchy but heavier than Body. Sits between Body/lg and Title/base.
Lead — opening paragraph after a heading; sets tone. Apply Text 2 for a muted lead.
Blockquote — pull quotes, testimonials, customer voice. Italic at 17px. Indent / accent-bar layout is separate from the type role.
List Item — identical to Body; named separately so list layout properties have a target.

Labels, small text, inline · Inter

Label / Section — section labels, usually uppercase with 0.06em tracking. Label / Label Secondary — general and lighter-weight labels.
Utility — small UI text · Meta — author lines, timestamps · Footnote — disclaimers · Button — button labels · Callout — emphasised small body for highlight panels.
Link — underlined inline link bound to the Link swatch, for whole-element links. For inline links inside paragraphs, apply the Link colour as a per-character override on the existing role.
Caption / sm — smallest caption, uppercase 0.08em · Caption — standard caption with 0.06em tracking for small-size legibility.

Applying roles

One token per role, colour-decoupled. The theme class wires the colour; the role defines font, size, weight, line-height only.

/* Role as a CSS class on semantic HTML */
<p class="wds-lead">Opening paragraph after the heading…</p>
<h2 class="wds-headline-lg">Section heading</h2>
<blockquote class="wds-blockquote">Pulled quote…</blockquote>

/* Theme switching — roles re-bind automatically */
.theme--light { --text-1:#000000; --text-2:#71717a; --text-link:#fe2767; }
.theme--dark  { --text-1:#ffffff; --text-2:#a1a1aa; --text-link:#fe2767; }

How surfaces consume the same roles

Hub product UI — components bind typography slots to role tokens via CSS custom properties (e.g. --basic-event-card-title: var(--text-headline)).
Document builder (Notion → PDF / HTML / Word) — render pipeline applies role classes to semantic HTML, consuming the same wds-typography.css the Hub uses.
Inline editors (Froala) — load wds-typography.css, expose role classes via the paragraph-style dropdown, emit HTML the pipeline consumes.

Muted text

Keep the role, swap the colour to the Text 2 swatch — LM #71717a / DM #a1a1aa. Never make a separate "muted" role; role and colour are decoupled by design.

Overrides & out of scope

Track

First consumer of a treatment is a documented component override; a second consumer earns a named role.

Consumer	Derived from	Override
Branded Docs — chart value labels	Component-level (no role)	Inter 700 / 16px / Accent Rose
Card Block / Year — "Feb" label	Bespoke — no role binding	Poppins 58 / 700 · LH 80 · kern −0.028em · mode-paired colour
Session Panel — "MORE" link	Body / base	Link swatch colour · no underline ("subtle link")

Deferred — not yet in the registry

Table header / Table cell — after the core roles bed in. Inline code / Code block — mono stack, lower priority.
Paragraph trailing-gap spacing matrix — Bruno's text-spacing em scale exists but isn't paired to roles; vertical rhythm is the consuming surface's responsibility for now.
Page-level PDF / Word concerns — break rules, headers / footers, numbering, margins. Document-spec adjacent, not typography.

Wavecast Typography — Role Registry v1.0
Exact mirror of the Notion Typography Role Registry. Ported into the WDS References shell — roles and metrics are not edited here; update the registry, then re-sync.