/* ========================================================================== VDPL Next — Design tokens The single source of truth. Every other stylesheet consumes these and defines no raw hex values of its own. Contrast audited against WCAG 2.2 AA, 2026-08-10, against EVERY light ground the site actually uses, not just the page background. That distinction is the whole reason --c-accent-text exists: text colour on #FFFFFF #FBFBFD #F4F5F9 #EBEDF4 worst #0071E3 4.70 4.54 4.31 4.02 FAILS #0066CC 5.57 5.39 5.11 4.76 passes #626974 5.53 5.35 5.08 4.73 passes #FFFFFF on #0071E3 ......... 4.70:1 (AA normal text, buttons) #2F91FF on dark grounds .... 4.77:1 worst (AA, dark theme) The earlier audit only checked the accent against #FBFBFD, so the tinted section grounds (--c-surface-2 and --c-surface-3, which every .l-section--alt uses) were never tested and were failing. Re-run the audit before changing any colour value here. Checking a colour against white alone is not enough. ========================================================================== */ :root { /* The page is light only. Declaring it stops a browser in dark mode from rendering the things it owns - form controls, scrollbars, the spellcheck underline - in dark, which is what leaves a grey select box sitting in a white form. This one line does the job the dark palette used to. */ color-scheme: light; /* ---- Brand ------------------------------------------------------------ The primary accent. Every interactive thing on the site is this blue — buttons, links, focus rings — and that does not change. */ --c-accent: #0071E3; --c-accent-hover: #0077ED; --c-accent-press: #0058B0; --c-accent-ink: #FFFFFF; /* text that sits on the accent */ --c-accent-wash: rgba(0, 113, 227, .08); --c-accent-ring: rgba(0, 113, 227, .32); /* The accent as TEXT, and only as text. #0071E3 is the brand blue and stays that on every fill, border and focus ring, where contrast is judged against white and it passes. As small text on a tinted section it measures 4.31:1 and fails AA, so accent-coloured words use this darker step instead. The two read as the same blue at a glance, which is the point: the brand is intact and the words are legible. */ --c-accent-text: #0066CC; /* ---- Category hues ---------------------------------------------------- This file used to say "one accent, boldness is spent here and nowhere else". That was the right instinct and the wrong result: measured on the built home page the accent covered 0.43% of the page, against 196 greyscale text elements to 33 coloured ones. The page read as black and white. The reason it failed here and works for Apple is that Apple's restraint sits around large product photography, which supplies all the colour. This site has no photography yet, so removing colour left nothing behind it. So: one *interactive* colour, unchanged — and a small set of hues used only to distinguish categories from one another (the six capability icons, the industry rows). They never appear on a button, a link, or anything clickable, so they cannot be mistaken for an action. All six are pitched at the same lightness as the accent, which is what stops a multi-hue set from looking like a crayon box. */ --c-cat-1: #0071E3; /* blue — product engineering */ --c-cat-2: #7A3BD6; /* violet — commerce */ --c-cat-3: #0E8F7E; /* teal — mobile */ --c-cat-4: #C2410C; /* rust — search & automation */ --c-cat-5: #1D6FD4; /* azure — cloud */ --c-cat-6: #B03A76; /* magenta — experience design */ /* ---- Ground ----------------------------------------------------------- Neutrals carry a slight blue bias (hue ~222) so they read as chosen rather than inherited. Never use a pure #808080 grey. */ --c-bg: #FBFBFD; --c-surface: #FFFFFF; --c-surface-2: #F4F5F9; --c-surface-3: #EBEDF4; --c-ink: #111827; --c-ink-2: #3C4351; /* Was #6B7280, which measured 4.13:1 on --c-surface-3 and 4.44:1 on --c-surface-2: a fail for normal text on exactly the tinted sections it is most used in. Darkened by the smallest step that clears 4.5 on every ground (worst case now 4.73). */ --c-ink-3: #626974; --c-line: rgba(17, 24, 39, .10); --c-line-soft: rgba(17, 24, 39, .06); /* Dark inverted blocks (footer, dark sections) that stay dark in both themes. Distinct from --c-bg so a dark section is still a section. */ --c-invert: #0B1020; --c-invert-2: #131A31; --c-invert-ink: #F2F4F8; --c-invert-ink-2: #9AA4BA; --c-invert-line: rgba(255, 255, 255, .12); /* ---- Semantic --------------------------------------------------------- State colours only. These are never used decoratively and never substitute for the accent. */ --c-good: #12A971; --c-good-wash: rgba(18, 169, 113, .10); --c-warn: #B45309; --c-warn-wash: rgba(255, 122, 0, .12); --c-bad: #C2321F; --c-bad-wash: rgba(194, 50, 31, .10); /* ---- Type ------------------------------------------------------------- Native stack by design: no webfont request, so no render-blocking round trip and no silent fallback. SF Pro on Apple, Segoe UI Variable on Windows, Inter where installed, Roboto on Android. */ --f-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", system-ui, sans-serif; --f-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; /* Fluid scale. Optical tracking tightens as size grows — the single detail that separates considered type from default type. The display sizes were pulled down a step from 84/64: at 84px a real headline wrapped to three lines and pushed the hero's supporting copy and buttons below the fold, which is the opposite of what a hero is for. The 1.29 ratio between d1 and d2 is kept, so hierarchy is unchanged — only the absolute scale is tighter. */ /* A real modular scale, roughly 1.45 / 1.8 / 1.33 / 1.125 between steps. The previous scale had two faults that only show up on a built page. The jump from d1 to d2 was 72 → 56 on paper but 72 → 37 once the home page's own override was counted, nearly 2:1 — so a section heading read as a different species from the page title rather than one level below it. And d4 at 20-28 overlapped the lead and the industry row name, which left four sizes (24 / 24 / 19 / 18) all doing the job of "h3" and none of them reading as a distinct level. d1 comes down and d2 goes up so the two meet at a legible ratio, and d4 is narrowed so every card title in the site is the same size. */ --t-d1: clamp(2.25rem, 5vw, 4rem); /* 36 → 64 */ --t-d1-ls: -.034em; --t-d2: clamp(1.75rem, 3.4vw, 2.75rem); /* 28 → 44 */ --t-d2-ls: -.028em; --t-d3: clamp(1.5rem, 2.4vw, 2rem); /* 24 → 32 */ --t-d3-ls: -.024em; --t-d4: clamp(1.25rem, 1.9vw, 1.5rem); /* 20 → 24 */ --t-d4-ls: -.018em; /* Has to clear the body size by a visible step. At 17 against a 16px body the two were within 6% of each other, so the lead under a section heading read as an unusually long first paragraph rather than as a deck. */ --t-lead: clamp(1.125rem, 1.5vw, 1.3125rem); /* 18 → 21 */ --t-lead-ls: -.012em; --t-body: 1rem; /* 16 */ /* Body copy sits at 0. Negative tracking sharpens display type and muddies text at reading size - it closes the gaps the eye uses to separate letters. Tightening stays on the display scale above. */ --t-body-ls: 0; --t-sm: .875rem; /* 14 */ --t-xs: .75rem; /* 12 */ --t-label-ls: .10em; --lh-tight: 1.06; --lh-snug: 1.22; --lh-body: 1.55; /* Standard weights only. These were 480 / 560 / 640 - real instances on a variable font, but the resolved family here is not always one. On a static face the browser has to round or synthesise them, and synthesised weight is what makes text look soft rather than crisp. 500 / 600 / 700 have real cuts everywhere. */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 600; /* headings; 700 read as heavy rather than crisp */ --w-heavy: 700; /* the wordmark and stat figures only */ /* ---- Space ------------------------------------------------------------ 4px base. Section rhythm and gutter are fluid; everything else is not, so component internals stay predictable across breakpoints. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --gutter: clamp(20px, 4vw, 64px); /* Was clamp(80px, 11vw, 160px), then clamp(56px, 8vw, 120px). At 120px a seam between two sections still spent 240px on nothing, and on a 1280 viewport that is most of a screen of empty page between one idea and the next. 88px keeps the sections legibly separate while putting roughly 500px back across the eight seams of the home page. Same-ground seams collapse further (see base.css). */ --section: clamp(48px, 5.5vw, 88px); --container: 1600px; --container-narrow: 1180px; --measure: 65ch; /* running text never exceeds this */ /* ---- Form ------------------------------------------------------------- WCAG 2.2 (2.5.8 Target Size) — no interactive target below 24px, and 44px for anything thumb-operated. */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; --target-min: 24px; --target-touch: 44px; --control-h: 52px; --control-h-sm: 40px; --e-sm: 0 1px 2px rgba(11, 16, 32, .05), 0 4px 12px rgba(11, 16, 32, .05); --e-md: 0 2px 4px rgba(11, 16, 32, .04), 0 12px 32px rgba(11, 16, 32, .08); --e-lg: 0 4px 8px rgba(11, 16, 32, .04), 0 32px 80px rgba(11, 16, 32, .14); /* ---- Motion ----------------------------------------------------------- One easing curve across the whole site. Shared timing is what makes unrelated components feel like one product. */ --ease: cubic-bezier(.2, .7, .3, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: .18s; --dur: .28s; --dur-slow: .8s; /* ---- Layers ----------------------------------------------------------- Declared centrally so no component invents a z-index of 9999. */ --z-base: 1; --z-sticky: 40; --z-header: 90; --z-drawer: 120; --z-overlay: 130; --z-toast: 200; } /* ---- No dark theme ------------------------------------------------------ Removed deliberately. The site commits to one light palette: every inverted block on the page (footer, CTA panel, proof strip) is inverted BY DESIGN against a light ground, and a dark theme turned those into dark-on-dark, which is the arrangement they were built to contrast with. The four dark panels below are therefore not a theme - they are part of the light one. */ /* ========================================================================== Inverted panels inside the light theme -------------------------------------------------------------------------- Four blocks are dark regardless of which theme is active: the footer, the CTA panel, the proof strip and the industry constraints panel. Text tokens tuned for a light ground are wrong inside them, and the contrast audit caught it: the eyebrow in .i-constraints measured 3.4:1, because --c-accent-text is the darker #0066CC chosen to survive a tinted light background and it is far too dark on #0B1020. Remapped here rather than in each component, so a fifth dark panel only has to be added to this list. In the dark theme these values are already what the tokens hold, so the block is a harmless no-op there. ========================================================================== */ .c-footer, .h-cta__panel, .c-proof, .i-constraints { --c-accent-text: #2F91FF; --c-ink-3: var(--c-invert-ink-2); }