/* ===================================================================== WIO DESIGN TOKENS — Top CEO --------------------------------------------------------------------- Single source of truth for the design language. Every value here is read out of wio.io's own compiled stylesheet; see MD Files/WIO_DESIGN_SYSTEM.md for the provenance of each one. Linked by index.html, privacy.html and guarantee.html. Nothing in the project should hard-code a colour, radius, duration or type size that could be a token from this file. ===================================================================== */ :root { /* =================================================================== 1 · COLOUR Small palette, one job per entry. Adding a colour here is a design decision, not a convenience. =================================================================== */ /* ---- Brand ------------------------------------------------------ */ --color-primary: #5700ff; /* the brand voice */ --color-primary-hover: #4200c2; /* the only primary hover */ --color-primary-light: #894dff; /* borders/accents on violet */ --color-primary-lighter: #eee6fe; /* tinted surface */ --color-primary-pale: #cdbbff; /* soft CTA fill */ --color-primary-ink: #3d0099; /* text on --color-primary-pale */ --color-primary-on-dark: #ceb6ff; /* links + accents on dark grounds */ --color-primary-ring: rgba(87, 0, 255, 0.2); --color-primary-tint: rgba(87, 0, 255, 0.08); /* ---- Ink — navy, never black ------------------------------------ */ --color-text-primary: #0f1a38; --color-text-secondary: #6a6d78; --color-ink-mid: #121d4e; --color-ink-strong: #0c1232; /* ---- Surfaces --------------------------------------------------- */ --color-background: #ffffff; --color-surface: #f7f7f8; --color-surface-alt: #f7f8f8; --color-surface-cool: #f4f4f6; --color-surface-dark: linear-gradient(#101f4b 0%, #1e2844 100%); --color-surface-on-dark: rgba(255, 255, 255, 0.10); /* ---- Borders — hairlines carry the structure -------------------- */ --color-border: #e3e6e9; --color-border-strong: #cdd1d5; --color-border-mid: #aeb8c1; --color-border-hairline: rgba(15, 26, 56, 0.10); --color-border-on-dark: rgba(255, 255, 255, 0.16); --color-rule-on-dark: #626d6d66; --color-rule-on-dark-2: #70767666; /* ---- Accents — used for meaning, not decoration ----------------- */ --color-mint: #34ce97; --color-mint-bright: #3dd68c; --color-mint-soft: #d6f5ea; --color-sand: #f5ede3; --color-sand-deep: #ede0d4; --color-peach: #f7d7d0; --color-amber-soft: #fdf3bf; /* ---- Feedback --------------------------------------------------- */ --color-danger: #ef4444; --color-danger-soft: #fdf2f2; /* ---- Composites ------------------------------------------------- */ --color-backdrop: #27314c8f; /* navy scrim, never black */ /* ---- On-dark text ---------------------------------------------- */ /* Measured against #5700FF, the harder of the two coloured grounds (navy is far darker, so anything passing on violet passes there): 1.00 -> 7.37:1 0.88 -> 5.9:1 0.78 -> 4.77:1 0.72 was 4.19:1 and 0.55 about 3.2:1 — both under AA for body copy, which is why secondary text on the violet bands measured as failing. */ --color-text-on-dark: #ffffff; --color-text-on-dark-2: rgba(255, 255, 255, 0.88); --color-text-on-dark-3: rgba(255, 255, 255, 0.78); /* =================================================================== 2 · TYPOGRAPHY Switzer stands in for Aktiv Grotesk. Weight 400 does all the display work — the scale creates the hierarchy, never the stroke. =================================================================== */ --font-sans: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: var(--font-sans); --weight-body: 400; --weight-display: 400; --weight-strong: 500; /* Scale. Reference sizes: 72 · 64 · 50 · 32 · 28 · 22 · 20 · 17 · 15 · 13 · 11. Only the headline steps scale with the viewport; body never does. The ramps below reproduce the reference's own breakpoint pairs: hero heading-3 (32) → heading-5 (64) section title heading-3 (32) → heading-4 (50) sub-section heading-2 (28) → heading-3 (32) card title heading-1 (22), fixed small card body-4 (17), fixed */ --fs-display: clamp(2rem, 1.1rem + 4.4vw, 4.5rem); /* 32 → 72, oversized moments */ --fs-h1: clamp(2rem, 1.2rem + 4vw, 4rem); /* 32 → 64, hero */ --fs-h2: clamp(2rem, 1.55rem + 2.2vw, 3.125rem); /* 32 → 50, section title */ --fs-h2-sub: clamp(1.75rem, 1.6rem + 0.7vw, 2rem); /* 28 → 32, sub-section */ --fs-h3: 1.375rem; /* 22 */ --fs-h4: 1.0625rem; /* 17 */ --fs-lead: 1.25rem; /* 20 — body-5 */ --fs-body: 0.9375rem; /* 15 — body-3, default */ --fs-label: 0.8125rem; /* 13 — body-2 */ --fs-caption: 0.6875rem; /* 11 — body-1 */ /* Leading tightens as size grows. This gradient is what makes large Wio headlines read as a solid block rather than a loose stack. */ --lh-display: 1.06; /* 76 / 72 */ --lh-h1: 1.10; /* 36/32 → 72/64 */ --lh-h2: 1.12; /* 56 / 50 */ --lh-h3: 1.27; /* 28 / 22 */ --lh-h4: 1.41; --lh-lead: 1.35; --lh-body: 1.6; /* 24 / 15 */ --lh-label: 1.54; /* 20 / 13 */ --lh-caption: 1.45; /* 16 / 11 */ /* Near-zero. The reference ships no tracking utilities; the small negative on display sizes is an optical correction for Switzer's slightly wider uppercase. */ --track-display: -0.012em; --track-h1: -0.008em; --track-normal: 0; /* Measures. The reference caps headlines at a pixel width, not a character count. */ --measure-heading: 650px; --measure-body: 46ch; /* =================================================================== 3 · SPACE — 4px grid. 36px is the gutter and the section pad; 64px is the section rhythm. =================================================================== */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-9: 2.25rem; /* 36 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --section-y: clamp(2.5rem, 4vw, 4rem); /* 40 → 64 */ --section-y-major: clamp(3rem, 5vw, 5rem); /* 48 → 80 */ --section-y-tight: clamp(1.5rem, 2.5vw, 2.25rem); /* 24 → 36 */ /* Head → media grid, per the reference's pt-9 */ --gap-head: var(--space-9); --gap-grid: var(--space-4); --gap-split: var(--space-6); /* =================================================================== 4 · LAYOUT — full-bleed with a 36px gutter, capped at 1440. Not a centred column. =================================================================== */ --gutter: clamp(1rem, 3vw, 2.25rem); /* 16 → 36 */ --pad-x: var(--gutter); --container: 1440px; --container-text: 760px; --header-h: 73px; /* py-6 (24×2) + 25px mark */ /* Breakpoints, for reference in @media (custom properties cannot be used in media queries): 768 md — stacking boundary 1024 lg — split-layout boundary 1180 custom-lg 1440 content cap */ /* =================================================================== 5 · SHAPE — radius belongs to objects, never to page structure. Colour bands are square. =================================================================== */ --radius-sm: 8px; /* small cards, inputs, tiles */ --radius-md: 12px; /* overlay cards, inline video */ --radius-lg: 16px; /* media containers */ --radius-xl: 35px; /* rare oversized container */ --radius-band: 0; /* deliberate: sections are never rounded */ --radius-pill: 999px; /* all actions, all badges */ --hairline: 0.5px; /* =================================================================== 6 · MOTION — entrance and hover, nothing else. =================================================================== */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* the house ease */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-expo: cubic-bezier(0.85, 0, 0.15, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 200ms; /* buttons */ --dur-base: 300ms; /* links, nav */ --dur-slow: 500ms; /* cards, hover fills */ --dur-slower: 1000ms; /* icons inside cards */ --dur-reveal: 1200ms; /* entrance */ /* =================================================================== 7 · ELEVATION — one branded shadow, for things that genuinely float. Hairlines do everything else. =================================================================== */ --shadow-float: 0 10px 25px -5px rgba(87, 0, 255, 0.4); --shadow-none: none; }