/* ============================================================================ AJID review site: design tokens Starting point: 08-ajid-design-system/_claude-design-export/tokens.css (neutral palette, adopted 2026-09-04), reconciled against the canonical mockups. Every change from the export is marked "SITE:" and explained in docs/mockup-inventory.md section 1. Rule of thumb: no colour, size or timing is written anywhere else in the site. Components read these names; a section changes ground by re-pointing them (.dark / .relief below). ========================================================================= */ :root { /* ---- Brand colours (cool, used as published) --------------------------- */ --chateau: #65768E; --porcelain: #CBD5DC; --blueprint: #36475F; --ivory: #F4F4F5; --slate: #222222; /* ---- The four warm brand colours, recast to neutral for the site ------- The published warm values (#EEEFE9 #EAE7E5 #D1D1C7 #8C887D) are print only and must not appear on the site. */ --linen: #EEEEED; --blush: #E8E7E7; --burlap: #D0D0CE; --tweed: #898886; /* ---- Dark ladder ------------------------------------------------------- */ --d-deep: #273348; /* hero, press strip, footer */ --d-base: #36475F; /* workhorse dark band */ --d-raised: #42516A; /* pull quotes, investment */ --d-warm: #474644; /* defined for completeness; decision still open in the design system and no canonical page uses it */ --d-stage: #31435F; /* Process steps stage only: the ground Allison approved in the 09-21 prototype (sits between base and deep) */ /* ---- Relief (light grounds) -------------------------------------------- SITE (Allison via Robb, 2026-11-03): every light ground on every page is relief-b #D8D7D4. relief-a (#E7E7E4) is kept for "paper" laid on that ground: the quote cards, About's sheet, the Services door panels. */ --relief-a: #E7E7E4; --relief-b: #D8D7D4; --relief-c: #C8C7C4; --relief: var(--relief-b); /* ---- Ink on dark ------------------------------------------------------- */ --d-display: #F4F4F5; /* display, H2, names; also the "white" nav over photo heroes (no pure white on the site) */ --d-ink: #EEEEED; /* body copy */ --d-ink-2: #D0D0CE; /* captions, footer meta */ --d-quiet: #CBD5DC; /* eyebrows, links, button fill */ --d-hairline: rgba(238, 238, 237, .18); /* rules, borders */ --d-seam-line: rgba(238, 238, 237, .10); /* between two dark bands, and the footer's top edge */ /* ---- Ink on relief ----------------------------------------------------- */ --r-ink: #343A44; --r-ink-2: #4D5461; --r-quiet: #51504E; --r-link: #465469; --r-hairline: #ABAAA7; --r-lift: rgba(52, 58, 68, .06); /* SITE: neutral value from About v3b; the export still carries the warm rgba(60,54,40,.06) */ /* ---- Interactive -------------------------------------------------------- */ --voice: #65768E; --voice-hover: #4E5C77; --focus: #465469; /* SITE: About/Praise value on light grounds; .dark switches it to Porcelain (export value) */ --form-error: #8A3B2E; /* SITE (2026-09-29): Contact form errors. Muted brick, about 6:1 on relief-a; used only there */ /* ---- Per-project ground (portfolio detail pages) ----------------------- SITE: from Buckminster v5. Build v4 with this token; no swatch control. On the two mid greys (#898886, #828993) all text on the run switches to --ink-on-mid; see .run-ground--mid below. */ --run-ground: var(--relief-b); --ink-on-mid: #111111; --grey-mid-a: #898886; --grey-mid-b: #828993; /* ---- Logo (two-colour mark) -------------------------------------------- SITE: the mockups hard-code these inside the SVG. */ --logo-mark: #7C7C79; --logo-accent: #65768E; --logo-mark-dark: #EEEEED; /* footer */ --logo-accent-dark: #CBD5DC; /* ---- Third-party badge ink (GC Magazine "Best of" badge; its own colour, matched to the live allisonjaffe.com embed) ---------------------------- */ --badge-gc-ink: #2E5250; /* ---- Type -------------------------------------------------------------- */ --display: "Canela", Georgia, "Times New Roman", serif; --body: "Century Gothic", Futura, "Avenir Next", Avenir, "Trebuchet MS", sans-serif; --script: "Besotted Love", "Snell Roundhand", cursive; --script-weight: 500; /* Medium on phones and tablets; Regular from 900px (below) */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --size-display: clamp(36px, 6.2vw, 64px); /* Canela 100, LH 1.03, -1.5px */ --size-h2: clamp(28px, 3.6vw, 42px); /* Canela 100, LH 1.14, -1px */ --size-h4: clamp(20px, 1.7vw, 23px); /* Canela 300, LH 1.3 */ --size-numeral: 44px; --size-lede: clamp(17px, 1.35vw, 19px); /* LH 1.62 */ --size-body: 17px; /* LH 1.5 */ --size-caption: 15px; --size-eyebrow: 12px; --size-script: clamp(30px, 3.4vw, 40px); --track-eyebrow: .22em; /* ---- Rhythm ------------------------------------------------------------ */ --gut: clamp(20px, 5vw, 64px); --sec: clamp(64px, 10vw, 120px); --measure: 720px; --content: 1140px; --wide: 1320px; --radius: 0; /* ---- Motion ------------------------------------------------------------ One ease for the whole site. Nothing runs longer than 1600ms except the two ambient loops (scroll cue, press marquee). */ --ease: cubic-bezier(.22, .61, .36, 1); --dur-micro: 450ms; --dur-chrome: 500ms; --dur-entrance: 950ms; --dur-image: 1600ms; --rise: 30px; --stagger: 110ms; /* Reveal defaults (SITE: parameterised, as About/Praise do). A component overrides these three instead of writing its own reveal. */ --rev-dist: var(--rise); --rev-dur: 1s; --rev-step: var(--stagger); /* Image settle: hero and solo frames. Pairs, tiles and portraits override. */ --set-scale: 1.14; --set-dur: var(--dur-image); /* ---- Light defaults for the working names ------------------------------- Components read ONLY these. .dark and .relief re-point them. */ --ink: var(--r-ink); --ink-2: var(--r-ink-2); --headline: var(--r-ink); --quiet: var(--r-quiet); --voice-link: var(--r-link); --hairline: var(--r-hairline); --surface-lift: var(--r-lift); } /* SITE (Robb, 2026-11-03): Besotted Love script headings in Regular on desktop, Medium on smaller screens. */ @media (min-width: 900px) { :root { --script-weight: 400; } } /* Dark grounds */ .dark { --ink: var(--d-ink); --ink-2: var(--d-ink-2); --headline: var(--d-display); --quiet: var(--d-quiet); --voice-link: var(--d-quiet); --hairline: var(--d-hairline); --surface-lift: rgba(238, 238, 237, .06); --focus: var(--porcelain); background: var(--d-base); color: var(--d-ink); } .dark--deep { background: var(--d-deep); } .dark--raised { background: var(--d-raised); } .dark--slate { background: var(--slate); } /* Two adjacent dark bands read as separate planes. */ .dark + .dark { box-shadow: inset 0 1px 0 var(--d-seam-line); } /* Relief grounds */ .relief { --ink: var(--r-ink); --ink-2: var(--r-ink-2); --headline: var(--r-ink); --quiet: var(--r-quiet); --voice-link: var(--r-link); --hairline: var(--r-hairline); --surface-lift: var(--r-lift); background: var(--relief); color: var(--r-ink); } /* Dark pages (Homepage, About): their light bands use relief-b. */ .page-dark { --relief: var(--relief-b); } /* Portfolio detail: the two mid-grey project grounds switch all text to near-black (Buckminster v5 rule). Lighter grounds darken the hairline. */ .run-ground--mid { --ink: var(--ink-on-mid); --ink-2: var(--ink-on-mid); --quiet: var(--ink-on-mid); --headline: var(--ink-on-mid); --voice-link: var(--ink-on-mid); --hairline: rgba(17, 17, 17, .34); } .run-ground--light { --hairline: color-mix(in srgb, var(--run-ground) 78%, #000); }