Typography

Marigold's typography lives in five primitives: <Headline>, <Title>, <Text>, <Description>, and <TextValue>. The role each one plays and how they compose with containers is covered in Component principles. This page covers something narrower: where the typography scales live in code, how primitives share them, and how that will change.

Heading scale

<Headline> owns the heading scale. The tokens are level-1 through level-6. The runtime classes live in Headline.styles.ts.

<Title> reuses that scale. The link is enforced in two places at once:

• Runtime: Title.tsx calls useClassNames({ component: 'Headline', ... }) so the same theme entry produces both primitives' classes.
• Types: Headline.tsx exports HeadlineSize and Title.tsx consumes it, so a rename of the scale ripples through both prop unions.

Body scale

<Text> owns the body scale. The size tokens range from default through 9xl. The variant tokens are default and muted. Both runtime maps live in Text.styles.ts.

<Description> and <TextValue> have no typography props of their own. The container or selection item they sit inside owns their styling.

Future direction

Both scales live inside their *.styles.ts files today. A follow-up will lift them into theme tokens (CSS variables) so a single source of truth backs every primitive and every consumer. The exported type aliases (HeadlineSize, TextSize) are the seed of that consolidation. They make the relationships explicit so the future PR can replace the runtime without rewriting consumer-facing types.

Related