/* ═════════════════════════════════════════════════════════════════════════ Matt Smith-Wood — design tokens · v1.0 · 2026-08-12 Single source of truth. If a value is not here, it should not be in a component. Every number below is either measured from one of his own artefacts or justified against Websites/SCORECARD.md. Provenance, in the order the evidence arrived: v0.1 was reverse-engineered from his Webflow site and wrongly recorded --camel as locked. v0.2 replaced it with the printed brochure's palette. v1.0 corrects that again: the brochure is PRINT. The artefact Matt has actually seen, signed off and said he liked is the kitchens page - an off-white editorial ground with #333 ink and full-bleed black showcase bands. Screen colour comes from there. Type still comes from the brochure, because the brochure is where his typography was decided. Load order: tokens.css → system.css. Nothing else. Fonts: Archivo 400/600/800/900 + Montserrat 300/400/500 (both Google Fonts). ═════════════════════════════════════════════════════════════════════════ */ :root { /* ── FROM THE KITCHENS PAGE · the one Matt has actually approved ────── Revised 2026-08-12 after Dex's review. The brochure gave the palette, but the brochure is print. The kitchens page is the artefact Matt saw, signed off and said he liked, and it is built from three values: */ --paper: #f6f3ee; /* the editorial ground. Warmed 2026-08-12 from #fafafa - neutral off-white read cold once the rest of the palette went black. 11.4:1 with #333, so still comfortably AA. */ --ember: #6b2a1c; /* the WARM dark. Brick darkened, so it comes from his own accent rather than being invented. 1.97:1 against black, which is the whole point - far enough to read as a different ground (oxblood was 1.13:1 and could not). White ink at 10.6:1, AA everywhere. */ --black: #0f0f0f; /* warm near-black, not pure. Of 13 premium sites inspected, none used a pure #000 or #FFF ground; the three on pure white were the least premium in the set. Pure black reads as a dark-mode toggle and makes warm photography float in a hole rather than sit on a wall. Observed inks: #0F0F0F, #2D2A2A. */ --grey-black: #333333; /* the ink, and the contact-form ground */ --white: #ffffff; /* ── FROM THE BROCHURE · print provenance, reduced role on screen ───── brick survives as the single accent. The other two do not: */ --brick: #a4402c; /* the one accent moment. White ink at 6.3:1 */ --terracotta: #c57a56; /* DEMOTED from a ground to a detail colour. As a large panel it reads washed out, and it only takes black ink (6.2:1) which looks weak at scale. Rules and small marks only. */ --oxblood: #2c0603; /* RETIRED from web grounds. Measured against black it is 1.13:1 - the same colour to the eye. Two grounds that close together read as a mistake, not a decision. Black wins because Matt approved it. Kept here for print only. */ /* Retained from the live site so a returning visitor is not disoriented, but DEMOTED. Camel is a Webflow inheritance, not brand equity. A quiet transitional panel at most; never the primary ground. */ --camel: #cfcdcb; --backdrop: #e0dfdd; /* ── Semantic aliases ──────────────────────────────────────────────── Components use ONLY these. Changing the brand is then one edit here. */ --ground: var(--paper); /* off-white editorial */ --ground-invert: var(--black); /* the showcase band */ --ground-warm: var(--ember); /* the warm band. Ranges, quotes */ --ground-accent: var(--brick); /* once per page, for the close */ --ground-panel: var(--camel); /* the quiet breath, not terracotta */ --ground-quiet: var(--camel); --rule-accent: var(--terracotta); /* terracotta's remaining job */ --ink: var(--grey-black); --ink-strong: var(--black); --ink-invert: var(--white); --ink-invert-mute: rgba(255,255,255,0.66); --ink-on-panel: var(--grey-black); --ink-on-accent: var(--white); /* Hero scrims. Neutral black, top and bottom - no warm tint. A red-tinted scrim pushed every photograph towards the brand colour, which fought the photography instead of serving it. */ --scrim-top: rgba(0,0,0,.50); --scrim-bottom: rgba(0,0,0,.72); --hairline: rgba(0,0,0,0.28); --hairline-invert: rgba(255,255,255,0.30); /* ── Contrast, measured. Read before setting text on any ground. ────── black + white = 21.0:1 AA everywhere paper + #333 = 11.4:1 AA everywhere ember + white = 10.6:1 AA everywhere ember + black = 1.97:1 distinct enough to be its own ground brick + white = 6.3:1 AA everywhere terracotta + white = 3.4:1 fails - which is why it is not a ground oxblood + black = 1.1:1 indistinguishable - cannot coexist Every ground below sets its own ink in system.css, so a contrast failure cannot be reintroduced by picking a text colour by hand. ── Ground punctuation, the intended sequence ──────────────────────── Scorecard dimension 2 scores 5 for "ground is the page's punctuation, and a final ground used exactly once, for the close". The order is: image → paper → BLACK → paper → EMBER → paper → brick(once) → black Ember exists because an all-black-and-paper page read cold. It is the warm dark, and it is never adjacent to black. Black bands are the kitchens page's own language: full-bleed imagery with the name set huge in white over it. Never two darks adjacent - paper always separates them. Brick appears once and late, exactly as it does in the brochure at pp56-57. Using it twice spends the only surprise the palette has. */ /* ── Type ───────────────────────────────────────────────────────────── Measured from the brochure's embedded fonts: Montserrat Light at 8–9pt for essentially all body copy, Neue Haas Grotesk Display Pro 65 Md and 95 Blk for display. v0.1 assumed Oswald — a CONDENSED grotesk. The brochure is the opposite: wide and heavy. That is not a nuance, it is the opposite shape, and the scale below is built for a wide face. Montserrat is on Google Fonts, so the body face is exact and free. Neue Haas Grotesk Display is licensed. Archivo is the closest free stand-in — same neo-grotesk skeleton, wide apertures, holds up huge. If Matt licenses NHaas, swap --display and nothing else changes. */ --display: 'Archivo', 'Neue Haas Grotesk Display Pro', Helvetica, sans-serif; --display-weight: 800; /* stands in for NHaas 95 Black */ --body: 'Montserrat', -apple-system, 'Segoe UI', system-ui, sans-serif; --body-weight: 300; /* the brochure sets Light, not Regular */ /* No --gesture, and there will not be one. His real signature was found in his own library and vectorised to assets/msw-signature.svg. The system already has a hand voice: his hand. Rock Salt is retired. */ /* ── Scale ──────────────────────────────────────────────────────────── REBUILT for v1.0. The v0.1 ladder ran 88px → 12px, a range of 7.3×, which scores 2 on scorecard dimension 3. A 4 needs 15–25× with the mid-sizes deliberately skipped and small type genuinely small. This ladder runs 184px → 10px = 18.4×, and skips the 40–90px band entirely. The jump is the luxury signal; the gap is what makes it one. */ --t-hero: clamp(3.25rem, 13vw, 11.5rem); /* 52 → 184px once per page */ --t-display: clamp(2.5rem, 8vw, 6rem); /* 40 → 96px */ --t-h2: clamp(1.5rem, 3vw, 2.25rem); /* 24 → 36px */ /* ── nothing between 36px and 96px. That gap is deliberate. ── */ --t-body: 1.0625rem; /* 17px */ --t-label: 0.6875rem; /* 11px, uppercase, tracked */ --t-micro: 0.625rem; /* 10px, the rail counter */ --lh-hero: 0.86; /* a wide heavy face needs tighter leading than a condensed one, or the lines drift apart */ --lh-display: 0.92; --lh-h2: 1.08; --lh-body: 1.6; --track-hero: -0.035em; /* Archivo 800 at 184px needs negative tracking */ --track-display: -0.02em; --track-label: 0.14em; --track-wide: 0.32em; /* era lesson: tiny caps, very wide, against huge display. The contrast is the whole effect */ /* ── Space · six steps on a 4px base ─────────────────────────────────*/ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.75rem; --s-4: 2.375rem; --s-5: 4rem; --s-6: 6.5rem; --gutter: clamp(1.25rem, 5vw, 5rem); --measure: 62ch; --container: 1280px; /* ── Shape ──────────────────────────────────────────────────────────── Radius is zero. Everywhere. Forever. The stray border-radius:10% on the live site is an accident and does not survive. --frame-w is brand-carrying: thinner reads generic, thicker reads like a warning label. It already exists twice in the kitchen draft; naming it here is the entire point of this file. */ --radius: 0; --frame-w: 5px; --frame-pad: 2.375rem; --hairline-w: 1px; /* ── PAPER SURFACE ─────────────────────────────────────────────────── Dex's numbers, 25 Aug: texture 0.4, mottle 440px, press 1.0. Strength is baked into the noise SVG's alpha in system.css; this is the mottle wavelength, which is the one worth tuning by eye. */ --tex-scale: 440px; --press: 1; /* ── Motion · one duration, one easing. Anything else needs a reason. */ --dur: 240ms; --ease: cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; } }