/* AWMY — design tokens (Broadsheet / light mode). Extracted verbatim from the AWMY Design System (Claude Design) on 2026-06-26. Strictly monochrome: ink + paper, no chromatic accent. Local source of truth for the landing build — keep in sync with the design system. */ :root { /* ---- Mono extremes ---- */ --white: #FFFFFF; --black: #000000; /* ---- Ink ramp (near-black, faintly warm — text + dark surfaces) ---- */ --ink-0: #0B0A08; --ink-1: #16140F; --ink-2: #2A2620; --ink-3: #4C463B; /* ---- Cold neutral gray ramp ---- */ --gray-1: #111111; --gray-2: #333333; --gray-3: #5C5C5C; --gray-4: #8A8A8A; --gray-5: #B4B4B4; --gray-6: #D8D8D8; --gray-7: #ECECEC; /* ---- Semantic aliases: LIGHT / Broadsheet (default) ---- */ --bg: var(--white); --bg-inset: var(--gray-7); --bg-invert: var(--ink-0); --text: var(--ink-0); --text-muted: var(--gray-3); --text-faint: #6E6E6E; /* 4.9:1 — was var(--gray-4) #8A8A8A at 3.44:1 (audit A8) */ --text-invert:var(--white); --rule: var(--ink-0); --rule-muted: var(--gray-6); /* the line drawn around a screenshot — see --edge-rule below for why it is this grey and not ink (TASK-74) */ --rule-frame: #C9C7C1; --field: var(--white); --field-border: var(--ink-0); /* One hatched ground for anything that is not there yet or not built — authored on the McKinsey case for its "not built / removed" marks (TASK-71) and raised into the tokens by TASK-101, when the held work card needed the same ground. Declared once here; the case file no longer repeats it. */ --hatch: repeating-linear-gradient(45deg, #F5F4F1 0 8px, var(--white) 8px 16px); /* ---- Spacing scale (4px base) ---- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 192px; --sp-12: 256px; /* ---- Layout ---- */ --maxw: 1440px; --maxw-text: 1080px; --gutter: clamp(16px, 4.5vw, 72px); --section-y: clamp(48px, 8vw, 128px); --measure: 64ch; --measure-narrow: 42ch; --measure-wide: 80ch; /* ---- Rules / edges (hard) ---- */ --rule-hair: 1px; --rule-bold: 2px; --rule-heavy: 4px; --radius: 0px; /* ---- Type families ---- */ --font-condensed: 'Archivo Narrow', 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --font-display: var(--font-condensed); /* broadsheet display, UPPERCASE */ --font-body: var(--font-grotesk); /* running text + UI */ --font-label: var(--font-mono); /* kickers, captions, data, chrome */ /* ---- Type sizes (fluid clamp) ---- */ --fs-micro: clamp(0.625rem, 0.60rem + 0.10vw, 0.6875rem); --fs-caption: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem); /* 12–13px, was 11–12px (A7) */ --fs-small: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem); --fs-body: clamp(1.0625rem, 1.02rem + 0.24vw, 1.1875rem); --fs-lead: clamp(1.25rem, 1.10rem + 0.70vw, 1.6rem); --fs-h4: clamp(1.2rem, 1.02rem + 0.80vw, 1.75rem); /* ceiling was 1.6 = --fs-lead (B13) */ --fs-h3: clamp(1.5rem, 1.18rem + 1.5vw, 2.4rem); --fs-h2: clamp(2.1rem, 1.45rem + 3.0vw, 3.6rem); --fs-h1: clamp(2.9rem, 1.55rem + 6.0vw, 5.75rem); --fs-display: clamp(3.6rem, 0.6rem + 12vw, 9.5rem); --fs-figure: clamp(3.4rem, 1.35rem + 6.6vw, 7.5rem); /* standalone numerals (A10 / DSP-B) */ /* ---- Line heights ---- */ --lh-tight: 0.98; --lh-snug: 1.08; --lh-head: 1.14; --lh-text: 1.5; /* ---- Tracking (letter-spacing) ------------------------------------------ SCOPE, read this first. TASK-118 rebuilt the whole uppercase scale and then Pavlo narrowed what ships: "применим только к заголовкам самым большим, больше ни к чему, только к хедерам кейсов" (30.07). So --tr-caps and --ws-caps below are live on ONE selector — `.head--page`, the title at the top of each of the five pages — and everything else on the site keeps the tracking it had before the task, in the three tokens further down. That is deliberate, not an unfinished sweep: the smaller headings are still being rewritten, and a tracking pass on text that is about to change is work done twice. The measured scale for the rest of the site is written up in TASK-118-kerning-optical-letterfit-RESULT.md and demonstrated on lab-typography.html; applying it is one commit whenever the texts settle. What it fixes when it lands: the same ~34px step gets -0.02, -0.015 and -0.01 in three different files, and the fourth heading level has no tracking at all. --tr-caps is one expression rather than a step per level: the correction is continuous in the type size, so a ladder can only approximate it. -0.0147em the ramp, as an asymptote... +0.25px ...plus a constant pixel term. The pair is solved from two ends: 0 at 17px and -0.012em at 92px. The shape is the one the ramp-down editorial sites converge on (style-research/ live-editorial-web.md); the level is Pavlo's, set on the live pages — see below. It reads -0.012em at the 92px end of --fs-h1, -0.009em at the 46.4px end, -0.008em at 38.4px, -0.004em at 24px, -0.002em at 19.2px. No breakpoints: one declaration follows every clamp in both directions, which is what the old flat -0.02em could not do — and the small end, where four heading levels used to sit at display tightness or at nothing at all, is where it actually changes something. WHY IT IS NOT LOOSER, which is the interesting part. Measured on our own fonts: in Archivo Narrow 700 the gap between two H's is 0.553 of H's own counter, while between two n's it is 0.717 of n's. Caps are fitted for adjacency to lowercase and do run tight when set caps-to-caps, and neither Archivo nor Archivo Narrow carries the `cpsp` feature that would compensate — so the deficit is real, and the first cut of this token paid for it by opening every gap by +0.017em. Pavlo read that on the live page at 38px and rejected it: "оно как рассыпается на отдельные буквы". He is right, and the measurement does not contradict him — it says the caps are tight, not that every gap is the place to pay. The one place the deficit actually did damage was the word space: `letter-spacing` is added to the space character too, so at -0.02em the space shrank along with the letters and "PICK A PORT" read as one word. That is now paid where it happens, by --ws-caps below, and the letters keep the density a condensed broadsheet face is drawn for. The correction after that overshot the other way — back to -0.018em, where he read "BETTER" on the live page and saw the letters touching. The level here is the third reading and his: loose enough that no pair collides at 92px, tight enough that a heading still reads as a word rather than as a row of letters. Both ends were judged on crops of real headlines, not on the curve. Per-pair corrections are NOT here. Tracking moves every gap equally and cannot even out a bad pair; that is kerning, and it lives on `.kern-*` in styles.css. */ --tr-caps: calc(-0.0147em + 0.25px); /* the exact inverse of --tr-caps. `letter-spacing` applies to the space character like any other, so negative tracking silently eats the word space the type designer drew; this gives it back and nothing more. Goes wherever --tr-caps goes — the two are one decision. */ --ws-caps: calc(0.0147em - 0.25px); --tr-label: 0.10em; /* mono label, uppercase, 10-15px. IBM Plex Mono has no kerning table at all and every advance is equal, so this is pure tracking: Carbon's own 0.32px at 12-14px (+0.024em) plus the ~+0.05em a caps setting asks for. Live editorial caps captions under 14px: median +0.069em, upper range +0.127em. */ /* ---- The rest of the site, untouched by TASK-118 ---- These three are what every heading below the page title still uses. They are handed out by heading level rather than by size, which is the defect the task measured — kept on purpose until the texts stop moving. Do not add new users; see the SCOPE note above. */ --tr-tight: -0.015em; /* .head--chapter, .head--block, .ledger__no, and the chapter/step heads in the case sheets */ --tr-mega: -0.02em; /* .ledger__no--figure, .film__num, the deck title */ --tr-display: -0.01em; /* one user: .yr__year-num on McKinsey */ --tr-mono-text: 0.024em; /* NOT IN USE — proposed, see the SCOPE note. the same mono face set LOWERCASE — a second line under a cell title, the material notice. It carried the label's +0.10em until TASK-118, and letterspaced lowercase is the one thing every source forbids outright (Tschichold, Goudy). Not zero either: IBM's own Carbon gives Plex 0.32px at 12-14px, which is this, and says why — "Plex has been designed to not be spaced tightly." Three tokens, one per material: caps display, caps mono label, lowercase mono. */ /* ---- Narrative rhythm: one set of named intervals for every case ---- Promoted from Collibra, the only page where the rhythm was reasoned about rather than accumulated (audit A2 / DEN-B). The lower three were local to Collibra until TASK-67; the block vocabulary reads them on every page. */ --r-chapter: clamp(104px, 13vw, 208px); /* before a chapter opens */ --r-chapter-in: clamp(72px, 8vw, 140px); /* chapter rule -> first content */ --r-block: clamp(56px, 6.5vw, 104px); /* between blocks inside a chapter */ --r-caption: var(--sp-4); /* object -> its caption */ --r-dense: var(--sp-4); /* inside a ledger cell (A3) */ /* ---- The margin column. One width sitewide; it was 140/160/180/220px at 0.3/0.35/0.4/0.55fr across nine blocks before TASK-67 (audit A6). ---- */ --col-margin: 180px; /* ---- Tonal ground. One name for the #F3F1EC both cases already used under two (--paper on Collibra, --light-paper on Light — audit B6). Not --paper: that name is taken in styles.css, where it maps the cube's variables. ---- */ --ground-paper: #F3F1EC; /* ---- Roles the system needs by name ---- */ --caption-ink: var(--text-muted); /* 7.0:1 — captions are not faint */ --chip-bg: var(--ink-0); /* chapter number: ink plate (CHIP-B) */ --chip-fg: var(--white); /* ---- Picture edges: four, chosen by what the object is (A4) ---- bare — a cut-out, or a shot on a ground dark enough to bound it rule — a screenshot on white card — line art, which needs a ground to be a thing sheet — the deck and the guide plate, already 2px ink where they live */ /* TASK-74 · this edge used to be var(--rule), i.e. ink: 19.79:1 on white and 17.53:1 on paper. Nothing inside a light interface is that strong, so the frame read before the screen did — Pavlo, twice (TASK-19, TASK-74). The ceiling for a picture edge is now 2:1 against the ground it sits on. If a screenshot ever looks unbounded here, give it a ground (--edge-card) rather than a darker line: darkening the line is what caused the defect. */ --edge-rule: var(--rule-hair) solid var(--rule-frame); --edge-card: var(--rule-hair) solid var(--rule-muted); --edge-card-pad: clamp(16px, 2.4vw, 32px); /* --tr-display / --tr-mega / --tr-tight stood here until TASK-118. All three were uppercase display tracking under three names, handed out by heading level rather than by size; --tr-caps above replaces the set. */ /* ---- Weights ---- */ --wt-reg: 400; --wt-med: 500; --wt-semi: 600; --wt-bold: 700; /* ---- Motion (restrained, mechanical) ---- */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 220ms; /* ---- Accent / data colour ("Electric Signal") ---- STRICT: только для данных и инфографики (графики, ledger'ы, дата-заливки, сигнал-марки). Никогда для текста, кнопок, ссылок, логотипа, хрома. Синхронизировано с дизайн-системой AWMY (tokens/colors-accent.css). */ --data-blue: #2D5BFF; --data-cyan: #00C2DE; --data-teal: #00B884; --data-violet: #7A5CFF; --data-alert: #FF2E20; --signal-up: var(--data-teal); /* рост / положительный / «найдено» */ --signal-down: var(--data-alert); /* падение / критично */ --signal-flat: var(--gray-4); /* ровно — остаётся моно */ }