ReshapeXDigital Asset Management
Search
Sign in with Google

Typography

The four-family editorial system. Each family has one job; mixing roles is the biggest tell of off-brand work. The canonical role map lives in docs/brand/typography-rules.md and the chamber-discipline rules render under Components → Chamber discipline.

Four-family system

Plus Jakarta Sans

--typography-font-family-heading

Heading + product body. Display headings, UI text, body in product / proof chambers. All weights from regular to extra-bold.

Confident, engineered, unhurried.

Switzer

--typography-font-family-body

Editorial product-chamber body. Body voice in product chambers. Loaded as a local variable font on the web canvas; falls back to Plus Jakarta Sans server-side or when unavailable.

Body voice carries the paragraph rhythm.

Newsreader

--typography-font-family-serif

Italic voice gesture + essay body. Editorial display + body in essay chambers. Italic Newsreader is the brand's voice gesture — one moment per chamber.

the brand is speaking.

JetBrains Mono

--typography-font-family-mono

Wayfinding + footnotes. Eyebrows, chamber counters, pill labels, dotted-underline links, architectural footnotes. Never body.

05 — THE WEDGE

Voice registers (composites)

Each composite encodes a complete editorial role — family + style + weight + size + rhythm. Copy the CSS to paste into any stylesheet; the CSS vars resolve against tokens.css when present and fall back to the literal family.

voice-moment

Italic Newsreader lede beneath an H2. Once per chamber. Closing chamber may carry up to three; Stat-moment chamber may pair caption + body around the hero number as a single envelope.

Italic Newsreader, one moment per chamber. Twice collapses the voice into wallpaper; once keeps it precious.
font-family: var(--typography-font-family-serif, 'Newsreader', Georgia, serif);
font-style: italic;
font-weight: 400;
font-size: 1.4375rem; /* 23px */
line-height: 1.4;
letter-spacing: 0;

wayfinding

Eyebrows, dotted-underline links. Mono, uppercase, tracked. Never body.

MORE FROM THE KNOWLEDGE LAYER
font-family: var(--typography-font-family-mono, 'JetBrains Mono', ui-monospace, monospace);
font-style: normal;
font-weight: 700;
font-size: 0.8125rem; /* 13px */
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;

chamber-counter

Two-character zero-padded chamber prefix (e.g. “05 — THE WEDGE”). aria-hidden in code so screen readers announce only the eyebrow.

05 — THE WEDGE
font-family: var(--typography-font-family-mono, 'JetBrains Mono', ui-monospace, monospace);
font-style: normal;
font-weight: 700;
font-size: 0.75rem; /* 12px */
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;

Deprecated families

  • Plus Jakarta Sans Variable — use the static Plus Jakarta Sans cuts. The variable axis drifts across Figma / web / Pencil and isn't worth the consistency cost.
  • Inter and Inter Black — not in the four-family system. Display weight is Plus Jakarta Sans 800.