Heading

Levels 1–6 — semibold, tight tracking, scaling size

Heading level 1 — Page title

Heading level 2 — Section heading

Heading level 3 — Subsection heading

Heading level 4 — Card heading

Heading level 5 — List heading

Heading level 6 — Micro label

Heading — Color variants

default · muted · accent

Default — primary text color

Muted — secondary text color

Accent — primary brand color

Heading — Italic

italic prop — use for emphasis, pull quotes, or editorial contexts

Standard heading — Mission critical infrastructure

Italic heading — Mission critical infrastructure

Muted italic — supporting context or byline text

Subheading

Uppercase tracking-wider label style — two sizes (levels 1–3 and 4–6)

Subheading level 1

Subheading level 2

Subheading level 3

Subheading level 4

Subheading level 5

Subheading level 6

Subheading — Color variants

default · muted · accent

Default — primary text

Muted — secondary label

Accent — primary section marker

Eyebrow

Category label rendered above a heading — always primary-colored, tracking-widest

Platform Overview

Operational intelligence at scale

System Status

All services nominal

Last updated 4 minutes ago across 12 regions.

Section

Configuration

Text

Body text and inline variants

Regular body text. The quick brown fox jumps over the lazy dog. Catalyst UI provides consistent, accessible typographic primitives that compose naturally into any layout.

Text with a TextLink inside it, along with Strong (bold) and inline code variants.

Strong can be used for emphasis within a paragraph. It renders as a bold <strong> element with appropriate styling.

Code is useful for inline technical references like function names, variable names, or short snippets: const x = useScroll().