/* Peace & AI — design tokens. v0.5, 2026-08-15. CANONICAL SOURCE IS NOW THE SITE (web/src, from the 2026-08-15 one-page version). brand-book-v0.4.html is historical reference. See brand.md §9 for the v0.4→v0.5 diff. v0.5 adds, from the site: the CREAM BAND (#EFE4CE, a fourth ground), Poppins 600, the mono eyebrow label, tighter heading leading, the button spec, ochre ::selection, and A NEW SEMANTIC PAIR on the teal panel — coral (terracotta family) marks the harm/extractive side, ochre marks the constructive side. Graphite no longer appears on any live surface; its tokens remain for data-viz only. PROVENANCE: • Light values: verbatim from the 2026-08-15 site, which confirms every v0.4 paper-ground and teal-panel value it touches. • Dark theme (ink ground): still the ▲-derived v0.4 set — the site is light-only, so nothing new bears on it. • Contrast ratios in comments are measured against the ground named in the block, NOT against white. Three site values fail WCAG AA and are corrected here, with the site's original kept in the comment: #DE7B57 small text on teal 4.20:1 → --d-terracotta-on-teal #E28560 (4.60:1) #C2872F label text on cream 2.45:1 → use --ochre-deep #8A5B14 (4.64:1) #8A7A52 label on cream 3.34:1 → use --ink-muted #6B6459 (4.64:1) Site markup should use the corrected tokens; the visual difference is nil. */ @font-face { font-family: 'Poppins'; src: url('/webdev/fonts/poppins-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/webdev/fonts/poppins-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/webdev/fonts/poppins-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/webdev/fonts/poppins-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/webdev/fonts/poppins-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/webdev/fonts/public-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/webdev/fonts/public-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/webdev/fonts/public-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/webdev/fonts/public-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/webdev/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'IBM Plex Mono'; src: url('/webdev/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; } :root { /* — type ———————————————————————————————————— v0.4 retires Newsreader. Poppins is THE VOICE (headlines, wordmark, documents, pull quotes); Public Sans is THE MACHINERY (UI, forms, tables, labels); IBM Plex Mono is data. Don't blur the first two — brand book §04. */ --font-voice: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* v0.2 names, kept as aliases so nothing breaks mid-migration. Prefer the names above in new code. --font-read maps to the VOICE face because that is the job Newsreader used to do; --font-display maps to the same face, since in v0.4 one family carries both. */ --font-display: var(--font-voice); --font-read: var(--font-voice); /* — paper ground (default) ————————————————— Ratios measured on --paper #F6F1E8. */ --ink: #14120F; /* 16.6:1 body, headlines */ --ink-soft: #3B362F; /* 10.6:1 secondary */ --ink-muted: #6B6459; /* 5.2:1 captions, labels */ --paper: #F6F1E8; /* page ground — warm, NOT white */ --paper-raised: #FFFFFF; /* ▲ raised panels — the one place white is allowed */ --band: #EFE4CE; /* v0.5 — the CREAM BAND, second light ground; labels on it use --ink-muted (4.6:1), never #8A7A52 (3.3:1) */ --line: #E0D9CB; /* ▲ 1.2:1 DECORATIVE dividers only */ --line-strong: #948A7A; /* 3.0:1 on paper; 2.7:1 on --band → on the cream band it is DECORATIVE only (the paired-column divider) */ /* — brand colour ——————————————————————————— */ --teal-deep: #1C5F59; /* 6.6:1 on paper — PRIMARY, and "relational" */ --teal: #2F7E78; /* 4.3:1 on paper — LARGE TEXT / GRAPHICS ONLY */ --terracotta: #A8442A; /* 5.3:1 on paper — ACCENT, the ampersand, body-safe */ --terracotta-bright: #C25A3A; /* 3.9:1 on paper — LARGE ONLY, headlines */ --ochre-deep: #8A5B14; /* 5.2:1 on paper — warm highlight, body-safe */ --ochre: #C2872F; /* 2.7:1 on paper — DECORATIVE FILLS ONLY, never text */ --graphite: #4E545A; /* 6.8:1 on paper — the "extractive" grey */ /* — ink ground (dark theme) ———————————————— ▲ ALL DERIVED. Ratios measured on --ink-ground #14120F. The three warm neutrals are the book's own otherwise-unassigned cream and taupe values, which form a clean 13.7 / 9.1 / 6.0 ladder — the shape a dark text ramp needs. */ --ink-ground: #14120F; /* ▲ warm near-black — the book's own --ink */ --ink-panel: #1E1B17; /* ▲ panels; cream on it 12.6:1 */ --ink-raised: #292520; /* ▲ raised; cream on it 11.2:1 */ --cream: #E4DCCE; /* 13.7:1 on ink ground — primary text */ --cream-soft: #BDB4A6; /* 9.1:1 on ink ground — secondary */ --taupe-muted: #9A9184; /* 6.0:1 on ink ground — captions; also the wordmark & */ /* Dark-mode brand/accent. ▲ Derived: the light values are too dark to sit on ink. --d-ochre needs no lift (the book's own ochre already reads 6.1:1 here); --d-terracotta IS lifted, because --terracotta-bright reads only 4.3:1 and would fail body text. */ --d-teal: #7CC0B5; /* ▲ 9.0:1 on ink ground; 6.0:1 on teal ground — the button fill on the teal panel (site: "Start a conversation"), text on it #123A37 */ --d-ochre: #C2872F; /* 6.1:1 on ink ground — unlifted */ --d-terracotta: #DE7B57; /* ▲ 6.3:1 on ink ground; 4.2:1 on TEAL ground — large text/graphics only there (the site's harm-side colour, v0.5 semantic pair) */ --d-terracotta-on-teal: #E28560; /* v0.5 — 4.6:1 on the teal ground: the small-text variant of the harm-side coral (site used --d-terracotta at 4.2:1, which fails AA small) */ --d-ochre-on-teal: #D49A3C; /* ▲ 5.0:1 on the TEAL ground (#123A37) — the constructive-side colour of the v0.5 semantic pair, and the panel accent. --d-ochre reads only 4.0:1 there — large hero figures only. */ /* — scale ————————————————————————————————— */ --measure: 68ch; /* v0.4: 66ch → 68ch for long-form */ --track-display: -0.01em; /* v0.4: Poppins is rounder; -0.03em was for Public Sans */ --track-label: 0.14em; /* uppercase labels */ --track-data: 0.02em; --radius: 0px; /* still square */ } /* Applied ground. Swap these blocks, not the raw tokens — the brand book's own instruction: style against --bg, --fg, --brand and --accent. */ :root { --bg: var(--paper); --bg-raised: var(--paper-raised); --fg: var(--ink); --fg-soft: var(--ink-soft); --fg-muted: var(--ink-muted); --brand: var(--teal-deep); --accent: var(--terracotta); --accent-fill: var(--ochre); --border: var(--line); --border-strong: var(--line-strong); --on-brand: var(--paper); /* v0.5 semantic pair (see brand.md §3.4): the harm side of any drawn contrast is the terracotta family, the constructive side is the ochre family; teal stays the brand. Graphite is retired from live surfaces — data-viz neutral only. */ --relational: var(--teal-deep); --extractive: var(--terracotta); --constructive: var(--ochre-deep); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--ink-ground); --bg-raised: var(--ink-panel); --fg: var(--cream); --fg-soft: var(--cream-soft); --fg-muted: var(--taupe-muted); --brand: var(--d-teal); --accent: var(--d-terracotta); --accent-fill: var(--d-ochre); --border: rgba(228,220,206,.14); --border-strong: rgba(228,220,206,.32); --on-brand: var(--ink-ground); --band: var(--ink-panel); /* the cream band maps to the panel surface in dark */ --relational: var(--d-teal); --extractive: var(--d-terracotta); --constructive: var(--d-ochre); } } :root[data-theme="dark"] { --bg: var(--ink-ground); --bg-raised: var(--ink-panel); --fg: var(--cream); --fg-soft: var(--cream-soft); --fg-muted: var(--taupe-muted); --brand: var(--d-teal); --accent: var(--d-terracotta); --accent-fill: var(--d-ochre); --border: rgba(228,220,206,.14); --border-strong: rgba(228,220,206,.32); --on-brand: var(--ink-ground); --band: var(--ink-panel); /* the cream band maps to the panel surface in dark */ --relational: var(--d-teal); --extractive: var(--d-terracotta); --constructive: var(--d-ochre); } /* Inverted panel — the teal ground, usable inside either theme. ▲ Derived for v0.4: the ground is carried over from v0.2, but the accent moves to ochre so the panel matches the mark's own two colours rather than introducing a third. */ .inverted { --bg: #123A37; --bg-raised: #17453F; --fg: #EFE9DE; /* 10.3:1 on the teal ground — site-confirmed */ --fg-soft: #C3BFB3; /* 6.8:1 on the teal ground — site-confirmed */ --fg-muted: #C3BFB3; --brand: var(--d-teal); --accent: var(--d-ochre-on-teal); --accent-fill: var(--d-ochre-on-teal); --border: rgba(239,233,222,.16); --border-strong: rgba(239,233,222,.34); --on-brand: #123A37; /* v0.5: this panel is where the semantic pair lives on the site — harm side coral, constructive side ochre. Small text takes the lifted coral. */ --relational: var(--d-teal); --extractive: var(--d-terracotta); /* large text / borders / arrows */ --extractive-text: var(--d-terracotta-on-teal); /* small text, 4.6:1 */ --constructive: var(--d-ochre-on-teal); background: var(--bg); color: var(--fg); } /* The cream band — the site's second light ground (team, approach). Same ink ramp; labels use --ink-muted; --line-strong is decorative-only here (2.7:1). */ .band-cream { --bg: var(--band); --bg-raised: var(--paper); background: var(--bg); } /* — base ——————————————————————————————————— */ body { background: var(--bg); color: var(--fg); font-family: var(--font-voice); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-voice); font-weight: 700; line-height: 1.2; letter-spacing: var(--track-display); } h1 { line-height: 1.08; } /* v0.5 — site values; display leading is tight */ h2 { line-height: 1.03; } h3 { font-weight: 600; } /* v0.5 — subheads are Poppins 600, not 700 */ /* The mono eyebrow — v0.5. IBM Plex Mono 500 above a heading, tracked +0.02em (NOT the wide --track-label). Replaces the v0.2–v0.4 hanging margin label as the default section opener. Case is TYPED, not transformed: uppercase for section openers ("OUR APPROACH"), sentence case where the label names a human role ("Technology", "Peace") — per the site. */ .label { font: 500 .8rem/1.3 var(--font-data); letter-spacing: var(--track-data); color: var(--fg-muted); } /* v0.5 — the site's selection style: ochre ground, ink text. */ ::selection { background: var(--ochre); color: var(--ink); } code, .data { font-family: var(--font-data); font-size: .9em; font-variant-numeric: tabular-nums; } /* v0.5 — links are teal, turning terracotta underlined on hover (site behaviour). */ a { color: var(--brand); text-decoration: none; text-underline-offset: 3px; } a:hover { color: var(--accent); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }