Text types, optical sizes, and font variables that control hierarchy across the product.
Text from @prepared911/ui/text plus the --text-<role>-* custom properties in @prepared911/ui/tokens.css. Each TextType applies the whole bundle: font, letter-spacing, and text wrap. Emphasis is a separate role, such as TextType.BodyLargeEmphasis, not a strong or medium prop. The heading element is as. The visual role does not pick h1–h6.
as to the heading level the outline needs.
--font-geist-mono.
--font-size-1 through --font-size-9. Product typography maps to semantic aliases so you reach for a role, not a step number.
| Token | Alias | Computed size |
|---|---|---|
--font-size-1 | --text-body-small, --text-caption, --text-mono-small | 1.2rem |
--font-size-2 | --text-body-base, --text-label, --text-button, --text-overline, --text-mono-medium | 1.3rem |
--font-size-3 | --text-body-large | 1.4rem |
--font-size-4 | --text-title-subtitle | 1.6rem |
--font-size-5 | --text-title-subsection | 1.8rem |
--font-size-6 | — | 2.0rem |
--font-size-7 | --text-title-section | 2.4rem |
--font-size-8 | --text-title-page | 3.2rem |
--font-size-9 | — | 6.0rem |
--font-geist powers UI copy; --font-geist-mono powers monospace. Three weight tokens let you add emphasis without relying on colour alone.
| Token | Value | When to use |
|---|---|---|
--font-weight-normal | 400 | Default body text and captions |
--font-weight-medium | 500 | Labels, titles, and interactive affordances |
--font-weight-bold | 600 | Buttons, overlines, and strong emphasis |
strong for bold or medium for medium weight on any Text instance. Titles default to medium; body types default to regular.
Text accepts a color prop via Foreground to express semantic meaning.
| Variant | Token | When to use |
|---|---|---|
Foreground.Base | --color-text-base | Primary content (default) |
Foreground.Alt | --color-text-alt | Secondary and supporting text |
Foreground.Alt2 | --color-text-alt-2 | Tertiary metadata |
Foreground.Disabled | --color-text-disabled | Disabled controls and inactive states |
Foreground.Accent | intent accent | Links and interactive highlights |
Foreground.Info | intent info | Informational callouts |
Foreground.Success | intent success | Positive confirmations |
Foreground.Warning | intent warning | Cautionary messages |
Foreground.Error | intent error | Destructive or error states |
TextType presets before composing font-size and weight manually.Display–Title) only for actual headings: they render semantic h1–h4 elements.Foreground.Alt for secondary content to establish clear hierarchy.Display → Heading → Subheading → Title.