---
description: Typography — three canonical typefaces (hero, body, alt) anchor the system; the derived tokens (h1–h6, body-base, body-sm, caption, button, label) reference them by family ref and define the resolved type scale.
variables:
  # Canonical typefaces — uploaded font files that anchor the system.
  # Every derived token references one of these by family ref ("hero" /
  # "body" / "alt").
  - key: typeface.hero
    type: font
    label: Hero
    value: ""
    section: visual
  - key: typeface.body
    type: font
    label: Body
    value: ""
    section: visual
  - key: typeface.alt
    type: font
    label: Alt
    value: ""
    section: visual

  - key: token.h1.family
    type: select
    label: H1 Family
    value: hero
    options: [hero, body, alt]
    section: visual
  - key: token.h1.weight
    type: text
    label: H1 Weight
    value: 700
    section: visual
  - key: token.h1.size
    type: text
    label: H1 Size
    value: 48
    section: visual
  - key: token.h1.lineHeight
    type: text
    label: H1 Line Height
    value: 56
    section: visual
  - key: token.h1.letterSpacing
    type: text
    label: H1 Tracking
    value: -0.5
    section: visual
  - key: token.h1.textTransform
    type: select
    label: H1 Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.h2.family
    type: select
    label: H2 Family
    value: hero
    options: [hero, body, alt]
    section: visual
  - key: token.h2.weight
    type: text
    label: H2 Weight
    value: 700
    section: visual
  - key: token.h2.size
    type: text
    label: H2 Size
    value: 36
    section: visual
  - key: token.h2.lineHeight
    type: text
    label: H2 Line Height
    value: 44
    section: visual
  - key: token.h2.letterSpacing
    type: text
    label: H2 Tracking
    value: -0.3
    section: visual
  - key: token.h2.textTransform
    type: select
    label: H2 Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.h3.family
    type: select
    label: H3 Family
    value: hero
    options: [hero, body, alt]
    section: visual
  - key: token.h3.weight
    type: text
    label: H3 Weight
    value: 600
    section: visual
  - key: token.h3.size
    type: text
    label: H3 Size
    value: 28
    section: visual
  - key: token.h3.lineHeight
    type: text
    label: H3 Line Height
    value: 36
    section: visual
  - key: token.h3.letterSpacing
    type: text
    label: H3 Tracking
    value: -0.2
    section: visual
  - key: token.h3.textTransform
    type: select
    label: H3 Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.h4.family
    type: select
    label: H4 Family
    value: hero
    options: [hero, body, alt]
    section: visual
  - key: token.h4.weight
    type: text
    label: H4 Weight
    value: 600
    section: visual
  - key: token.h4.size
    type: text
    label: H4 Size
    value: 24
    section: visual
  - key: token.h4.lineHeight
    type: text
    label: H4 Line Height
    value: 32
    section: visual
  - key: token.h4.letterSpacing
    type: text
    label: H4 Tracking
    value: -0.1
    section: visual
  - key: token.h4.textTransform
    type: select
    label: H4 Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.h5.family
    type: select
    label: H5 Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.h5.weight
    type: text
    label: H5 Weight
    value: 600
    section: visual
  - key: token.h5.size
    type: text
    label: H5 Size
    value: 20
    section: visual
  - key: token.h5.lineHeight
    type: text
    label: H5 Line Height
    value: 28
    section: visual
  - key: token.h5.letterSpacing
    type: text
    label: H5 Tracking
    value: 0
    section: visual
  - key: token.h5.textTransform
    type: select
    label: H5 Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.h6.family
    type: select
    label: H6 Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.h6.weight
    type: text
    label: H6 Weight
    value: 600
    section: visual
  - key: token.h6.size
    type: text
    label: H6 Size
    value: 18
    section: visual
  - key: token.h6.lineHeight
    type: text
    label: H6 Line Height
    value: 26
    section: visual
  - key: token.h6.letterSpacing
    type: text
    label: H6 Tracking
    value: 0
    section: visual
  - key: token.h6.textTransform
    type: select
    label: H6 Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.body-base.family
    type: select
    label: Body Base Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.body-base.weight
    type: text
    label: Body Base Weight
    value: 400
    section: visual
  - key: token.body-base.size
    type: text
    label: Body Base Size
    value: 16
    section: visual
  - key: token.body-base.lineHeight
    type: text
    label: Body Base Line Height
    value: 24
    section: visual
  - key: token.body-base.letterSpacing
    type: text
    label: Body Base Tracking
    value: 0
    section: visual
  - key: token.body-base.textTransform
    type: select
    label: Body Base Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.body-sm.family
    type: select
    label: Body Small Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.body-sm.weight
    type: text
    label: Body Small Weight
    value: 400
    section: visual
  - key: token.body-sm.size
    type: text
    label: Body Small Size
    value: 14
    section: visual
  - key: token.body-sm.lineHeight
    type: text
    label: Body Small Line Height
    value: 20
    section: visual
  - key: token.body-sm.letterSpacing
    type: text
    label: Body Small Tracking
    value: 0
    section: visual
  - key: token.body-sm.textTransform
    type: select
    label: Body Small Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.caption.family
    type: select
    label: Caption Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.caption.weight
    type: text
    label: Caption Weight
    value: 400
    section: visual
  - key: token.caption.size
    type: text
    label: Caption Size
    value: 12
    section: visual
  - key: token.caption.lineHeight
    type: text
    label: Caption Line Height
    value: 16
    section: visual
  - key: token.caption.letterSpacing
    type: text
    label: Caption Tracking
    value: 0.2
    section: visual
  - key: token.caption.textTransform
    type: select
    label: Caption Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.button.family
    type: select
    label: Button Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.button.weight
    type: text
    label: Button Weight
    value: 500
    section: visual
  - key: token.button.size
    type: text
    label: Button Size
    value: 14
    section: visual
  - key: token.button.lineHeight
    type: text
    label: Button Line Height
    value: 20
    section: visual
  - key: token.button.letterSpacing
    type: text
    label: Button Tracking
    value: 0.3
    section: visual
  - key: token.button.textTransform
    type: select
    label: Button Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
  - key: token.label.family
    type: select
    label: Label Family
    value: body
    options: [hero, body, alt]
    section: visual
  - key: token.label.weight
    type: text
    label: Label Weight
    value: 500
    section: visual
  - key: token.label.size
    type: text
    label: Label Size
    value: 12
    section: visual
  - key: token.label.lineHeight
    type: text
    label: Label Line Height
    value: 16
    section: visual
  - key: token.label.letterSpacing
    type: text
    label: Label Tracking
    value: 0.4
    section: visual
  - key: token.label.textTransform
    type: select
    label: Label Transform
    value: none
    options: [none, uppercase, lowercase, capitalize]
    section: visual
---

# Typography

The brand's voice in letterforms. Three canonical typefaces (hero, body, alt) anchor the system; every derived token resolves through one of them. AI generation derives the type scale from the canonical three; locked tokens stay sacred.
