Skip to content

Type to search the docs, API, and blog.

↑↓ navigate↵ openesc close
Zazz 0.7 alpha
API navigation

API

Typography roles

Named text presets that bundle family, size, weight, leading, tracking, and case.

Native h1–h6 carry their role by default. Any other element takes a role as an identity token: data-ui="text-h4", data-ui="badge text-xs". A role stacks with other tokens, and a utility overrides one property of it (--font-size, --leading, --font-weight); never rebuild a role from utilities.

text-displayThe quick brown fox
text-h1The quick brown fox
text-h2The quick brown fox
text-h3The quick brown fox
text-h4The quick brown fox
text-h5The quick brown fox
text-h6The quick brown fox
text-eyebrowThe quick brown fox
text-linkThe quick brown fox
text-2xlThe quick brown fox
text-xlThe quick brown fox
text-lgThe quick brown fox
text-mdThe quick brown fox
text-smThe quick brown fox
text-xsThe quick brown fox
text-2xsThe quick brown fox

Sizes

The body sizes text-2xs to text-2xl are the --font-size-* tokens with matching leading and tracking. text-eyebrow is a small label: uppercase, tracked, and muted by convention. text-display is the one size above h1, for a hero headline.

Links inside prose are underlined for you. Anywhere else, an inline link takes the text-link role: <a href="/docs/" data-ui="text-link">. It underlines in the text's own color at the --decoration-thickness and --decoration-offset tokens and fades the underline on hover. It stacks with a size role (data-ui="text-sm text-link"). A link that acts like a control is a button with the link variant.

Rich text

data-ui="prose" styles the content inside it: paragraph rhythm, lists, figures, blockquotes, headings. Give it a reading measure with --max-w: var(--article-lg); --mx: auto. Its hooks are on the prose page.