Zetta v1.6

Components · Text & content

Heading

The Inter heading scale, display through h6. Sizes step down with tightening line-heights and letter-spacing so hierarchy reads at a glance. The h6 is the one inversion — muted, uppercase, tracked — for the smallest section eyebrows.

Preview

Display
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Heading" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `heading` spec (variants: display, 1, 2, 3, 4, 5, 6) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `heading` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

H1  ── Large display heading (Inter, 32px / 700)
H2  ── Section heading      (Inter, 24px / 600)
H3  ── Sub-section heading  (Inter, 20px / 600)
H4  ── Group heading        (Inter, 16px / 600)
H5  ── Label heading        (Inter, 14px / 600)
H6  ── Micro heading        (Inter, 13px / 600)

Parts:

  • Text node — rendered at the size and weight of the selected variant
  • Semantic element — <h1> through <h6>, matching the visual level
  • No additional visual decoration (borders, backgrounds) unless explicitly added by the page layout

Heading is non-interactive. No interactive states.

State Visual
Default Typography per variant token

When to use

  • Any title or header that establishes information hierarchy.

When not to use

  • Bold body text that is not actually a heading — use fontWeight: "600" in body text styles instead. Misusing headings breaks screen reader navigation.

Do

  • Use exactly one <h1> per page — always the Page Header title.
  • Maintain strict heading level hierarchy — never skip from <h2> to <h4>.
  • Use size prop to decouple visual size from semantic level when needed (e.g. a sidebar section label should be <h2> semantically but look like heading-5 visually).

Don't

  • Don't use headings for decoration — bold a <p> or <span> instead.
  • Don't use heading-display inside page content — reserve it for onboarding and marketing sections.
  • Use heading hierarchy correctly: one H1 per page, H2 for major sections, H3 for subsections.
  • Keep headings concise — describe what follows, not what the user should do.
  • Sentence case: "User settings" not "User Settings". Exception: proper nouns.
  • Do not use headings for decorative large text — use the Display component.

Keyboard

Heading is non-interactive and has no keyboard behavior.

Accessibility

  • Heading levels create the page's document outline — screen reader users navigate by heading.
  • Never use a heading purely for visual size without semantic intent.
  • When using size to override visual appearance, ensure the semantic level still correctly reflects the document hierarchy.

Spec

Values and token references resolved straight from the Zetta spec.

heading-display
fontFamily
Inter
fontSize
36px
fontWeight
700
lineHeight
1.20
letterSpacing
-0.02em
textColor
{colors.ink}
heading-1
fontFamily
Inter
fontSize
28px
fontWeight
700
lineHeight
1.25
letterSpacing
-0.01em
textColor
{colors.ink}
heading-2
fontFamily
Inter
fontSize
22px
fontWeight
600
lineHeight
1.30
letterSpacing
-0.01em
textColor
{colors.ink}
heading-3
fontFamily
Inter
fontSize
18px
fontWeight
600
lineHeight
1.35
letterSpacing
0
textColor
{colors.ink}
heading-4
fontFamily
Inter
fontSize
16px
fontWeight
600
lineHeight
1.40
letterSpacing
0
textColor
{colors.ink}
heading-5
fontFamily
Inter
fontSize
14px
fontWeight
600
lineHeight
1.40
letterSpacing
0
textColor
{colors.ink}
heading-6
fontFamily
Inter
fontSize
12px
fontWeight
600
lineHeight
1.50
letterSpacing
0.01em
textColor
{colors.muted}
textTransform
uppercase