Typography

@workflowbuilder/ui ships the type scale as utility classes: one class per text style, named wb-text-{family}-{size} with an optional -emphasized suffix. A class carries the complete style — family, size, weight, and line-height — so text never hard-codes font values.

<h2 class="wb-text-headline-m">Workflow settings</h2>
<p class="wb-text-body-m">Configure how each node runs.</p>
<span class="wb-text-label-l-emphasized">Connection: active</span>

Two typefaces ship with @workflowbuilder/ui itself (via the root import; subpath-only consumers load them independently): Poppins for the display, headline, title, body, label, and node roles, and Inter for wb-text-code. The wb-text-code-mono role uses a fixed-width system stack. Emphasized maps to SemiBold (600), Regular to 400.

The scale

Family	Used for	Classes (wb-text-…)	px
Display	Hero moments, big empty states	display-s · display-m · display-l	24 · 28 · 32
Headline	Page titles, major sections	headline-s · headline-m · headline-l	20 · 22 · 24
Title	Card titles, group labels	title-s · title-m · title-l	14 · 16 · 18
Body	Running text, descriptions	body-s · body-m · body-l	12 · 14 · 16
Label	Buttons, chips, captions	label-s · label-m · label-l · label-xl	10 · 12 · 14 · 16
Node	Canvas node and port labels	node-s · node-m · node-l	11 · 13 · 16
UI/Code	Code, token names, IDs	code (Regular only)	12
UI/Mono	Fixed-width editor content	code-mono (Regular only)	12

Every family except UI/Code and UI/Mono doubles with an -emphasized variant (wb-text-title-m-emphasized), for 40 styles total.

wb-text-code is proportional Inter. Use wb-text-code-mono for editors whose cursor model requires fixed-width glyphs.

Which role to reach for:

Context	Recommended role
Page / hero title	display-* or headline-l
Major section heading	headline-s/-m or title-l
Card or group title	title-s/-m
Running text and descriptions	body-m (body-s for dense UI)
Captions, helper text, metadata	label-m/-l
Buttons	label-l-emphasized
Chips (every size)	label-s
Canvas node and port labels	node-s/-m
Code, token names, IDs	code
Fixed-width editor content	code-mono

Font-size tokens

Class font sizes reference the --wb-ds-font-size-* primitives (wb/font-size/NNN in Figma, where NNN ≈ px × 12.5, truncated; the CSS values are rem). Until the token export ships them through @workflowbuilder/ui/tokens.css, the classes define these primitives themselves — the migration swaps the source without touching consumers.