/* * Design tokens — single source of truth for all blocks and templates. * Edit ONLY via team agreement (see CLAUDE.md §4 and §12 Decisions log). * * Direction: "Swiss Signal" (ENG asset #3, SPORTS BETTING, keyword * `betting sites not on GamStop`) — the International Typographic Style read * as a modern product page. Paper-white ground, near-black ink, and exactly * ONE chromatic colour: a hot signal red that is rare and load-bearing. A * strict 12-column grid, very generous whitespace, hairline rules, sharp * corners, and huge tightly-set grotesk headlines. Nothing is decorative * unless it is also structural. * * THREE SITES IN THIS NETWORK ARE NOW ENGLISH AND UK, AND ALL THREE ARE ABOUT * OPERATORS OUTSIDE GAMSTOP. The two siblings can share a SERP with this one, * so separation is structural, never a matter of swapping one hex: * * eng-asset "Material You" eng-asset2 "Bold Typography" eng-asset3 (this file) * ─────────────────────────── ───────────────────────────── ────────────────────────────── * warm light #FFFBFE near-black #0A0A0A PAPER WHITE #FFFFFF * violet, white ink vermillion flood, black ink BLACK keys; red is RARE, never a flood * pills, radius 12–48 radius 0, no shadows radius 0 + soft DIRECTIONAL float shadows * tonal surfaces rules + mono labels 12-col grid, angled clip-path canvas panels * Roboto 500, no caps Inter Tight 600 + JetBrains HANKEN GROTESK 800, one family, no mono * no section marker mono "01" index above h2 red square on a hairline above h2 * casino casino SPORTS BETTING * * EVERY PAIR BELOW IS MEASURED (WCAG 2.1 relative luminance), not eyeballed. * The supplied design prompt got two things wrong, both recorded where they * apply: * * 1. WHITE ON THE SIGNAL RED IS 3.55:1 AND FAILS. The prompt's CTA hover * ("inverting text to white over red") and its nav button ("background * flips to red on hover") both put white text on #FF3B30. Every red * FILL that carries a label is therefore --sn-signal-ink #D70015 * (5.38:1 for white on it), which is the prompt's own "AA red" — it * just never applied it to fills. #FF3B30 stays for shapes, icons and * the display-size accent word, where 3:1 (WCAG 1.4.11 / large text) * is the bar and it clears it at 3.55. * * 2. ITS MUTED INK (ink at 60%) IS 4.77:1 ON THE CANVAS SURFACE, a * rounding error above AA on the one surface where captions and table * meta sit. The trust row in the prompt already uses ink/65; that is * the value here everywhere (6.29 on paper, 5.72 on canvas). * * INK ON THE SIGNAL RED, by contrast, is 5.58:1 — so a red block may carry * near-black text (the one filled badge does). Of the two inks, only white * is banned on #FF3B30. */ /* ---------- Fonts (self-hosted, latin subset) ---------- */ /* * ONE FAMILY, 35KB: Hanken Grotesk, variable, wght 100–900 (read from fvar, * not assumed). * * THE PROMPT ASKS FOR INTER. It is not shipped, on Andy's decision * (2026-09-24): eng-asset2 ships Inter Tight, which IS Inter drawn on a * narrower advance, and at the -0.045em display tracking this system asks * for the two sites would set practically identical headlines. Hanken * Grotesk is a neo-grotesk in the same Swiss register — flat terminals and * fairly closed apertures — but its widths, its `R`, `G`, `a` and its * figures are visibly its own. * * The prompt's `font-feature-settings: cv02 cv03 cv04 cv11` are Inter * character variants and do not exist in this font, so they are not set. * * NO MONOSPACE THIS TIME, and that is a de-fingerprinting decision as much as * a Swiss one. eng-asset2's whole label system is JetBrains Mono; here every * label is the grotesk in uppercase at wide tracking, which is what the * International Style actually did. --sn-font-mono is kept as a NAME (21 * stylesheets reference it) and resolves to the grotesk. * * FIGURES ARE ALREADY TABULAR. Checked with fontTools: all ten digits share * one 560-unit advance and the font has no `tnum` feature to switch on, so * the calculator's columns line up without a mono face. Consumers still set * `font-variant-numeric: tabular-nums` so a future face that is not * tabular by default behaves. * * GLYPHS NOT IN THE FONT: → ↗ ✓ ✗ ★ ○ (checked). £ € – — “ ” ’ · × are * present. Symbols stay INLINE SVG, stroked, as on every previous market. * * WEIGHT 800 IS THE DISPLAY WEIGHT, and it is the one place this skin is * heavier than its dark sibling (600). There the drama was tracking on a dark * ground; here it is black mass on white paper, which is how Swiss posters * get their weight. Body 400, labels 600–700, h3 700. */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/hanken-grotesk-vf.woff2') format('woff2'); } /* ---------- Tokens ---------- */ :root { /* SURFACES. Paper, paper, canvas. bg page ground — pure white is CORRECT here, unlike every dark skin's "never #000": the prompt's paper is #ffffff, and Swiss print is white stock. surface cards, panels — also paper; a card is a hairline, not a tone surface-2 the CANVAS grey #F4F4F4 — insets, table bands, the angled hero panel. 1.10:1 from paper: it reads as a plane, never as a boundary, so anything interactive on it still needs a real edge (--sn-border-strong). */ --sn-bg: #FFFFFF; --sn-surface: #FFFFFF; --sn-surface-2: #F4F4F4; --sn-canvas: #F4F4F4; /* Legacy container slots (MD3 era). There is no second hue in this skin: they resolve to canvas + ink. */ --sn-secondary-container: #F4F4F4; --sn-on-secondary-container: #0A0A0A; /* 17.97 on canvas */ --sn-tertiary: #0A0A0A; --sn-tertiary-container: #F4F4F4; --sn-on-tertiary-container: #0A0A0A; /* RULES. Two tokens, and the distinction is load-bearing for the fourth market running. --sn-border ink/10 = #E6E6E6, 1.25:1. The prompt's hairline. Dividers only — never an input, a toggle or an outlined button. --sn-border-strong #767676, 4.54:1. The ONLY token allowed on a control edge (WCAG 1.4.11 asks 3:1). --sn-border-ink the full ink rule, for the heavy 2px lines under a table head or across a section. */ --sn-border: #E6E6E6; --sn-border-strong: #767676; --sn-border-ink: #0A0A0A; --sn-border-w: 1px; --sn-border-thick: 2px; /* TEXT. Near-black ink, never #000 (the prompt's own #0a0a0a). */ --sn-heading: #0A0A0A; /* 19.80 paper / 17.97 canvas */ --sn-text: #0A0A0A; --sn-text-soft: #545454; /* ink/70 — subheads, nav: 7.57 / 6.89 */ --sn-text-muted: #606060; /* ink/65 — captions, meta: 6.29 / 5.72. See note 2 */ /* THE SIGNAL. Rare and load-bearing: the logo square, the accent word, the H2 marker, icons, one big block per composition. If it appears on more than a handful of things per screen it stops signalling. --sn-signal #FF3B30 — shapes, icons, display text only (3.55) --sn-signal-ink #D70015 — small red text, AND every red fill that carries a white label (5.38 either way). Note 1. */ --sn-signal: #FF3B30; --sn-signal-ink: #D70015; /* ACTIONS. The prompt's buttons are BLACK keys that turn red on hover, so the action colour is ink and red is the RESPONSE, not the resting state. That is the single biggest structural difference from eng-asset2, where every CTA is a vermillion block. Legacy names are kept (block stylesheets reference them). What they mean is unchanged — --sn-primary-dark has always been "the ink that sits ON primary", which is white here. */ --sn-primary: #0A0A0A; /* the black key — white on it 19.80 */ --sn-primary-hover: #D70015; /* signal-ink — white on it 5.38 */ --sn-primary-press: #B80012; /* deeper — white on it 6.89 */ --sn-primary-dark: #FFFFFF; /* ink ON primary */ --sn-btn-ink: #FFFFFF; /* button labels route through THIS, never `color` — CLAUDE.md §12 2026-08-10 */ /* --sn-accent is "links and small markers". It is the AA red, so any block that painted a label with it stays readable. PROSE LINKS do not use it at rest — they are ink with a red underline (base.css). */ --sn-accent: #D70015; --sn-pink: #0A0A0A; /* legacy second-accent slot — no second hue */ /* HOVERS GO TO RED, which on this ground means DARKER in luminance and hotter in hue at the same time. Paper cannot get lighter, so the rule is "ink → signal-ink", never "ink → grey". */ /* STATE LAYERS — neutral ink washes. */ --sn-state-hover: color-mix(in srgb, var(--sn-heading) 4%, transparent); --sn-state-press: color-mix(in srgb, var(--sn-heading) 8%, transparent); /* CHROME. The header is translucent paper (the prompt's white/90 with a backdrop blur — here the blur earns its keep, because the hero's canvas panel and the grid texture scroll beneath it). The FOOTER is the one black slab on the page: Swiss layouts close on a solid band, and it keeps the compliance strip on a surface nothing else uses. */ --sn-purple: #FFFFFF; --sn-purple-2: #F4F4F4; --sn-purple-deep: #0A0A0A; /* footer ground */ --sn-on-chrome: #FFFFFF; /* 19.80 on the footer */ --sn-on-chrome-muted: #A3A3A3; /* 7.85 on the footer */ /* SEMANTIC (callouts, pros/cons, yes/no marks). Inks first, all ≥5.4 on paper and ≥4.9 on canvas. DANGER IS A DEEP ROSE, NOT RED. #D70015 is already the signal-ink, so a red "danger" would read as "this is the brand" or "this is a link on hover". #AD1457 is 30° away in hue and visibly darker. State is never signalled by colour alone — the icon and the heading carry it. */ --sn-info: #0A5FD6; /* 5.80 paper / 5.27 canvas */ --sn-tip: #0E7A36; /* 5.45 / 4.95 */ --sn-warning: #8A5A00; /* 5.93 / 5.39 */ --sn-danger: #AD1457; /* 6.97 / 6.33 */ --sn-info-tint: color-mix(in srgb, var(--sn-info) 7%, transparent); --sn-tip-tint: color-mix(in srgb, var(--sn-tip) 7%, transparent); --sn-warning-tint: color-mix(in srgb, var(--sn-warning) 8%, transparent); --sn-danger-tint: color-mix(in srgb, var(--sn-danger) 6%, transparent); --sn-primary-tint: color-mix(in srgb, var(--sn-signal) 8%, transparent); --sn-signal-tint: color-mix(in srgb, var(--sn-signal) 8%, transparent); /* TYPOGRAPHY. */ --sn-font: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-display: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sn-font-mono: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* legacy NAME — no mono, see above */ --sn-fs-2xs: .6875rem; /* 11 — the index-rule eyebrow (prompt: 11–11.5px) */ --sn-fs-xs: .75rem; /* 12 — uppercase labels, fine print */ --sn-fs-sm: .875rem; /* 14 — captions, nav, button text */ --sn-fs-base: 1rem; /* 16 — controls, table cells */ --sn-fs-md: 1.125rem; /* 18 — ARTICLE BODY (the prompt's 16.5 is a hero subhead) */ --sn-fs-lead: 1.25rem; /* 20 — ledes, section intros */ --sn-fs-lg: 1.5rem; /* 24 — h3 */ --sn-fs-xl: 2rem; /* 32 — h2 floor */ --sn-fs-2xl: 2.75rem; /* 44 — h2 ceiling */ --sn-fs-3xl: 3.5rem; /* 56 */ --sn-fs-4xl: 4.5rem; /* 72 */ --sn-fs-5xl: 6rem; /* 96 */ --sn-fs-hero: 7.5rem; /* 120 — the hero H1 ceiling (prompt: 7.8rem) */ /* TRACKING. The prompt's numbers, verbatim. Display is pulled very tight, body slightly tight, labels pushed wide. */ --sn-tracking-tighter: -.045em; /* display headlines (prompt) */ --sn-tracking-display: -.035em; /* h2 / h3 */ --sn-tracking-body: -.02em; /* the prompt's "grotesk-tight" */ --sn-tracking-wide: .06em; /* small caps-free labels */ --sn-tracking-label: .18em; /* uppercase rule labels, buttons-as-text */ --sn-tracking-widest: .28em; /* the eyebrow */ /* LINE HEIGHT. The prompt's display 0.92 is right for a stacked headline and wrong for anything that wraps unpredictably, so it is the HERO's value only; ordinary headings get 1.05. */ --sn-lh-display: .92; --sn-lh-heading: 1.05; --sn-lh-compact: 1.25; --sn-lh-body: 1.65; --sn-lh-relaxed: 1.75; /* Spacing scale (multiples of 4). */ --sn-sp-1: .25rem; --sn-sp-2: .5rem; --sn-sp-3: .75rem; --sn-sp-4: 1rem; --sn-sp-6: 1.5rem; --sn-sp-8: 2rem; --sn-sp-12: 3rem; --sn-sp-16: 4rem; --sn-sp-24: 6rem; --sn-sp-32: 8rem; /* SHAPE — ZERO. "Keep every corner sharp (no border-radius)." Token names are legacy; every one resolves to 0, including --sn-radius-pill. Grep for `50%` before adding one — the avatar and number discs inherited from older skins were squared off long ago and must stay square. */ --sn-radius-sm: 0; --sn-radius: 0; --sn-radius-lg: 0; --sn-radius-xl: 0; --sn-radius-pill: 0; /* ELEVATION. THE LEGACY SHADOW TOKENS RESOLVE TO `none`, deliberately. Twenty block stylesheets have referenced --sn-shadow over five skins, and letting all of them start casting shadows at once would turn a Swiss page into a card stack. Shadows here are a DELIBERATE, NAMED act: --sn-float the prompt's soft directional drop, for a thing that FLOATS over a canvas (hero artifacts, the featured bookmaker card, an open nav panel) --sn-float-sm the same, smaller — hover state of a list card --sn-float-signal the red-tinted drop under a red block Always straight DOWN (y offset, negative spread). Never a diagonal offset and never a glow. */ --sn-shadow: none; --sn-shadow-md: none; --sn-shadow-lg: none; --sn-glow: none; --sn-float: 0 24px 50px -18px rgba(10, 10, 10, .35); --sn-float-sm: 0 14px 30px -16px rgba(10, 10, 10, .30); --sn-float-signal: 0 30px 60px -20px rgba(255, 59, 48, .50); /* MOTION. Decisive, no bounce. The entrance curve is an expo-out so the fade-up settles rather than drifts. Every consumer answers prefers-reduced-motion. */ --sn-motion-fast: 150ms; --sn-motion: 220ms; --sn-motion-slow: 500ms; --sn-ease: cubic-bezier(.2, .7, 0, 1); --sn-ease-out: cubic-bezier(.16, 1, .3, 1); /* THE CANVAS — the prompt's "infinite canvas" cue: #F4F4F4, a 56px ink/5 line grid, and a faint red wash from the top-right. A full `background` shorthand stack so a caller writes `background: var(--sn-pat-canvas);`. The grid is 5% ink over canvas = #E8E8E8 lines, 1.10:1 — texture, never structure. */ --sn-pat-canvas: radial-gradient(ellipse 60% 55% at 100% 0%, rgba(255, 59, 48, .10), transparent 70%) no-repeat, repeating-linear-gradient(0deg, rgba(10, 10, 10, .05) 0 1px, transparent 1px 56px), repeating-linear-gradient(90deg, rgba(10, 10, 10, .05) 0 1px, transparent 1px 56px), #F4F4F4; /* THE ANGLE — the one oblique line in an otherwise orthogonal system. Desktop cuts the panel's LEFT edge (it leans into the text column); mobile cuts its TOP edge, because a stacked panel has no left edge to lean. The two must stay a pair. */ --sn-clip-lean: polygon(14% 0, 100% 0, 100% 100%, 0 100%); --sn-clip-lean-m: polygon(0 12%, 100% 0, 100% 100%, 0 100%); /* LAYOUT. --sn-container stays 1320 with 16/24 gutters. The prompt says 1280 with 24/32/48; the eng-asset2 pass proved (Andy, 2026-08-19) that the design-system figure costs the money grid a column. The list is a business number. The 12-column grid lives in base.css (.x195ce059). --sn-content is 760px — between the two siblings (820 / 720), ~80 characters of 18px Hanken Grotesk. The image dimensions in img-prompt.md are derived from it. */ --sn-container: 1320px; --sn-container-wide: 95vw; --sn-content: 760px; }