/** * @file * The type contract: sizes, line heights and the two faces. FND-3 / DONI-704. * * ───────────────────────────────────────────────────────────────────────── * 🔴 NEVER WRITE `line-height: normal` ON A tilt-neon RULE. * * Chrome's `normal` on the kit's `tilt-neon` face is 1.57. Every heading * comes out ~25% taller than the design, with no error, no console warning * and nothing in CI that catches it. * * Use `.t-h1` … `.t-footnote` below, or `--line-height-display`. Both pair * the face and its line height so the two cannot be separated. * ───────────────────────────────────────────────────────────────────────── * * ## The two faces, measured in Chrome at 1440 on 2026-08-05 * * | Family stack | Glyph width @100px | `line-height: normal` | * |---------------------|--------------------|-----------------------| * | `tilt-neon` (kit) | 680.41px | **1.57** | * | `"Tilt Neon"` (Google) | 680.41px | 1.26 | * | `agenda` (kit) | 601.81px | 1.16 | * * Same glyphs, different default metrics. The theme loads BOTH — the kit via * `dtc_nxt.libraries.yml`, and Google Fonts via `css/theme/main.css`. Kit * first everywhere; Google is a safety net only. `agenda` may use `normal`, * because 1.16 against Figma's implied 1.19 is inside a pixel. * * ## Sizes, read from the Figma VARIABLES, not from the labels * * Canonical file `PMOumVEsuQEHJFYkbGBD84`, page `1:5` 🛠️ Design System, * frame `96:260` `Typography`. * * | Style | Face | Weight | Desktop | Mobile | Variable node | * |----------|---------------|--------|---------|--------|---------------| * | H1 | tilt-neon | 400 | 52px | 36px | `97:307` / `8016:875` | * | H2 | tilt-neon | 400 | 40px | 28px | `97:311` / `8016:879` | * | H3 | tilt-neon | 400 | 32px | — | `97:315` | * | H4 | **agenda** | **700**| 26px | — | `97:319` | * | Body | agenda | 400 | 20px | — | `4021:145` | * | Footnote | agenda | 400 | 16px | — | `97:335` | * * 🔴 THE PRINTED LABELS ON THAT FIGMA PAGE ARE STALE. Do not read them. * * Each sample sits under a melon pill that names its own size. On five of the * seven, the pill disagrees with the variable the sample actually renders at: * * | Style | Pill says | Variable resolves to | * |-------|-----------|----------------------| * | H2 desktop | 48px | **40px** | * | H3 desktop | 40px | **32px** | * | H4 desktop | Tilt neon 32px | **Agenda Bold 26px** | * | Body desktop | 16px | **20px** | * | Footnote desktop | 14px | **16px** | * | H1 mobile | 32px | **36px** | * * The variables win, on two independent corroborations: this theme's own * codegen fallbacks (`var(--Size-H3, 32px)`, `var(--Size-H4, 26px)`, * `var(--Size-Body, 20px)`, `var(--Size-Footnote, 16px)`) were generated from * the same variables and agree; and the frozen `_shared/tokens.css` * extraction independently measured H2 at 40 on the 1440 frames. * * Reported to Area23 as a file defect on DONI-704. It is not a blocker. * * ## What this file deliberately does NOT define * * - ⛔ Mobile sizes for H3, H4, Body and Footnote. The mobile samples do not * bind the variable — `8016:883` hard-codes `24px` rather than reading * `Size/H3` — so there is no mobile mode to read. Unmeasured, so not * shipped. Do not infer them from the pill labels. * * - ⛔ New rules on bare `h1`–`h6`. Fifteen legacy pages still style those * through `css/pages/*`. Restyling the elements here would move all of * them at once, before FND-9 (DONI-719) has classified which survive. * The classes below are opt-in; new components use them. * * - ⛔ A weight above 700. There is no Agenda Black in kit `gzb5nao` — it * serves 400, 500 and 700 only. Asking for 900 makes Chrome synthesise a * smeared faux bold. Render at 700 and note the gap. */ :root { /* Sizes. Figma variable names kept verbatim so a value is traceable. Mobile-first: the desktop values are set in the media query below. */ --size-h1: 36px; /* `8016:875` — Size/H1, mobile mode */ --size-h2: 28px; /* `8016:879` — Size/H2, mobile mode */ --size-h3: 32px; /* `97:315` — Size/H3, no mobile mode measured */ --size-h4: 26px; /* `97:319` — Size/H4, no mobile mode measured */ --size-body: 20px; /* `4021:145` — Size/Body */ --size-footnote: 16px; /* `97:335` — Size/Footnote */ /* The line height every tilt-neon node must carry. Figma reports `lineHeight: 100` on H2 and H3, which is Figma's 100% (auto), NOT 100px and NOT CSS `normal`. On this face auto means 1.25. */ --line-height-display: 1.25; } /* The mode switch. * * 768 is OURS, not the design's — Figma supplies 1440 and 375 artboards and * nothing between, so the width had to be chosen. It matches * `css/base/layout.css`, which flips the gutter at the same number. * * ⚠️ FND-3's written AC says 1024. That figure traces to the retired * `chrome.md`, which FND-4 had already rejected for exactly this reason. * Ruled 768 by Ofer Shaal, 2026-08-05: one switch width for the whole * foundation, so no viewport renders desktop gutters with mobile type. */ @media (min-width: 768px) { :root { --size-h1: 52px; /* `97:307` — Size/H1, desktop mode */ --size-h2: 40px; /* `97:311` — Size/H2, desktop mode */ } } /** * Opt-in type classes. * * Each one sets face, size and line height together. That pairing is the * whole point — a tilt-neon face without an explicit line height is the bug * this ticket exists to prevent. */ .t-h1, .t-h2, .t-h3 { font-family: var(--font-tilt-neon); line-height: 1.25; font-weight: 400; } .t-h1 { font-size: var(--size-h1); line-height: 1.25; } .t-h2 { font-size: var(--size-h2); line-height: 1.25; } .t-h3 { font-size: var(--size-h3); line-height: 1.25; } /* H4 is Agenda Bold, not tilt-neon. The Figma pill claims otherwise; the style on `97:319` is `Agenda:Bold`, weight 700. `normal` is correct on this face. */ .t-h4 { font-family: var(--font-agenda); font-size: var(--size-h4); font-weight: 700; line-height: normal; } .t-body, .t-footnote { font-family: var(--font-agenda); font-weight: 400; line-height: normal; } .t-body { font-size: var(--size-body); } .t-footnote { font-size: var(--size-footnote); }