Typography

Typography system overview

Browse headings, body copy, lists, quotations, inline emphasis, and code blocks from one hub. Each section demonstrates variants, formatting combinations, and snippets you can paste into App Router pages.

Browse sections

Pick a topic to view variants, formatting, combinations, and snippets.

Headings

Open preview

Paragraph

Open preview

Lists

Open preview

Blockquote

Open preview

Inline text

Open preview

Code blocks

Open preview

CSS variable overrides

Typography CSS variables

Override these typography variables on :root, a theme selector, or a component wrapper.

81 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-typography-default-fg: oklch(20.8% 0.042 265.755);
  --zui-typography-default-border: #00000026;
  --zui-typography-muted-fg: oklch(55.4% 0.046 257.417);
  --zui-typography-muted-border: #00000026;
  --zui-typography-primary-fg: oklch(52% 0.105 223.128);
  --zui-typography-primary-border: oklch(86.5% 0.127 207.078 / 0.4);
  --zui-typography-secondary-fg: oklch(44.6% 0.043 257.281);
  --zui-typography-secondary-border: #00000026;
  --zui-typography-accent-fg: oklch(49.1% 0.27 292.581);
  --zui-typography-accent-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-destructive-fg: oklch(58.6% 0.253 17.585);
  --zui-typography-destructive-border: oklch(81% 0.117 11.638 / 0.4);
  --zui-typography-info-fg: oklch(50% 0.134 242.749);
  --zui-typography-info-border: oklch(82.8% 0.111 230.318 / 0.4);
  --zui-typography-success-fg: oklch(50.8% 0.118 165.612);
  --zui-typography-success-border: oklch(84.5% 0.143 164.978 / 0.4);
  --zui-typography-warning-fg: oklch(55.5% 0.163 48.998);
  --zui-typography-warning-border: oklch(87.9% 0.169 91.605 / 0.4);
  --zui-typography-error-fg: oklch(50.5% 0.213 27.518);
  --zui-typography-error-border: oklch(80.8% 0.114 19.571 / 0.4);
  --zui-typography-gradient-pink-violet-from: oklch(59.2% 0.249 0.584);
  --zui-typography-gradient-pink-violet-to: oklch(54.1% 0.281 293.009);
  --zui-typography-gradient-pink-violet-fg: transparent;
  --zui-typography-gradient-pink-violet-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-gradient-cyan-violet-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-violet-to: oklch(54.1% 0.281 293.009);
  --zui-typography-gradient-cyan-violet-fg: transparent;
  --zui-typography-gradient-cyan-violet-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-gradient-cyan-blue-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-blue-to: oklch(54.6% 0.245 262.881);
  --zui-typography-gradient-cyan-blue-fg: transparent;
  --zui-typography-gradient-cyan-blue-border: oklch(80.9% 0.105 251.813 / 0.4);
  --zui-typography-gradient-cyan-green-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-green-to: oklch(62.7% 0.194 149.214);
  --zui-typography-gradient-cyan-green-fg: transparent;
  --zui-typography-gradient-cyan-green-border: oklch(87.1% 0.15 154.449 / 0.4);
  --zui-typography-gradient-cyan-orange-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-orange-to: oklch(64.6% 0.222 41.116);
  --zui-typography-gradient-cyan-orange-fg: transparent;
  --zui-typography-gradient-cyan-orange-border: oklch(83.7% 0.128 66.29 / 0.4);
  --zui-typography-gradient-cyan-red-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-red-to: oklch(57.7% 0.245 27.325);
  --zui-typography-gradient-cyan-red-fg: transparent;
  --zui-typography-gradient-cyan-red-border: oklch(80.8% 0.114 19.571 / 0.4);
  --zui-typography-gradient-cyan-purple-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-purple-to: oklch(55.8% 0.288 302.321);
  --zui-typography-gradient-cyan-purple-fg: transparent;
  --zui-typography-gradient-cyan-purple-border: oklch(82.7% 0.119 306.383 / 0.4);
  --zui-typography-gradient-cyan-pink-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-pink-to: oklch(59.2% 0.249 0.584);
  --zui-typography-gradient-cyan-pink-fg: transparent;
  --zui-typography-gradient-cyan-pink-border: oklch(82.3% 0.12 346.018 / 0.4);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-typography-default-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-typography-default-border-dark: #ffffff26;
  /* ...same variables with -dark at the end */
}

What it does

Provides Heading, Text, List, Blockquote, InlineCode, and CodeBlock with shared tone and emphasis props.

Use semantic HTML by default and tune visuals with display overrides only when necessary.

Sections

Marketing pages with consistent heading scale.
Documentation sites with lists and block quotes.
Dashboard copy with muted secondary lines.
Inline code and fenced samples without bespoke CSS.

Composition and API

Prefer small primitives over prop-heavy wrappers.

Compose bold, italic, underline, and strikethrough via booleans on Heading and Text.

Accessibility

Reserve headings for titles and sections.

Keep contrast sufficient for muted tones against your background; validate blockquotes with readable citations.

Next.js integration notes

Import from `@zentauri-ui/zentauri-components/ui/typography`.

Set NEXT_PUBLIC_SITE_URL so canonical metadata resolves on deploy.

FAQ

Does Typography work with Next.js App Router?

Yes. Primitives are plain React components; use them in server components unless you wrap interactive playgrounds that rely on client hooks.

Can I override styles with Tailwind?

Pass className to merge utilities; tones map to semantic Tailwind text colors aligned with the rest of Zentauri UI.

How do I choose heading levels for accessibility?

Match Heading level to document outline: one h1 per page where appropriate, then descend without skipping ranks inside each region.