Playground

Heading

typography

Semantic heading with tokenized type scale

Enforces consistent heading hierarchy and visual sizing

import { Heading } from "@everydayos/ui";

Usage

Default scale — clamp-based, grows with viewport. Use for marketing headlines.

Display Heading

XXL Heading

XL Heading

Large Heading

Medium Heading

Small Heading

API

as

Default: h2

h1h2h3h4h5h6div

defaultpreferredrare

size

displayxxlxllmseditorial-2xleditorial-xleditorial-leditorial-meditorial-s

defaultpreferredrare

Prop	Type	Default
`className`	`string`	—
`children`*	`React.ReactNode`	—

Examples

Editorial Hierarchy (Figma text/heading scale)

Editorial scale: each size is fluid, stepping down one editorial step on narrow viewports (44→32 through 14→12 px at extremes). Line-height 1.16.

Better Air. Everyday.

A reimagined home climate system that delivers heating, cooling, and air purification in one cohesive solution.

Hero Heading

Display heading with subheading in a hero context

<Stack spacing="lg" align="center" className="w-full py-12 text-center">
  <Heading as="h1" size="display">Better Air. Everyday.</Heading>
  <Text size="xl" variant="muted" className="max-w-xl">
    A reimagined home climate system that delivers heating, cooling,
    and air purification in one cohesive solution.
  </Text>
</Stack>

Composition

Pairs well with

Text

Stack

Section

When to avoid

Need body text — use Text instead
Need emphasized text — use Text variant="lead" or weight="medium"
Reaching for font-bold/font-semibold — with Everyday Sans, font-medium is almost always enough