Typography
| Field | Value |
|---|---|
| Type | Skill Resource |
| Source | ~/.copilot/skills/design/references/typography.md |
| Description | Not specified |
Source Content
Typography
Source of truth: src/index.css :root block and @layer components. Canonical decision: ADR-003.
Root font size
html { font-size: 87.5%; } /* = 14px base — all rem tokens scale from here */All rem values below are calculated against this 14px base.
Type scale
| Token | CSS var (size) | rem | px | Line-height | Use |
|---|---|---|---|---|---|
label | --ui-type-label-size | 0.6875rem | 11px | 1rem (16px) | Uppercase column headers, table labels |
body-xs | --ui-type-body-xs-size | 0.75rem | 12px | 1rem (16px) | Captions, metadata, fine print |
body-sm | --ui-type-body-sm-size | 0.875rem | 14px | 1.25rem (20px) | Supporting text, form help |
body | --ui-type-body-size | 0.9375rem | 15px | 1.5rem (24px) | Base body — default for <body> |
title-sm | --ui-type-title-sm-size | 1rem | 16px | 1.375rem (22px) | Section labels, card titles |
title-md | --ui-type-title-md-size | clamp(17–18px) | 17–18px | 1.4 | Page sub-headings |
title-lg | --ui-type-title-lg-size | clamp(19–21px) | 19–21px | 1.35 | Section headings |
title-xl | --ui-type-title-xl-size | clamp(21–26px) | 21–26px | 1.2 | Page-level headings |
display | --ui-type-display-size | clamp(28–36px) | 28–36px | 1.05 | Hero / display text |
value-md | --ui-type-value-md-size | clamp(18–22px) | 18–22px | 1.1 | Numeric data values |
value-lg | --ui-type-value-lg-size | clamp(22–30px) | 22–30px | - | Large metric values |
Component utility classes (.ui-type-*)
Apply via className="ui-type-body-sm" etc. These are defined in @layer components and include font-family, size, line-height, weight, and letter-spacing — prefer them over raw Tailwind text sizes because they carry the correct line-height and letter-spacing together.
| Class | Family | Weight | Letter-spacing |
|---|---|---|---|
.ui-type-label | body | 600 | 0.08em (uppercase — column headers, not eyebrows) |
.ui-type-body-xs / .ui-type-body-sm / .ui-type-body | body | 400 | - |
.ui-type-title-sm | system | 600 | -0.02em |
.ui-type-title-md | system | 600 | -0.02em |
.ui-type-title-lg | system | 600 | -0.025em |
.ui-type-title-xl | system | 600 | -0.03em |
.ui-type-display | system | 600 | -0.04em |
.ui-type-value-md | system | 600 | -0.03em |
Tailwind shortcuts
text-xs → 12px (body-xs approximate)text-sm → 14px (body-sm approximate)text-base → 16px (title-sm approximate)For exact values, use the .ui-type-* classes or inline CSS vars directly.
Font families — system stack only (ADR-003)
--font-family: -apple-system, "Segoe UI", system-ui, sans-serif;The only font family is the system UI stack — no web fonts. Do not load or apply Fraunces, Source Sans 3, Inter, Roboto, or Arial. font-sans / font-body / font-serif all resolve to it; h1–h6 and <body> all inherit the same stack. Hierarchy comes from the type scale (size + weight): titles are font-semibold at the larger ui-type-title-* sizes; body is font-normal. No display typeface.
scripts/lint_tokens.sh flags any reference to a non-system font family (Fraunces, Source Sans, Inter, Roboto, Arial) in .tsx/.jsx/.ts/.css files.
Eyebrow label pattern
Category labels above a title — distinct from .ui-type-label (wider tracking):
<span className="font-body text-[10px] font-semibold uppercase tracking-[0.28em] text-muted-foreground"> Category name</span>Font weights in use
| Tailwind | Weight | Contexts |
|---|---|---|
font-normal | 400 | Body text, descriptions |
font-medium | 500 | Subtle emphasis, form labels |
font-semibold | 600 | All titles, badges, labels |
font-bold | 700 | Strong emphasis only — sparingly |
Print typography (ADR-018)
At print time, map px to points: 1pt = 1.333px.
| Role | Print size |
|---|---|
| Body copy | 9–11pt (~12–15px) |
| Headings | 12–14pt (~16–19px) |
| Captions | 8pt (~11px) |
See css/print-and-legal.md for the full print pipeline.