TypeRoles

The seven DealDash t-* typography roles — one named Inter scale with display optical sizing and Linear-tight tracking. Never hand-roll a title.

stable display #typography#scale#dealdash#emerald#inter

.t-page-titleDeals move faster in green

.t-section-titleDeals move faster in green

.t-card-titleDeals move faster in green

.t-bodyDeals move faster in green

.t-smallDeals move faster in green

.t-captionDeals move faster in green

.t-overlineDeals move faster in green

Loading preview…

Usage

- Every title, label, and body run in the app maps to one of the seven roles — if none fits, the design is off-system. - t-page-title appears exactly once per route, inside the PageHeader. - t-overline is the eyebrow/column-label voice; pair it above a t-page-title or table columns.

Do / Don't

- **Do** let optical sizing (opsz 28/22) do the display work — no manual font stretching. - **Do** keep mono for code, logs, and IDs only. - **Don't** hand-roll a title with ad-hoc size/weight/tracking combinations. - **Don't** repeat font-feature-settings per component — it is set once on body.

Tokens

A11y

Roles are classes, not elements — heading semantics come from the markup (one h1 per page on t-page-title, ordered h2/h3 below, no skips). Muted roles (t-small, t-overline) use

Source

src/components/TypeRoles.tsx

Live playground