Master Reference · v1.0

Wavecast Typography — Role Registry

The canonical WDS type system — the full set of 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

34 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

Poppins60029–40 / 48

Broadcast that compounds

text-display

Display / base

Poppins70033–52 / 60

Broadcast that compounds

text-display-lg

Display / lg

Poppins70040–72 / 80

Compounds

HeadlinePoppins · page-level & prominent block titles

text-headline-sm

Headline / sm

Poppins60020 / 28

Audience engagement, end to end

text-headline

Headline / base

Poppins60020–24 / 32

Audience engagement, end to end

text-headline-md

Headline / md

Poppins70023–28 / 36

Audience engagement, end to end

text-headline-lg

Headline / lg

Poppins60023–32 / 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 / base

Inter50016 / 24

A relationship document, not a results dump

text-subhead-sm

Subhead / sm

Inter50014 / 20

A relationship document, not a results dump

text-subhead-xs

Subhead / xs

Inter50013 / 18

A relationship document, not a results dump

text-lead

Lead / base

Inter40018 / 28

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

text-blockquote

Blockquote / base

Inter400 italic17 / 26

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

text-list-item

List Item / base

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 / base

Inter50012 / 16

Filter · Sort · Export

text-meta

Meta / base

Inter40012 / 16

Prepared by Wavecast Pro · 1 June 2026

text-footnote

Footnote / base

Inter40011 / 16

Figures are indicative and based on platform-reported engagement at time of export.

text-button

Button / base

Inter70014 / 20

View the full report

text-callout

Callout / base

Inter50014 / 20

Carry this format forward as the Wavecast delivery standard.

text-callout-lg

Callout / lg

Inter50015 / 22

Carry this format forward as the Wavecast delivery standard.

Inline & annotationInter · links and captions

text-link

Link / base

Inter40015 / 22 · underline

Read the partnership summary →

text-caption-sm

Caption / sm

Inter60010 / 14 · 0.08em

Fig. 1 — Retention curve

text-caption

Caption / base

Inter60011 / 16 · 0.06em

Bolus feeding webinar · Nutricia UK & Ireland

NavigationPoppins · app bar & page navigation

text-nav-app-bar

Nav / App Bar

Poppins60016 / 24

Home · Calendar · Videos

text-nav-page

Nav / Page

Poppins50015 / 20 · 0.1em

HOME · CALENDAR · VIDEOS

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	29–40	48	—	Display / sm
text-display	base	Poppins	700	33–52	60	—	Display / base
text-display-lg	lg	Poppins	700	40–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	20–24	32	—	Headline / base
text-headline-md	md	Poppins	700	23–28	36	—	Headline / md
text-headline-lg	lg	Poppins	600	23–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	sm	Inter	400	13	20	—	Body / sm
text-body	base	Inter	400	15	22	—	Body / base
text-body-lg	lg	Inter	400	17	26	—	Body / lg
text-subhead	base	Inter	500	16	24	—	Subhead / base
text-subhead-sm	sm	Inter	500	14	20	—	Subhead / sm
text-subhead-xs	xs	Inter	500	13	18	—	Subhead / xs
text-lead	base	Inter	400	18	28	—	Lead / base
text-blockquote	base	Inter	400	17	26	italic	Blockquote / base
text-list-item	base	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	Section	Inter	600	12	16	0.06	—	Label / Section
text-label	base	Inter	500	13	18	0	—	Label / base
text-label-secondary	Secondary	Inter	400	13	18	0	—	Label / Secondary
text-utility	base	Inter	500	12	16	0	—	Utility / base
text-meta	base	Inter	400	12	16	0	—	Meta / base
text-footnote	base	Inter	400	11	16	0	—	Footnote / base
text-button	base	Inter	700	14	20	0	—	Button / base
text-callout	base	Inter	500	14	20	0	—	Callout / base
text-callout-lg	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	base	Inter	400	15	22	0	underline	Link / base
text-caption-sm	sm	Inter	600	10	14	0.08	—	Caption / sm
text-caption	base	Inter	600	11	16	0.06	—	Caption / base

NavigationPoppins · app bar & page navigation

Engineering token	Variant	Font	Wt	Size	LH	Kern	Decoration	Designer ref
text-nav-app-bar	App Bar	Poppins	600	16	24	0	—	Nav / App Bar
text-nav-page	Page	Poppins	500	15	20	0.1	uppercase	Nav / Page

Reading the table

Size / LH are pixels. Where a role scales, Size shows the fluid range (min–max); fixed roles show a single value. The CSS clamp() per fluid role is in 04 Fluid sizing below. For PDF / Word use the max.
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.

Fluid sizing

Canonical

The Size column above shows the fluid range (min–max) where a role scales. You design the max for large desktop; the minimum is derived from it via the WDS fluid ramp, so only the max is ever hand-set.

The rampmin as a factor of max · rounded to the nearest px · never below 18

Max size	Factor	Behaviour
≤ 20px	×1.00	Fixed (min = max): Body, Subhead, Lead, List Item, Title, Label, Utility, Meta, Footnote, Button, Callout, Link, Caption, Navigation, Headline / sm.
21–28px	×0.82	Scales down gently.
29–44px	×0.72	Scales down.
45–56px	×0.64	Scales down harder.
≥ 57px	×0.56	Scales down hardest; oversized display type is what overflows small screens.

Fluid rolesevery other role is fixed at its listed Size, so needs no clamp()

Engineering token	Min	Max	CSS clamp()
text-display-sm	29	40	`clamp(1.8125rem, 1.5435rem + 1.1957vw, 2.5rem)`
text-display	33	52	`clamp(2.0625rem, 1.5978rem + 2.0652vw, 3.25rem)`
text-display-lg	40	72	`clamp(2.5rem, 1.7174rem + 3.4783vw, 4.5rem)`
text-headline	20	24	`clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem)`
text-headline-md	23	28	`clamp(1.4375rem, 1.3152rem + 0.5435vw, 1.75rem)`
text-headline-lg	23	32	`clamp(1.4375rem, 1.2174rem + 0.9783vw, 2rem)`

How the ramp works

Fluid band: min at a 360px viewport, max at 1280px, clamp() interpolates between; rem root is 16px.
Line-height stays the ratio implied by LH over Size, so it scales with the fluid size (Display / lg is 80 / 72 ≈ 1.11).
Calibrated, not invented: the ramp reproduces the mins previously hand-set on Display and Headline. For PDF / Word (fixed render), use the max pixel value.
Downstream: wds-theme-typography (Bruno) emits the clamp() per fluid role.

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. Graded sm (14) / xs (13) carry the secondary slot on compact cards (e.g. Foreseeable Essentials).
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.