/* =========================================================================== Typography — hand-mirrored from Figma TEXT STYLES --------------------------------------------------------------------------- HAND-WRITTEN. This is the one layer that does not sync automatically, and the reason is worth stating: figma_export_tokens exports Figma *variables*, and the type system lives in Figma *text styles*. The Typography variable collection covers only 7 partial groups (21 vars) and is not what the screens actually use. So every rule below names the Figma text style it mirrors. If a style changes in Figma, it has to change here too, and `python3 tools/redesign/check-parity.py` is what catches the drift. Verified against figma_get_text_styles on the source file. All ten styles: Display/Hero Instrument Serif Regular 96 lh 102% Display/Title Instrument Serif Regular 80 lh 102% Display/Section Instrument Serif Regular 48 lh 102% Display/Small Instrument Serif Regular 32 lh 102% Body/Lead Inter Regular 21 lh 135% Body/Base Inter Regular 16 lh 165% Body/Small Inter Regular 14 lh 135% Body/Micro Inter Medium 12 lh 135% Label/Chrome Inter Semi Bold 11 lh 100% Stat/Number Instrument Serif Regular 50 lh 100% Two deliberate notes on fidelity: 1. Label/Chrome carries letter-spacing 0 and text-case ORIGINAL in Figma. The uppercase in the designs comes from the *content* ("SKILLS", "WORKED WITH"), not from the style. So there is no text-transform and no tracking here either. The live site's own --tracking-label of .16em would look better, and that is exactly why it is not applied unilaterally: change it in Figma first, re-run the parity check, then it lands here. Parity beats taste in a layer whose whole job is parity. 2. Figma expresses line-height as a percentage of font size, which is what a unitless CSS line-height already is. 102% -> 1.02. =========================================================================== */ :root { /* --- Families --------------------------------------------------------- Aliased onto the generated tokens where those exist, so a family swap in Figma still propagates. The fallback stacks are ours: Figma has no concept of one. */ --font-serif: var(--family-serif, 'Instrument Serif'), 'Times New Roman', Georgia, serif; --font-sans: var(--family-sans, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* --- Line heights, from the styles above ----------------------------- */ --lh-display: 1.02; --lh-snug: 1.35; --lh-body: 1.65; --lh-flat: 1; /* --- The one fluid role ---------------------------------------------- Figma swaps the page

between two discrete styles by breakpoint: Display/Section (48) at 1440 and 768, Display/Small (32) at 390. A clamp is better than a hard swap, but only if it agrees with Figma at the breakpoints Figma actually specifies — otherwise the parity check becomes a matter of opinion. Solved for f(390px) = 32 and f(1440px) = 48: slope = (48 - 32) / (1440 - 390) = 16/1050 = 1.5238vw base = 32 - 0.015238 x 390 = 26.06px = 1.629rem The clamp floor equals f(390) and the ceiling equals f(1440), so at both sampled widths this resolves to Figma's own number, and between them it scales instead of stepping. Every other role holds one size across all three Figma breakpoints, so every other role is a fixed size here too. No invented scaling. */ --t-page-title: clamp(2rem, 1.629rem + 1.5238vw, 3rem); } /* --------------------------------------------------------------------------- The ten styles. Class names map 1:1 onto the Figma style names so a reviewer can hold the two side by side. --------------------------------------------------------------------------- */ /* Display/Hero — 96 / 102% */ .t-display-hero { font-family: var(--font-serif); font-size: var(--font-size-display); font-weight: 400; line-height: var(--lh-display); } /* Display/Title — 80 / 102% */ .t-display-title { font-family: var(--font-serif); font-size: var(--font-size-hero); font-weight: 400; line-height: var(--lh-display); } /* Display/Section — 48 / 102% */ .t-display-section { font-family: var(--font-serif); font-size: var(--font-size-title); font-weight: 400; line-height: var(--lh-display); } /* Display/Small — 32 / 102%. The workhorse: card titles, section headings. */ .t-display-small { font-family: var(--font-serif); font-size: var(--font-size-section); font-weight: 400; line-height: var(--lh-display); } /* Body/Lead — 21 / 135% */ .t-body-lead { font-family: var(--font-sans); font-size: var(--font-size-lead); font-weight: 400; line-height: var(--lh-snug); } /* Body/Base — 16 / 165% */ .t-body-base { font-family: var(--font-sans); font-size: var(--font-size-body); font-weight: 400; line-height: var(--lh-body); } /* Body/Small — 14 / 135%. Most body copy in the designs. */ .t-body-small { font-family: var(--font-sans); font-size: var(--font-size-small); font-weight: 400; line-height: var(--lh-snug); } /* Body/Micro — 12 / 135%, Medium. Taglines, tag pills, metric labels. */ .t-body-micro { font-family: var(--font-sans); font-size: var(--font-size-micro); font-weight: 500; line-height: var(--lh-snug); } /* Label/Chrome — 11 / 100%, Semi Bold. See fidelity note 1 above. */ .t-label-chrome { font-family: var(--font-sans); font-size: var(--font-size-label); font-weight: 600; line-height: var(--lh-flat); } /* Stat/Number — 50 / 100% */ .t-stat-number { font-family: var(--font-serif); font-size: var(--font-size-stat); font-weight: 400; line-height: var(--lh-flat); } /* The page

: Display/Section, but fluid between the two Figma sizes. */ .t-page-title { font-family: var(--font-serif); font-size: var(--t-page-title); font-weight: 400; line-height: var(--lh-display); }