03 • Foundations · Type scale

Type scale

Display → h1-h5 → body-lg/body/body-sm → caption → eyebrow. Display sizes use clamp() for fluid scaling. Consumers reference Tailwind scale tokens (--text-xs..--text-12xl) from @theme inline; deck role → scale mapping is documented below.

Tailwind scale · base (from @theme inline)
  • text-xscaption, micro12px
  • text-smfootnote, small mono14px
  • text-basesecondary label16px
  • text-lgcard label, dense body18px
  • text-xlmeta-row, eye20px
  • text-2xlbody default24px
  • text-3xlquote body, small h330px
  • text-4xlh3 card36px
  • text-5xlh3 hero48px
  • text-6xlh2 action60px
  • text-7xl(reserved)72px
  • text-8xlkpi96px
  • text-9xlsection title128px
Display tier extension

Added to @theme inline for deck display roles used more than once. Follows the Tailwind numeric ladder; exposes text-10xl / 11xl / 12xl.

  • text-10xldisplay cover144px
  • text-11xlinsight reveal180px
  • text-12xlbignum240px
One-off display ornaments

Off-ladder sizes used exactly once in the deck. Inlined at call site (font-size: 40rem;) with a role comment. If a second consumer emerges, promote to the ladder.

  • 8.4rempull quote84px
  • 8.8remclose cta-big88px
  • 15.6remhook mega156px
  • 16remtesti qmark160px
  • 22remoutro thanks220px
  • 28remsection bignum inline280px
  • 40remquote qmark400px