/* THE NEW BRAND KIT, APPLIED TO ALL SIX VARIATIONS. The six were built 2026-08-06 against the claudeguys-mistral tokens, which CRITIQUE.md fixed as hard constraints at the time. The kit has moved since and three of those are now stale. This file is the delta and nothing else changes; deleting the one in each file puts them back exactly as they were. ── WHAT WAS ALREADY RIGHT, and is not touched ────────────────────────────── --paper #FBFBF8 --rail #F5F4EF --line #E4E3DE --card #FFFFFF --ink #151524 --text2 #4A4943 --mute #6E6D66 --faint #9C9B93 Those came from the same sampling brand-kit.ts did, so they already agree. Display is Funnel Display and mono is IBM Plex Mono — both already correct. ── THE ACCENT RUNS THROUGH TWO SYSTEMS, and both have to be caught ───────── This is the part that is easy to get half-right. Counted across the six: var(--yellow) 145 uses the original token var(--lead) 41 the palette system, :root[data-pal=...] var(--tile) 24 the palette system var(--onlead) 5 the palette system So overriding --yellow alone would leave 70 painted surfaces on the old colour, and overriding the palette alone would leave 145. Both are below. data-pal is also set at RUNTIME — `document.documentElement.setAttribute('data-pal', p)` — so the override has to match the attribute selector, not just bare :root, or the first palette switch reverts everything. ── THE THREE CHANGES ─────────────────────────────────────────────────────── 1. LEAD ACCENT #FFAF01 -> #FC7800, the Signal in brand-kit.ts, sampled from the mark rather than chosen. lead2 and tile take Blaze from patterns.ts. "field" is redefined rather than a sixth palette added, because field IS our identity's name — see FIELD in web/src/lib/brand.ts. 2. BODY FACE Inter -> Instrument Sans. Decided 2026-08-07 off /type and recorded in brand-kit.ts TYPE and globals.css. 3. CORNER 8px -> 6px. The kit runs sharper. Not zero: these are play surfaces, and a hard corner on them reads as a dialog. ── ⚠️ ONE CONSTRAINT THIS BREAKS ─────────────────────────────────────────── CRITIQUE.md requires every deliverable to be a single self-contained file with fonts inlined and no external requests. Instrument Sans is not embedded in the six, so it is fetched here. Fine for judging the redesign, NOT fine for shipping: before any of these goes live the face has to be inlined as base64 the way Funnel Display already is, and this link has to go. */ /* RESOLVED 2026-08-27 — the @import that stood here is gone. It fetched Instrument Sans from Google, which is exactly what the note above says must not ship, and it did it as a CSS @import: the browser had to parse this file before it could even start the request, so the face arrived two round trips late. Both documents that load this sheet now link /fonts/brand.css from their own , self-hosted and preloaded. Nothing here fetches. */ /* ── 1 · the palette system ───────────────────────────────────────────────── */ :root, :root[data-pal="field"]{ --lead: #FC7800; /* brand-kit.ts — Signal, sampled from the mark */ --lead2: #F83D04; /* patterns.ts — Blaze 3 */ --onlead: #151524; /* Midnight, the decided dark ground */ --tile: #FE7001; /* patterns.ts — Blaze 1 */ } /* ── 2 · the original token, which bypasses the palette entirely ──────────── */ :root{ --yellow: #FC7800; /* declared in two of the six, currently unreferenced; pinned so it cannot reintroduce the old ramp if something starts reading it */ --orange: #F83D04; /* 3 · the body face */ --body: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; /* 4 · the corner */ --r: 6px; /* the Blaze ramp, available to the tile fields — nothing consumes these yet */ --blaze-1:#FE7001; --blaze-2:#FE5519; --blaze-3:#F83D04; --blaze-4:#E21200; --blaze-5:#FD5E22; } /* The other four palettes are left exactly as built. They are the alternates a palette switcher is for, and re-skinning them would delete the comparison. */ /* ── 5 · THE GROUND BECOMES OUR QUILT ───────────────────────────────────────── The six shipped with .tilefield: a 45-degree diagonal checkerboard in ONE colour, the Mistral treatment they were built against. Our pattern is not that. It is a square-cell grid carrying the five Blaze tones — the same construction as web/src/components/sibling-pattern.tsx. Built as an inline SVG rather than stacked gradients because a real quilt has irregular tone placement and a gradient can only make a regular checker. The arrangement is seeded with the same LCG the component uses, so it is fixed rather than re-rolling: 18 of 36 cells carry a tone and the rest let the paper through. A whole block tiles seamlessly because the grid closes. The diagonal goes; the mask and the fade stay — they are what stops a full-bleed pattern competing with the game sitting on it. Presence comes up from .09 to .16, because five tones at .09 average out to grey. */ .tilefield{ position:fixed;inset:0;z-index:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Crect%20x%3D%22100%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE7001%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FD5E22%22%2F%3E%3Crect%20x%3D%22300%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23F83D04%22%2F%3E%3Crect%20x%3D%22400%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23E21200%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23F83D04%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22100%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE7001%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22100%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE5519%22%2F%3E%3Crect%20x%3D%22400%22%20y%3D%22100%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23E21200%22%2F%3E%3Crect%20x%3D%22100%22%20y%3D%22200%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23E21200%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22200%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE5519%22%2F%3E%3Crect%20x%3D%22300%22%20y%3D%22300%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FD5E22%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%22300%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE5519%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22400%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23F83D04%22%2F%3E%3Crect%20x%3D%22400%22%20y%3D%22400%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE7001%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%22400%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FE5519%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22500%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FD5E22%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%22500%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23F83D04%22%2F%3E%3Crect%20x%3D%22500%22%20y%3D%22500%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23FD5E22%22%2F%3E%3C%2Fsvg%3E"); background-size:300px 300px;background-position:0 0;background-repeat:repeat; -webkit-mask-image:radial-gradient(120% 95% at 50% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 78%); mask-image:radial-gradient(120% 95% at 50% 0%,#000 0%,rgba(0,0,0,.35) 45%,transparent 78%); opacity:1;filter:opacity(.16)} /* The other four palettes keep the checker. The quilt is OUR identity — giving ember / signal / ice / ink the same ground would delete the comparison they exist to provide. */ :root[data-pal="ember"] .tilefield, :root[data-pal="signal"] .tilefield, :root[data-pal="ice"] .tilefield, :root[data-pal="ink"] .tilefield{ background-image: linear-gradient(45deg,var(--tile) 25%,transparent 25%,transparent 75%,var(--tile) 75%), linear-gradient(45deg,var(--tile) 25%,transparent 25%,transparent 75%,var(--tile) 75%); background-size:96px 96px;background-position:0 0,48px 48px;filter:opacity(.09)}