Loading navigation…
User
CoreText types, optical sizes, and font variables that control hierarchy across the product.
Typography is delivered through CoreText and CSS variables under --text-* and --font-size-*. Each TextType preset combines font size, line height, letter spacing, and weight so components never need to assemble these individually.
Our type styles can be consumed as CoreText types. The types below preset a combination of font-size, line-height, letter-spacing, and font-weight for you. To apply bold emphasis, pass the strong prop; for medium weight, pass the medium prop.
Used to introduce pages or sections. Each title maps to a semantic heading element (h1–h4).
TextType.Display · --text-title-page · 3.2rem · Medium · h1
Page hero titles and primary headings.
TextType.Heading · --text-title-section · 2.4rem · Medium · h2
Section headings within a page.
TextType.Subheading · --text-title-subsection · 1.8rem · Medium · h3
Subsection headings nested under a section.
TextType.Title · --text-title-subtitle · 1.6rem · Medium · h4
Subheadings supporting a title or card header.
Designed for multiple lines of text with comfortable line height for readability.
Body Large
TextType.BodyLarge · --text-body-large · 1.4rem · Regular
Intro copy and lead paragraphs.
Body Base
TextType.BodyBase · --text-body-base · 1.3rem · Regular
Default paragraph text. The most commonly used text style.
Body Small
TextType.BodySmall · --text-body-small · 1.2rem · Regular
Secondary copy and helper text.
Designed for single-line interactive contexts—labels, buttons, and metadata.
Label
TextType.Label · --text-label · 1.3rem · Medium
Form labels aligned to input controls.
Button
TextType.Button · --text-button · 1.3rem · Bold
Button label sizing. Only used within button components.
OVERLINE
TextType.Overline · --text-overline · 1.3rem · Bold · Uppercase
Section overlines and category labels. Automatically uppercased.
Caption
TextType.Caption · --text-caption · 1.2rem · Regular
Timestamps, hints, and tertiary metadata.
For code snippets, terminal output, and technical content. Uses --font-geist-mono.
const specimen = 'Mono Medium'
TextType.MonoMedium · --text-mono-medium · 1.3rem · Regular · Geist Mono
Code blocks and inline code mentions.
const specimen = 'Mono Small'
TextType.MonoSmall · --text-mono-small · 1.2rem · Regular · Geist Mono
Compact code in tables, tooltips, and dense UI.
Radix scaling defines --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 |
Pass strong for bold or medium for medium weight on any CoreText instance. Titles default to medium; body types default to regular.
CoreText accepts a color prop via TextColor to express semantic meaning.
| Variant | Token | When to use |
|---|---|---|
TextColor.Base | --color-text-base | Primary content (default) |
TextColor.Alt | --color-text-alt | Secondary and supporting text |
TextColor.Alt2 | --color-text-alt-2 | Tertiary metadata |
TextColor.Disabled | --color-text-disabled | Disabled controls and inactive states |
TextColor.Accent | intent accent | Links and interactive highlights |
TextColor.Info | intent info | Informational callouts |
TextColor.Success | intent success | Positive confirmations |
TextColor.Warning | intent warning | Cautionary messages |
TextColor.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.TextColor.Alt for secondary content to establish clear hierarchy.Display → Heading → Subheading → Title.