/* ===================================================================== CORE SHOPS · DESIGN TOKENS (DE · UK · US · EU — one system, localisation only) version v6.1 · 22 August 2026 · owner MHL ----------------------------------------------------------------- THIS FILE IS THE SOURCE. core-shops-design-system-v6.html imports it and does not restate it; tokens.json carries the same names and the same values for design-tool and build consumption. ----------------------------------------------------------------- Evidence tags, used consistently below: CONFIRMED observed on a live page (extractor, June 2026) or measured in universal-homepage-v30 (July 2026) DECIDED a business or design decision on record, owner named PROPOSED normalisation target — no live example yet ----------------------------------------------------------------- Three layers, and components only ever reference the middle one: primitive (--beige-50) -> semantic (--canvas) -> scoped (--span-bg) ===================================================================== */ :root{ /* =============== 1 · PRIMITIVES =============== */ --brand-teal: #35B2B6; /* CONFIRMED — live primary fill. 2.56:1 with white 14px text; see --action-primary-bg */ --brand-teal-hover: #2F686C; /* CONFIRMED (team eyedropper) — 6.33:1 on white. The text-safe teal: links, active states, focus-ring outer */ --teal-hover-alt: #0D6A6D; /* CONFIRMED-in-CSS third teal (live upload-button hover). v6 gives it one job: editorial surface + kickers */ /* --- Editorial panel options, NEW v6.1 · DECIDED (MHL) --- Four sanctioned panel colours for the editorial band (§16). NAVY IS THE FIRST CHOICE and the default; the other three are approved alternatives for a band whose photography wants something else. Switching is one declaration overriding --editorial-panel — never a hex pasted into the rules. */ --panel-navy: #3B4C68; /* FIRST CHOICE — white on it 8.68:1. Cool, separates the band from the teal CTA, sits with photography instead of competing */ --panel-greyblue: #475666; /* alternative — white 7.52:1. Quieter than navy. Note the lightness: at 28% it lands on #3B4754, only 20 in one channel from navy and indistinguishable; 34% is the version that reads as a different colour */ --panel-sage: #42574D; /* alternative — white 7.77:1. Green, so watch the art: a photograph with green in it meets this at the media edge and muddies */ --panel-terracotta: #B85A3C; /* alternative — white 4.60:1, the weakest of the four and the only one that needs checking against every size in the panel. Warm, so it ties to the beige canvas but competes with warm photography */ --brand-green-legacy: #78B943; /* LEGACY — msapplication-TileColor only, never observed in live UI. Do not use */ --grey-0: #FFFFFF; /* CONFIRMED */ --beige-50: #F6F3F1; /* CONFIRMED in-UI — the warm tint primitive behind --canvas */ --grey-f8: #F8F8F8; /* CONFIRMED — the real live grey. RETIRED as a section background */ --grey-f3: #F3F3F3; /* CONFIRMED — DEMOTED to form-input fills only; banned from section bands */ --sale-red: #D40140; /* CONFIRMED — 5.42:1 on white, 4.90:1 on beige, 4.65:1 on --media-well */ /* =============== 2 · SEMANTIC SURFACES =============== */ --canvas: var(--beige-50); /* NEW · DECIDED (MHL) — the single continuous background for every merchandised section, all core shops. This closes the beige-vs-grey question: beige won */ --span-bg: var(--canvas); /* CONFIRMED v30 — scoped alias for the merchandised span so a section-background experiment cannot leak into the compare table */ --bg-section: var(--canvas); /* DEPRECATED ALIAS — legacy references only; new work uses --canvas */ --bg-page: var(--grey-0); /* CONFIRMED v30 — the page itself is white; the tint belongs to the merchandised span */ --bg-surface: var(--grey-0); /* CONFIRMED — cards, dialogs, the compare bar */ --media-well: #F1EDEA; /* NEW — media-area background behind TRANSPARENT product renders only. The --sale-red badge SHAPE sits at 4.65:1 against this well — a non-text contrast (1.4.11, 3:1 bar), so it passes with room; the white label ON the badge is 5.42:1 and unaffected by the backdrop. Do not lighten the red or shrink the badge. Has no effect on assets with baked backgrounds (the v27 lesson, §17) */ --editorial-panel: var(--panel-navy); /* CHANGED v6.1 (was var(--teal-hover-alt) #0D6A6D) — the category/editorial panel fill, defaulting to the first choice. White on navy is 8.68:1 against the teal's 6.36:1. The teal was hue-identical to the CTA, so a band of three teal panels read as one enormous button; navy separates affordance from surface. Override with one declaration to pick another sanctioned option (§16). Verified as the shipped default in the GB-200781 prototype, 19 Aug 2026 */ --surface-inverse: var(--text-primary); /* NEW v6.1 — dark strips and footers: the info strip under a configurator stage, the PiP summary bar, the page footer. White on it is 8.86:1. Requested by the pet-portrait LP (GB-200805), which had been standing in with --text-primary used as a surface */ /* =============== 3 · TEXT =============== */ --text-primary: #4A4A4A; /* CONFIRMED ×832 — 8.86:1 on white, 8.02:1 on the canvas. All content text at small sizes */ --text-secondary: #878787; /* CONFIRMED — KNOWN LIMITATION, OPEN: 3.59:1 white / 3.25:1 canvas, fails AA below 18.66px. Permitted only on struck prices, disabled states, eyebrows, kickers. REMEDY, v6.1, still undecided but now measured: #6E6E6E is 5.10:1 on white and only 4.62:1 on the canvas; #6B6B6B is 5.33:1 and 4.82:1. Most of this text sits on the tint, so #6B6B6B is the stronger candidate. Asked for twice — by the §15 hanging row and by the pet-portrait LP (light swatch edges, example chip) */ --text-muted: var(--text-secondary); /* CONFIRMED — only one mid-grey exists live; no separate muted tier */ --text-on-brand: #FFFFFF; --eyebrow-text: var(--teal-hover-alt); /* CONFIRMED v30 — section kickers. 5.76:1 on the canvas, 6.36:1 on white. Deliberately NOT --brand-teal-hover, which is the interaction colour on these pages (links, focus rings, active dots, card hover) — a static caps label in the affordance colour muddies both. NOTE v6.1: this was once 'the panel colour reused'; the panel is navy now, so #0D6A6D stands on its own as the kicker accent */ --link-text: var(--brand-teal-hover); /* CONFIRMED — the one teal permitted on text */ /* =============== 4 · BORDERS & FOCUS =============== */ --border-subtle: #EEEEEE; /* CONFIRMED — 1px hairline, permitted on surfaces ONLY when the canvas is white (§13) */ --border-strong: #DDDDDD; /* CONFIRMED — control borders, card hover, compare-bar top edge */ --focus-ring: var(--brand-teal-hover); /* RESOLVED v6 — the OUTER band of the two-part ring. Ends the foreign-blue vs single-colour contradiction the document carried */ --focus-ring-inner: #FFFFFF; /* RESOLVED v6 — the INNER band; restores 3:1 over teal fills, photography and the dark footer */ --focus-ring-width: 2px; /* each band is 2px */ --focus-ring-offset: 2px; /* =============== 5 · STATUS =============== */ --error: var(--sale-red); /* CONFIRMED — live errors are white-on-#D40140 */ --info: var(--brand-teal-hover); /* CONFIRMED — teal is the brand's progress/positive language */ --success: #006621; /* PROPOSED — a green that exists in the live CSS (≈5.9:1). Use only if a distinct success colour is wanted */ --warning: #B26A00; /* PROPOSED — no amber exists live; pure proposal (≈4.5:1) */ /* =============== 6 · ACTIONS =============== */ /* DECIDED (MHL), recorded verbatim: "Fails WCAG AA for white CTA text (2.56:1). Known and retained deliberately; sits above design, flagged for estate-colour ownership. EAA applies to EU shops since June 2025." */ --action-primary-bg: #35B2B6; /* DECIDED (MHL) — retained for live-estate consistency; see the verbatim record above */ --action-primary-text: #FFFFFF; --action-primary-hover: brightness(.92); /* CONFIRMED v30 — a FILTER value, not a colour: `filter: var(--action-primary-hover)`. Darkening the fill avoids introducing a third teal */ --action-radius: 0px; /* CONFIRMED — live buttons are square. Buttons stay square; this is the system's signature */ --action-secondary-text: var(--brand-teal-hover); /* the AA-safe teal, never the primary fill */ --action-secondary-bd: var(--brand-teal-hover); --action-secondary-bg: transparent; --action-secondary-hover: var(--brand-teal-hover); /* NEW v6.1 — the outlined secondary INVERTS on hover: this becomes the fill, the label goes white (6.33:1). brightness() on a transparent button is imperceptible, which is why the fill has to change. Hover-capable pointers only. Logged missing by the pet-portrait LP, which had invented a 6% teal wash */ --rating-star: #E8A600; /* NEW v6.1 — the star row on a Trusted Shops / review rating. It is 2.12:1 on white, well under 3:1, so it MUST NOT be the only signal — the numeric rating beside it carries the meaning and the stars are decoration. Never use it for text or for a lone icon. The one colour in the system with no live-extractor origin: sampled for the pet-portrait LP (GB-200805) */ /* =============== 7 · TYPE =============== */ --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* CONFIRMED — the real family */ --font-display: var(--font-body); /* CONFIRMED — one family, no display face */ --fs-h1: 1.875rem; /* 30px · 700 · page title + merchandised section H2 */ --fs-h2: 1.5rem; /* 24px · 700 · section title (live drifts 20–24; unify to 24) */ --fs-h3: 1.25rem; /* 20px · 700 · sub-head + product-card title */ --fs-price: 1.5rem; /* NEW — 24px · 700 · current price in the price row (§14) */ --fs-body: 1rem; /* 16px · 400 · body */ --fs-cta: 0.875rem; /* 14px · 700 · button label, View-all link, badge */ --fs-caption: 0.8125rem; /* 13px · eyebrow, kicker, spec triplet, struck price */ --fs-note: 0.75rem; /* 12px · footnote */ --fs-micro: 0.6875rem; /* 11px · off-scale. ONE sanctioned use: the Hanging row's qualifier line (§15), and it is flagged there */ --lh-tight: 1.2; /* headings, price row */ --lh-label: 1.35; /* CONFIRMED v30 — eyebrows, kickers, Hanging lines */ --lh-spec: 1.45; /* CONFIRMED v30 — the wrapping spec triplet */ --lh-body: 1.55; /* body */ --fw-regular: 400; /* CONFIRMED */ --fw-bold: 700; /* CONFIRMED — no 600/800 in live use */ /* =============== 8 · SPACING (4px base) =============== */ --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; /* =============== 9 · RADIUS =============== */ /* RESOLVED v6, amended v6.1 — the radius question is closed at THREE values and no scale: 0 for actions (--action-radius above), 8px for surfaces, 4px for small objects under ~50px. The PROPOSED --r-md/--r-lg/--r-pill steps stay deleted; do not reinstate them. */ --r-sm: 8px; /* cards, panels, dialog, media clipping */ --r-xs: 4px; /* REINSTATED v6.1 — deleted in v6.0 as part of "square actions, 8px surfaces, nothing else", but the shipped prototype uses it in three places (small thumbnails, the focus ring's own corner, code chips) and pretending otherwise just moved the value into components as a literal. It is NOT a scale step: 0, 4 and 8 are the only three radii, and 4px is for objects under ~50px */ /* =============== 10 · ELEVATION =============== */ --shadow-1: 0 1px 2px rgba(21,25,27,.06), 0 1px 3px rgba(21,25,27,.08); /* PROPOSED — resting cards */ --shadow-2: 0 4px 12px rgba(21,25,27,.08); /* PROPOSED — dropdowns, mega-menu */ --shadow-3: 0 12px 32px rgba(21,25,27,.12); /* CONFIRMED v30 — compare bar + dialog */ /* =============== 11 · MOTION =============== */ --ease: cubic-bezier(.2,.7,.3,1); --dur-fast: 120ms; /* CONFIRMED v30 — hover colour shift, chevron nudge */ --dur-base: 200ms; /* CONFIRMED v30 — media crossfade, dropdowns */ --dur-slow: 360ms; /* CONFIRMED v30 — compare bar, dialog, media zoom */ /* =============== 12 · LAYOUT =============== */ --container: 1140px; /* CONFIRMED — measured from live saved pages July 2026; corrects the proposed 1280. At 24px gaps this gives a 353px 3-up card */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* a BREAKPOINT, not a content width — the container is 1140px */ --z-header: 100; --z-dropdown: 200; --z-overlay: 900; /* CONFIRMED v30 — compare bar */ --z-modal: 1000; /* CONFIRMED v30 — compare dialog */ --z-toast: 1100; /* =============== 13 · RATIO GRAMMAR =============== */ /* Geometry alone tells the customer what a tile is for: squarer media = a product to buy, wider media = a category to browse. No fourth ratio in any merchandised component. */ --img-product: 4 / 3; /* CONFIRMED — product media (the card) */ --img-category: 3 / 2; /* CONFIRMED v30 — category/editorial media. Was --img-tile; renamed for the grammar */ --img-square: 1 / 1; /* RESERVED — avatars, swatches, icon tiles. Unused today */ --img-portrait: 2 / 3; /* LEGACY — testimonial cards only, forbidden in merchandised components */ --img-banner: 3 / 1; /* LEGACY — full-width banners only, forbidden in merchandised components */ /* =============== 14 · GAP & RHYTHM ROLES =============== */ --pad-section: var(--sp-7); /* NEW · CONFIRMED v30 — 48px padding-block on every merchandised section, which makes each boundary a 96px gap on the continuous canvas */ --gap-section: var(--sp-8); /* 64px — legacy/context sections only (48px ≤md) */ --gap-column: var(--sp-5); /* 24px — between grid columns, tiles and cards */ --gap-row: var(--sp-6); /* 32px — vertical gap between stacked column-rows */ --gap-card: var(--sp-4); /* 16px — card inner padding, all sides */ --gap-stack: var(--sp-2); /* 8px — title→body, between bullets */ --measure: 70ch; /* max line length for body / intro copy */ }