Headings

Explore the different heading and subheading levels and tones available in the design system.

Sizes

Variants of Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Colors

Headings by Color

Primary

Secondary

Accent

Muted

Default

Subheading Levels

Subheading 1, 2, 3

Subheading 1

Subheading 2

Subheading 3

Subheading Tones & Weights

Color and font weight variants

Primary

Secondary

Accent

Muted

Semibold

Bold

Alignment & Weight

Text alignment and font weight

Centered Heading

Centered and muted subheading

Right Aligned Heading

Right aligned subheading

Real Section Example

How to use Headings and Subheadings in context

Example of a Real Section

This subheading briefly explains the content of the section.

You can use <Heading> for main titles and <Subheading> for subtitles, maintaining typographic consistency across the application. Both components support the theme colors (default, muted, primary, secondary, accent) and weights (regular, medium, semibold, bold).