← Components

Typography

The full type scale — 13 styles from Large Title (64px) down to Caption 2 (11px), each in four weights, set in Inter and mapped 1:1 to the Figma text styles.

How the system works

Every style is a composite token: one class such as text-body-medium sets font size, line height, letter spacing, and weight together, defined in styles/typography.css. You never combine text-sm with font-medium and leading-5 by hand — a single token guarantees the exact metrics the Figma text style specifies.

The naming is text-{family}-{weight} — 13 families × 4 weights (Regular 400, Medium 500, Semibold 600, Bold 700). Color is applied separately with the semantic text tokens, so a typical label reads text-body-medium text-text-secondary: one class for the metrics, one for the color.

Because these classes live in the text-* namespace, they are registered with cx() (our tailwind-merge wrapper) as font-size utilities — otherwise a merge with a color class would silently drop them. If you add or rename a style, mirror it in utils/cx.ts.

Large Title

64px / 80px

Hero numerals and marketing-scale headings.

The five boxing wizards jump quickly.

text-large-title-regularRegular · 400

The five boxing wizards jump quickly.

text-large-title-mediumMedium · 500

The five boxing wizards jump quickly.

text-large-title-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-large-title-boldBold · 700

Display 1

56px / 72px

Full-page hero headings.

The five boxing wizards jump quickly.

text-display-1-regularRegular · 400

The five boxing wizards jump quickly.

text-display-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-1-boldBold · 700

Display 2

48px / 64px

Large section heroes.

The five boxing wizards jump quickly.

text-display-2-regularRegular · 400

The five boxing wizards jump quickly.

text-display-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-2-boldBold · 700

Display 3

40px / 54px

Prominent stats and page heroes.

The five boxing wizards jump quickly.

text-display-3-regularRegular · 400

The five boxing wizards jump quickly.

text-display-3-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-3-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-3-boldBold · 700

Display 4

32px / 44px

Page titles; the largest style used inside the app shell.

The five boxing wizards jump quickly.

text-display-4-regularRegular · 400

The five boxing wizards jump quickly.

text-display-4-mediumMedium · 500

The five boxing wizards jump quickly.

text-display-4-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-display-4-boldBold · 700

Title 1

24px / 34px

Card headline figures (step totals, earnings).

The five boxing wizards jump quickly.

text-title-1-regularRegular · 400

The five boxing wizards jump quickly.

text-title-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-1-boldBold · 700

Title 2

20px / 26px

Section headings inside pages and panels.

The five boxing wizards jump quickly.

text-title-2-regularRegular · 400

The five boxing wizards jump quickly.

text-title-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-2-boldBold · 700

Title 3

18px / 24–26px

Sub-section headings, calendar month titles.

The five boxing wizards jump quickly.

text-title-3-regularRegular · 400

The five boxing wizards jump quickly.

text-title-3-mediumMedium · 500

The five boxing wizards jump quickly.

text-title-3-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-title-3-boldBold · 700

Headline

16px / 22px

Emphasized body copy and lead paragraphs.

The five boxing wizards jump quickly.

text-headline-regularRegular · 400

The five boxing wizards jump quickly.

text-headline-mediumMedium · 500

The five boxing wizards jump quickly.

text-headline-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-headline-boldBold · 700

Body

14px / 20px

The default UI text: labels, table cells, nav items.

The five boxing wizards jump quickly.

text-body-regularRegular · 400

The five boxing wizards jump quickly.

text-body-mediumMedium · 500

The five boxing wizards jump quickly.

text-body-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-body-boldBold · 700

Body 2

13px / 18px

Dense contexts: compact tables, secondary descriptions.

The five boxing wizards jump quickly.

text-body-2-regularRegular · 400

The five boxing wizards jump quickly.

text-body-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-body-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-body-2-boldBold · 700

Caption 1

12px / 16px · tracking 0.15px

Axis labels, unit suffixes, timestamps.

The five boxing wizards jump quickly.

text-caption-1-regularRegular · 400

The five boxing wizards jump quickly.

text-caption-1-mediumMedium · 500

The five boxing wizards jump quickly.

text-caption-1-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-caption-1-boldBold · 700

Caption 2

11px / 15px · tracking 0.2px

The smallest legible annotations (badges, fine print).

The five boxing wizards jump quickly.

text-caption-2-regularRegular · 400

The five boxing wizards jump quickly.

text-caption-2-mediumMedium · 500

The five boxing wizards jump quickly.

text-caption-2-semiboldSemibold · 600

The five boxing wizards jump quickly.

text-caption-2-boldBold · 700