/* EvolveDash design tokens. * * SOURCE: design/claude-design/latest/HOME ORIGINAL.dc.html and the five page-type templates beside * it, re-baselined 25 September 2026 (docs/BASELINE.md). The first version of * this file was counted out of `EvolveDash Black v4`, which Claude Design has * since moved to archive/; §3 of BASELINE.md lists what the redesign changed, * and every change below is one of its rows. * * EVERY VALUE HERE WAS COUNTED OUT OF THE DESIGN FILES, not copied from the * brief. The handoff names about twenty colours; the six files use eighty-six, * and the most-used text colour of all — #33323C, 183 uses — is one the * handoff never mentions. Where the brief and the files disagree, the FILES * win and the difference is noted at the token. * * EVERY RATIO IN THIS FILE WAS COMPUTED FROM THE HEX VALUES, not estimated, and * core/tests_design.py recomputes the ones that carry text. Where the design * itself falls short of WCAG AA the token says so, gives the measured figure, * and says what the build does instead. BASELINE.md §5 lists each departure. * * ONE THEME, AND NO DARK MODE. The owner, 26 September 2026: "we dont need * dark mode at all. companies website dont have that." Every reader sees * this palette whatever their system prefers, and `color-scheme: only light` * on :root also tells the browser not to darken the page by itself (Chrome's * automatic dark theme, Samsung Internet) and to draw form controls and * scrollbars light. * * TWO KINDS OF TOKEN, still. THEMED tokens (grounds, text) are the ones * `.ed-light` restates at the bottom, so a white card can reset them inside a * dark region. FIXED tokens — the header, the mega-menu, the closing slab, * every pill — carry their own ground with them. They live in :root only. */ :root { color-scheme: only light; /* ---- Brand ------------------------------------------------------------ * * #A80469 on #FFFFFF ................ 7.28:1 * #A80469 on #F4F4F7 (bg-alt) ....... 6.63:1 * #C40C7C on #FFFFFF ................ 5.69:1 * * `--ed-magenta-ink` is kept as a name because article.css reads it in seven * places; it resolves to the same value. A separate darker token would be a * distinction with no purpose. */ --ed-magenta: #A80469; --ed-magenta-ink: #A80469; /* THE PILLS, WHICH MUST NOT FOLLOW THE THEME. * * The redesign has TWO resting colours for a filled pill, and the files are * consistent about it even where the handoff is not (BASELINE.md §6): * * --ed-cta #C40C7C every in-page pill: slab, footer, forms * --ed-brand-surface #A80469 the header CTA and the skip link * --ed-cta-hover #4B0F9E the hover of BOTH * * #FFFFFF on #C40C7C ... 5.69:1 * #FFFFFF on #A80469 ... 7.28:1 * #FFFFFF on #4B0F9E ... 11.28:1 * * MEASURED DEFECT THIS PREVENTS. The pill used to be `var(--ed-magenta)`, * the magenta for TEXT, which the old dark theme remapped to #F25FA3 — * white on which was 3.03:1. A background is not text. These three are * fills, and stay put wherever they sit. */ --ed-cta: #C40C7C; --ed-cta-hover: #4B0F9E; --ed-brand-surface: #A80469; --ed-on-brand: #FFFFFF; /* THE MAIN BUTTON'S HOVER AND FOCUS (the owner, 4 October 2026; layout.css, * "The main button"). At rest the pill is --ed-cta with white words and a * white badge; on hover and keyboard focus it turns near-white, the light * page's own start colour, with a thin --ed-cta edge, --ed-cta words and * an --ed-cta badge. The words, the badge and the arrow cut out of it * pass on both, and so does the edge wherever the pill sits: * * #C40C7C on #FBFBFC ... 5.50:1 (the words and the badge, hovered) * #FFFFFF on #C40C7C ... 5.69:1 (the words and the badge, at rest) * #C40C7C on #FFFFFF ... 5.69:1 on #F4F4F7 ... 5.18:1 (the edge) * #FBFBFC on #0A0910 .. 19.17:1 (the hovered pill on a dark slab) */ --ed-cta-hover-fill: #FBFBFC; /* THE PILL'S PADDING, AND THE MAIN BUTTON'S BADGE (layout.css, "Buttons" * and "The main button"). The base pill's drawn 13px by 24px, which each * size, and a pill drawn to 44px, restates on itself; the badge's inset * from the pill's edge all round, and its gap from the words, which the * small pill restates for a smaller badge. The badge is the pill's height * less the inset twice, so it always sits concentric with the pill's end. */ --ed-btn-pad-y: 13px; --ed-btn-pad-x: 24px; --ed-btn-badge-inset: 6px; --ed-btn-badge-gap: 12px; /* Secondary. * * #6B21C4 on #FFFFFF ................ 7.96:1 * #4B0F9E on #FFFFFF ............... 11.28:1 * * --ed-purple is NOT themed, and no text is set in it: on the dark page * ground #6B21C4 is 2.49:1. Text links use --ed-link below. It fills the * one purple pill (white on it is 7.96:1) and colours the stat icons and a * card's hover border, which are not text. */ --ed-purple: #6B21C4; --ed-purple-deep: #4B0F9E; /* THE TEXT LINK ON A LIGHT SECTION, and the themed token the note above * asked for: the homepage is the first page to set text in #6B21C4. It is * for light grounds only: on the dark page ground it is 2.49:1. * * #6B21C4 on #FFFFFF ... 7.96:1 on #F4F4F7 ... 7.25:1 * #4B0F9E on #FFFFFF .. 11.28:1 (hover) */ --ed-link: #6B21C4; --ed-link-hover: #4B0F9E; /* BRAND PURPLE ON DARK, the same role on a dark ground (design/claude- * design/latest/CLAUDE.md: "Brand purple has a dark-ground shade too * (#BE88FF), used for labels and eyebrows on dark"). 7.70:1 on the dark * page and 2.58:1 on white, so it never appears on a light ground. */ --ed-purple-on-dark: #BE88FF; /* The same, as a triplet for a glow's own alpha: the hub and brand pages' * hero glow (Products.dc.html, Industries.dc.html, Technology.dc.html: * "rgba(190,136,255,0.24)"), as the practices' dark glows below. */ --ed-purple-on-dark-glow: 190 136 255; /* SMALL TEXT ON A DARK GROUND IS NEVER BRAND MAGENTA AND NEVER PLAIN WHITE * (HANDOFF.md and CLAUDE.md, 28 September, night: #C40C7C is 3.69:1 on * black, 3.48:1 on #0A0910, 2.90:1 at the top of the Aubergine menu and * about 2.1:1 in the slabs' magenta glows). The design's roles, measured * where each sits: * * eyebrows brand purple on dark, #BE88FF (--ed-slab-eyebrow, * the slabs' role), led by an 18x2px magenta-to-purple * bar (--ed-eyebrow-bar) * labels in a card royal blue: #3341D6 on light (--ed-card-label), * #9199FF on dark (--ed-card-label-on-dark) * numbers --ed-on-dark #FFFFFF, never dimmed * non-text that clears 3:1 (a ring, a rule, a fill, a spotlight) * --ed-cta #C40C7C, exactly as designed * * and, by the owner's rule of 25 September, where a design colour fails, * the neutral --ed-label-on-dark #C8C8D0: every ring where #C40C7C drops * below 3:1. #BE88FF passes everywhere a dark eyebrow sits, the mesh * slabs' 48% magenta glow included (4.69:1 at worst). * * #BE88FF on #0A0910 ... 7.70:1 on #1C0F2D ... 7.06:1 * #9199FF on #0A0910 ... 7.74:1 on #100D18 ... 7.51:1 * #C8C8D0 on #000000 ... 12.63:1 on #0A0910 ... 11.92:1 * on #28163D (menu) ... 9.93:1 slab glow, worst ... 7.31:1 */ --ed-eyebrow-bar: linear-gradient(90deg, #C40C7C, #6B21C4); --ed-eyebrow-bar-rtl: linear-gradient(270deg, #C40C7C, #6B21C4); --ed-label-on-dark: #C8C8D0; /* ROYAL BLUE, A ROLE COLOUR with two shades (HANDOFF.md, "Colour roles", * 28 September): the small labels inside cards and the stat cards' source * bylines. #3341D6 is 7.32:1 on white and 6.67:1 on #F4F4F7, and 2.71:1 * on #0A0910, so on dark it takes its dark shade, #9199FF. */ --ed-blue: #3341D6; --ed-blue-on-dark: #9199FF; /* THE ROLES, read by name; each points at its palette colour, so a role * moves everywhere at once. A label inside a card on a light ground and * on a dark one (not the ring neutral, --ed-label-on-dark), and the ink * of a dot-led tag on a light card (layout.css, .ed-tag). */ --ed-card-label: var(--ed-blue); --ed-card-label-on-dark: var(--ed-blue-on-dark); --ed-tag-ink: var(--ed-link); /* Focus. #C40C7C is 5.69:1 on white and 3.69:1 on black, so it is the ring * on the light pages and in the header, drawer, hero and the dark slabs * where it clears SC 1.4.11's 3:1. Where it does not — the Aubergine menu, * the closing slab's glow and the technology slab — the component sets * --ed-focus to --ed-label-on-dark. core/tests_design.py measures each. */ --ed-focus: #C40C7C; /* ---- Text on light grounds -------------------------------------------- * Ordered by contrast on white. `--ed-body` is the one the brief omits, and * the handoff's names are inverted: it calls #44444A "body text" (the files * use it for ledes) and #5E5E67 "faint" although it is darker than #67676F. */ --ed-ink: #17171A; /* 17.89:1 — headings */ --ed-body: #33323C; /* 12.63:1 — body copy, 183 uses, THE workhorse */ --ed-dek: #44444A; /* 9.67:1 — ledes and secondary copy */ --ed-byline: #52525A; /* 7.74:1 */ --ed-faint: #5E5E67; /* 6.42:1 — the Industries tiles' pressure line */ --ed-sub: #61616A; /* 6.13:1 — labels, mono headings, form labels */ --ed-muted: #67676F; /* 5.61:1 — the lightest that still passes */ /* ---- Text on dark grounds --------------------------------------------- * Measured against #0A0910, the darkest page ground in the design. */ --ed-on-dark: #FFFFFF; /* 19.82:1 */ --ed-on-dark-soft: #F4F4F5; /* 18.03:1 — nav items */ --ed-on-dark-mute: #C9C6D2; /* 11.79:1 — drawer sub-links */ --ed-on-dark-faint: #A8A8B0; /* 8.39:1 — the floor; nothing lighter */ /* ---- Grounds ---------------------------------------------------------- * #F4F4F5 and #F4F4F7 differ by ONE DIGIT and are not interchangeable: the * first is the nav text colour, the second a light background. */ --ed-bg: #FFFFFF; --ed-bg-alt: #F4F4F7; --ed-surface: #FFFFFF; /* The first light section after the homepage hero starts a shade off white * (HOME:618), so the 3px rule under the hero reads as the seam. */ --ed-bg-start: #FBFBFC; /* The dark grounds, each with a job. The nav is pure black; the page body * on dark pitch pages is #0A0910; panels sit at #0D0D10. */ --ed-nav: #000000; --ed-dark: #0A0910; --ed-dark-panel: #0D0D10; /* ---- Hairlines -------------------------------------------------------- * Solid hex rather than rgba, because that is what the design uses and an * alpha border over a gradient is a different colour at each end. */ --ed-border: #E4E4E7; /* the one card border */ --ed-border-soft: #EFEEF2; --ed-rule: #D6D6DA; /* rules; NOT a field edge: --ed-input-line */ --ed-rule-soft: #DEDEE1; /* the footer's column rule */ --ed-border-dark: #241F33; --ed-border-dark-soft: #33333A; /* drawer rules, burger outline */ --ed-hairline: #E6E6E9; /* the press block's top rule (HOME:885) */ /* THE EDGE OF A TEXT FIELD, which is its only boundary, so WCAG 1.4.11 wants * 3:1 against what is beside it. The design's #D6D6DA underline (lead form) * is 1.45:1 on white and its #DEDEE1 newsletter border 1.23:1 on the footer; * #767680 is 4.49:1 on white and 3.32:1 at the footer's darkest corner. * The hover is * --ed-byline, the focus --ed-magenta or --ed-link (BASELINE.md §5). */ --ed-input-line: #767680; /* The newsletter field's focus halo, round its --ed-link edge (HOME:114). */ --ed-field-focus-ring: 0 0 0 4px rgba(107, 33, 196, 0.12); /* A FORM ERROR. The design has no error state at all. #B42318 is 6.57:1 on * white and 4.85:1 at the footer's darkest corner. Never the only cue: * every error is also words. The summary above a form sits on a 6% wash * of it. */ --ed-error: #B42318; --ed-error-wash: color-mix(in srgb, var(--ed-error) 6%, transparent); --ed-chip-bg: #F4F4F7; /* ---- The footer ground ------------------------------------------------ * #FFFFFF -> #EDEDF1 with one bottom-left fade (HOME:1266, identical on all * six files). The handoff also says #EFEEF3 in one place; no file uses it. * The fade is 8% ink, which darkens the corner under the legal row to about * #DDDDE1. --ed-sub still clears 4.5:1 there: 4.53:1 at the darkest pixel, * 4.64:1 where the copyright line actually sits. */ --ed-footer-end: #EDEDF1; --ed-footer-fade: rgba(23, 23, 26, 0.08); /* The back-to-top tab. #3C3C44 on #DCDCE3 is 8.01:1. */ --ed-tab-bg: #DCDCE3; --ed-tab-ink: #3C3C44; /* ---- The cookie card (core/templates/core/consent_card.html) ----------- * Not in the design, which draws only a "Cookies" link in the footer: the * owner's card, 3 October 2026 (docs/BASELINE.md §5). A white card in the * palette's own text, link and pill colours. It sits --ed-consent-inset * from the bottom-left corner, which on a phone is the page gutter (20px * at 320-416px), so there it runs the width of the content; from 640px it * is --ed-consent-w wide. The shadow lifts it off a dark slab as well as a * white section. * * --ed-consent-space is what the card covers at the bottom of the viewport, * its inset included, written on by analytics.js while the card * shows; layout.css keeps focus and the end of the page clear of it. */ --ed-consent-w: 400px; --ed-consent-inset: min(var(--ed-gutter), 24px); --ed-consent-shadow: 0 1px 2px rgba(20, 18, 26, 0.06), 0 18px 40px -16px rgba(20, 18, 26, 0.32); --ed-consent-space: 0px; /* ---- The header ------------------------------------------------------- * Black in every state and every theme, the homepage included (26 * September; the design's "Transparent over hero" default is open, * docs/BASELINE.md §6). * * The open and hover border is #C40C7C: 3.69:1 on black, 2.68:1 on the * #25252B fill it sits on. It is never the only cue — the fill changes and * the caret turns — so it is decoration, not a boundary a reader needs. */ --ed-nav-line: #C40C7C; --ed-header-h: 68px; /* The wordmark's drawn height, in the bar and the footer (HOME:196). */ --ed-logo-h: 26px; /* THE SOLID BAR BLURS WHAT SCROLLS UNDER IT, as drawn: the design's bar * takes this filter whenever it is solid, and none while it is clear over * the hero. */ --ed-bar-backdrop: saturate(180%) blur(18px); /* THE STICKY BLOCK: the bar, and the 46px context bar under it on a * sub-page (.ed-has-ctxbar, below). Every anchor clears it by 24px, as the * design clears the bar (HOME:86). */ --ed-sticky-h: var(--ed-header-h); /* THE BAR'S TIERS (27 September): nav items at 95% white (18.76:1 on the * black bar), search at 74% (11.18:1), both #F4F4F5 on hover, the files' * --nav-ink. A nav item hovered or open takes the neutral #25252B fill with * the magenta border (HANDOFF.md, "Header", 27 September, second update); * #F4F4F5 on it is 13.86:1. The language button takes the fill alone, * never the border. */ --ed-nav-item: rgba(255, 255, 255, 0.95); --ed-nav-util: rgba(255, 255, 255, 0.74); --ed-nav-hover-fill: #25252B; /* The pill round the phone menu's current row, either side of its label: * the drawer's narrowest gutter is 20px, so 8px of it stays clear. */ --ed-drawer-pill-pad: 12px; /* ---- The mega-menu: one floating card, Aubergine ---------------------- * * FROM THE HANDOFF'S OWN FIGURES (HANDOFF.md, "Mega-menu panel"): the * surface #28163D -> #1C0F2D, the 1px white outline at 18%, the 8px drop, * the inset and radius below, the card hover border at 40% white and a fill * 3% stronger than rest. * * TEXT TIERS, from the designer's 27 September update: headings, row * names and card titles rest at 95% white; every list item, row * description and the rest of a card at 74%; mono group labels at 60%. * Everything in a hovered link or card turns full white, and a hovered or * focused link draws the underline below. No fill, no weight change, no * tint, no nudge. * * Measured on BOTH ends of the gradient, the lighter end being the worst: * * #FFFFFF 16.50:1 anything hovered * white at 95% 14.92:1 headings, row names, card titles * white at 74% 9.45:1 list items, descriptions, card text * white at 60% 6.67:1 mono labels */ --ed-menu-top: #28163D; --ed-menu-bottom: #1C0F2D; --ed-menu-outline: rgba(255, 255, 255, 0.18); --ed-menu-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.15), 0 14px 28px -8px rgba(0, 0, 0, 0.25), 0 36px 72px -24px rgba(0, 0, 0, 0.38); --ed-menu-ink: #FFFFFF; --ed-menu-ink-1: rgba(255, 255, 255, 0.95); --ed-menu-ink-2: rgba(255, 255, 255, 0.74); --ed-menu-ink-3: rgba(255, 255, 255, 0.6); --ed-menu-card: rgba(255, 255, 255, 0.05); --ed-menu-card-line: rgba(255, 255, 255, 0.14); --ed-menu-card-hover: rgba(255, 255, 255, 0.09); --ed-menu-card-hover-line: rgba(255, 255, 255, 0.4); --ed-menu-card-glow: 0 0 14px -2px rgba(107, 33, 196, 0.55); /* THE HOVER UNDERLINE (HANDOFF.md, "Menu link hover underline", 27 and * 28 September): 1.5px in the hover text colour, wiping in from the * inline start in 0.38s, under the link's text only. It replaced the * faint magenta fill, which no rule uses any more. */ --ed-wipe-thickness: 1.5px; --ed-wipe-duration: 0.38s; --ed-ease-wipe: cubic-bezier(0.65, 0, 0.35, 1); /* AN INLINE LINK'S UNDERLINE, a link inside a sentence (an article's * body, the short notices): this thick at rest, swelling to the second * on hover and keyboard focus over --ed-wipe-duration (the owner, 4 * October). */ --ed-underline: 1px; --ed-underline-hover: 2px; --ed-radius-menu: clamp(18px, 1.8vw, 24px); /* The 8px between a control and what opens from it: the bar and a panel, * and either language picker and its list (HOME:214, 1601). */ --ed-menu-gap: 8px; /* ---- The closing slab: the last panel on every page ------------------- * The mesh is byte-identical in all six design files (HOME:1206): magenta * top-left, purple top-right, blue and deep purple along the bottom, on * near-black. * * THE EYEBROW is brand purple on dark, #BE88FF, since the 28 September * night delivery, led by the magenta-to-purple bar, as every dark eyebrow * is: 4.69:1 at worst in the 48% magenta glow (core/tests_design.py), where * the design's earlier #C40C7C (2.14:1) and #B781FF (4.40:1) failed. * * THE HOMEPAGE'S CONTACT SLAB lifts its magenta glow above the slab's top * edge (at 4% -34%, 28 September), so its gradient heading sits on the * dark base; every other page's closing slab keeps it at 10% 6%. * * #FFFFFF on the mesh >= 12.08:1 h2 * #BE88FF on the mesh >= 4.69:1 eyebrow * white at 86% >= 9.19:1 lede, quiet link * white at 55% (ghost border) >= 4.50:1 non-text */ --ed-slab-ground: #0B0914; --ed-slab-mesh: radial-gradient(56% 72% at 10% 6%, rgba(196, 12, 124, 0.48) 0%, rgba(196, 12, 124, 0) 62%), radial-gradient(50% 68% at 92% 14%, rgba(107, 33, 196, 0.52) 0%, rgba(107, 33, 196, 0) 60%), radial-gradient(62% 80% at 80% 106%, rgba(51, 65, 214, 0.44) 0%, rgba(51, 65, 214, 0) 62%), radial-gradient(46% 62% at 18% 104%, rgba(75, 15, 158, 0.42) 0%, rgba(75, 15, 158, 0) 60%), linear-gradient(168deg, #120E22 0%, #0B0914 56%, #0E0C1C 100%); --ed-contact-mesh: radial-gradient(56% 72% at 4% -34%, rgba(196, 12, 124, 0.48) 0%, rgba(196, 12, 124, 0) 62%), radial-gradient(50% 68% at 92% 14%, rgba(107, 33, 196, 0.52) 0%, rgba(107, 33, 196, 0) 60%), radial-gradient(62% 80% at 80% 106%, rgba(51, 65, 214, 0.44) 0%, rgba(51, 65, 214, 0) 62%), radial-gradient(46% 62% at 18% 104%, rgba(75, 15, 158, 0.42) 0%, rgba(75, 15, 158, 0) 60%), linear-gradient(168deg, #120E22 0%, #0B0914 56%, #0E0C1C 100%); --ed-slab-eyebrow: var(--ed-purple-on-dark); /* The inquiry card rests with only a faint shadow, so nothing darkens its * edge light (HANDOFF.md, "Project inquiry glow", 28 September; home.css). */ --ed-leadform-rest: 0 1px 2px rgba(0, 0, 0, 0.2); /* THE INQUIRY CARD'S EDGE LIGHT (HANDOFF.md, "Project inquiry glow"; * home.css draws it): a halo 14px out, blurred 30px, and a crisp 2px ring, * both turning one turn every 8s on hover and every 3.5s while a field * inside has focus. */ --ed-glow-halo-inset: -14px; --ed-glow-halo-radius: 30px; --ed-glow-blur: 30px; --ed-glow-ring-inset: -2px; --ed-glow-radius: 20px; --ed-glow-fade: 0.35s; --ed-glow-turn: 8s; --ed-glow-turn-focus: 3.5s; /* THE WHAT WE DO CARDS' HOVER GLOW (HANDOFF.md, "Service card hover glow", * 28 September, night): seven lights, one per practice in its light-ground * glow colour (the --ed-practice-*-glow triplets below) plus brand magenta, * in this order round the card: Web, Design & UX, AI, Data, Mobile & XR, * Growth, brand. Each sits 9px out in its own direction, with a 14px blur * and a -10px spread, at the strength the design gives it, and the lights * orbit once every --ed-duration-orbit; home.css draws them. */ --ed-cta-glow: 196 12 124; --ed-orbit-radius: 9px; --ed-orbit-blur: 14px; --ed-orbit-spread: -10px; --ed-orbit-a-web: 0.3; --ed-orbit-a-design: 0.36; --ed-orbit-a-ai: 0.3; --ed-orbit-a-data: 0.4; --ed-orbit-a-mobile: 0.34; --ed-orbit-a-growth: 0.42; --ed-orbit-a-brand: 0.32; /* THEIR AURORA SILK (the owner, 7 October): on hover and keyboard focus * each card's two drawn glows sway toward their own side by up to this * share of the card's width, lean out up to this far, widen by up to this * share, and rise this much taller from the card's bottom edge, give or * take the wave. The third, softer glow is the card's color at this * strength; as it shows it blooms this much larger, and it wanders across, * climbs, bobs (shares of the card) and turns this far. * The timings are under "Motion". home.css draws it. */ --ed-aurora-drift: 10%; --ed-aurora-lean: 5deg; --ed-aurora-spread: 0.1; --ed-aurora-rise: 0.26; --ed-aurora-wave: 0.14; --ed-aurora-glow: 0.14; --ed-aurora-bloom: 0.5; --ed-aurora-wander: 12%; --ed-aurora-climb: 9%; --ed-aurora-bob: 6%; --ed-aurora-twist: 10deg; /* WHITE IN TIERS ON THE DARK SLABS, as the design draws them: a layer's * top rule, then text from 90% down to the ghost pill's 55% edge and the * hero's 50% dots. */ --ed-on-dark-rule: rgba(255, 255, 255, 0.22); --ed-on-dark-90: rgba(255, 255, 255, 0.9); --ed-on-dark-86: rgba(255, 255, 255, 0.86); --ed-on-dark-72: rgba(255, 255, 255, 0.72); --ed-on-dark-70: rgba(255, 255, 255, 0.7); --ed-on-dark-58: rgba(255, 255, 255, 0.58); --ed-on-dark-56: rgba(255, 255, 255, 0.56); --ed-on-dark-55: rgba(255, 255, 255, 0.55); --ed-on-dark-50: rgba(255, 255, 255, 0.5); --ed-ghost-line: rgba(255, 255, 255, 0.55); /* The quieter outline beside a filled pill (the Mid CTA): 40% white, * 3.74:1 on the slab, over the 3:1 a boundary needs. */ --ed-ghost-line-quiet: rgba(255, 255, 255, 0.4); /* The 3px rule under every hero. */ --ed-rule-brand: linear-gradient(90deg, #A80469 0%, #6B21C4 54%, #4B0F9E 100%); /* ---- Practice colours ------------------------------------------------- * TWO SHADES PER PRACTICE (HANDOFF.md, "Practice colors (final)", 28 * September, which supersedes every earlier colour note): a light-ground * shade for #FFFFFF and #F4F4F7 and a dark-ground shade for #0A0910 and the * Aubergine #1C0F2D. No one colour passes AA text contrast on both kinds * of ground, so a shade is never used on the other's ground and no other * tint is invented. WAYFINDING ONLY: eyebrows, numbered labels, icons, the * context-bar underline, glows, that practice's homepage card. Never a CTA, * a background or body text. * * Every page of a practice takes its pair, and so does a technology page, * from the practice it belongs to: Tech - Swift, under Mobile & XR, takes * the dark violet on its dark sections (the owner, 27 September; HANDOFF.md * and design/claude-design/latest/CLAUDE.md now say the same). The Technology hub spans every * practice and keeps its burgundy, --ed-hub-line below. * * 28 SEPTEMBER: Data and Growth swapped colours (Data green, Growth cyan), * and the dark shades are fully saturated rather than pastel: Web's and * AI's text at about 5:1, the rest at 7:1. THAT NIGHT Mobile & XR moved * from indigo to a violet, #5241D0 on light and #AD92E9 on dark, one dark * value for its text, icons and lines alike. * * In card order, 01-06, measured (core/tests_design.py); the over-glow * shade on the darkest ground its card's glows make under the CTA, sampled * in Chrome (1 October, 320-1920px); the dark shade on #0A0910 / #1C0F2D / * the mega-menu's lighter end #28163D: * * light on #FFF/#F4F4F7 over glow dark on dark * Web & cloud #1D4FD7 6.66 / 6.07 #1E40AF 7.00 #1884FF 5.46 / 5.00 / 4.55 * AI & ML #7E22CE 6.98 / 6.36 #6B21A8 6.88 #C34CFF 5.47 / 5.02 / 4.56 * Mobile & XR #5241D0 6.94 / 6.32 #3E319E 8.07 #AD92E9 7.61 / 6.98 / 6.34 * Data #3F7D17 5.05 / 4.60 #2F5E11 6.42 #49B800 7.68 / 7.04 / 6.40 * Growth #0E7490 5.36 / 4.88 #155E75 6.10 #00B0D4 7.70 / 7.06 / 6.41 * Design & UX #C2410C 5.18 / 4.72 #7C2D12 7.79 #FF7A38 7.64 / 7.00 / 6.36 * * ONE NON-TEXT ACCENT: Growth's icon, border and glow on light are #0891B2 * (3.68:1 on white), its text #0E7490; the accent is never text. Links over * a card glow take the over-glow shade, never the base one. * * WITH NOTHING TO SPARE: Web's and AI's dark shades are 4.55:1 on the * menu's #28163D, so neither sits on a glow on the Aubergine. * * THE GREY LIMIT: Data's #3F7D17 is 4.33:1 and Design & UX's #C2410C * 4.43:1 on the footer's #EDEDF1, so neither is ever text there. */ --ed-practice-web-on-light: #1D4FD7; --ed-practice-web-over-glow: #1E40AF; --ed-practice-web-on-dark: #1884FF; --ed-practice-ai-on-light: #7E22CE; --ed-practice-ai-over-glow: #6B21A8; --ed-practice-ai-on-dark: #C34CFF; --ed-practice-mobile-on-light: #5241D0; --ed-practice-mobile-over-glow: #3E319E; --ed-practice-mobile-on-dark: #AD92E9; --ed-practice-data-on-light: #3F7D17; --ed-practice-data-over-glow: #2F5E11; --ed-practice-data-on-dark: #49B800; --ed-practice-growth: #0891B2; --ed-practice-growth-on-light: #0E7490; --ed-practice-growth-over-glow: #155E75; --ed-practice-growth-on-dark: #00B0D4; --ed-practice-design-on-light: #C2410C; --ed-practice-design-over-glow: #7C2D12; --ed-practice-design-on-dark: #FF7A38; /* ---- The Technology hub (Technology.dc.html) --------------------------- * The hub spans every practice, so it keeps its own burgundy, in the * context-bar underline, the tints and the pill edges. NEVER TEXT: #8E1B3A * is 2.24:1 on #0A0910, and the drawn #B8304A labels 3.36:1, so hub labels * are the neutral --ed-label-on-dark (docs/BASELINE.md §5). Named hub-*, not * practice-*: it is no practice's colour. */ --ed-hub-line: #8E1B3A; --ed-hub-glow: 142 27 58; /* ---- The context bar under the header on sub-pages --------------------- * As drawn in the service and technology files (dark) and Trust (light). * The light bar is the palette's own: a --ed-border line, a --ed-muted * label, a --ed-rule divider and --ed-dek links hovering to --ed-ink; only * its hover underline is new. The current page is underlined in its accent * (pagekit.css). */ --ed-ctx-bg: #0D0D11; --ed-ctx-line: #23222A; --ed-ctx-divider: #2E2D36; --ed-ctx-label: #8E8E99; /* 5.98:1 on #0D0D11 */ --ed-ctx-hover-line: #4A4956; --ed-ctx-light-hover-line: #C9C9D2; /* ---- A document's status pill (Trust.dc.html): ink, ground, edge ------ */ --ed-status-pending-ink: #8A6A20; /* 4.68:1 on its ground */ --ed-status-pending-bg: #FDF6E3; --ed-status-pending-line: #F0E4C0; --ed-status-available-ink: #0B5B3B; /* 7.31:1 on its ground */ --ed-status-available-bg: #E7F6EE; --ed-status-available-line: #BFE5D2; /* ---- The homepage ------------------------------------------------------ * FIXED, every one: each is the ground or the glow of a component that * carries its own ground — a dark slab or a white card — and was measured * that way. Values are the * design's own (HOME line numbers beside each); home.css reads them. */ /* The hero (HOME:590-595). The scrim is two layers, the first on top: a * vertical fade, and a 9deg layer that darkens the corner where the copy * sits, written once here (--ed-hero-scrim-angle) and the same under * Arabic, as drawn. The two scrims differ only in the fade's top stop. * * WITH A PHOTOGRAPH THE TOP OF THE SCRIM IS DARKER: 0.72 rather than the * design's 0.42. Over a white photo — the worst case — the design's scrim * puts the eyebrow at 3.25:1 and the transparent header's links at 3.14:1. * At 0.72, measured on the built page at 320-1920px, they are 5.98:1 and * 8.89:1 at worst. Without a photo — the design as supplied — the design's * own value stands: eyebrow 9.05:1, nav 16.53:1. */ --ed-hero-scrim-fade: rgba(13, 13, 16, 0.84) 46%, rgba(13, 13, 16, 0.92) 100%; --ed-hero-scrim-angle: linear-gradient(9deg, rgba(13, 13, 16, 0.97) 3%, rgba(168, 4, 105, 0.62) 52%, rgba(0, 0, 0, 0.08) 92%); --ed-hero-scrim: linear-gradient(180deg, rgba(13, 13, 16, 0.42) 0%, var(--ed-hero-scrim-fade)), var(--ed-hero-scrim-angle); --ed-hero-scrim-photo: linear-gradient(180deg, rgba(13, 13, 16, 0.72) 0%, var(--ed-hero-scrim-fade)), var(--ed-hero-scrim-angle); /* The hero's own whites (HOME:691-706): the stages line over the title at * 70% (the eyebrow measured above), the proof row's dots at 50%, and the * grid's lines at 7%, which the grid layer halves again. */ --ed-hero-eyebrow: var(--ed-on-dark-70); --ed-hero-dot: var(--ed-on-dark-50); --ed-hero-grid: rgba(255, 255, 255, 0.07); /* The hero's slides (the owner, 4 October 2026): each shows this long * before the next, the pause button's ring filling over it, and slides, * like tab panels, change by this crossfade. js/home.js reads both. */ --ed-hero-slide: 8s; --ed-duration-crossfade: 0.6s; /* THE INTERNAL PAGE'S HERO BAND (pages/static/css/page.css; the hero of * Products.dc.html, Industries.dc.html, Technology.dc.html and every * practice page, 28 September): the dark page ground under two glows, the * page's own colour at the top end and brand magenta at the foot, each a * triplet read at these alphas. Its breadcrumb: the link at 74% white and * the separator at 62%, as drawn: 10.81:1 and 7.75:1 on #0A0910, and still * 7.33:1 and 5.62:1 with both glows at full strength under them, a bound * no point of the hero reaches (pages/tests_frame.py). */ --ed-pagehero-glow: 0.24; --ed-pagehero-cta-glow: 0.16; --ed-crumb-ink: rgba(255, 255, 255, 0.74); --ed-crumb-sep: rgba(255, 255, 255, 0.62); /* TWO DARK BANDS NEVER TOUCH (HANDOFF.md, "Internal page template"): on a * page too short for a light section between them, a white gap this tall, * the design's own between the Products Mid CTA and "How it starts". */ --ed-dark-gap: clamp(40px, 4.4vw, 72px); /* The practice glows, as RGB triplets so each use sets its own alpha, in * card order: the light shade's on white cards (HOME:759-824), the dark * shade's on dark panels. The card colours and inks are in "Practice * colours" above. Then the rail: its track and button edge, the fade at * each end of the scroller and the track's inset shadow. */ --ed-practice-web-glow: 29 79 215; --ed-practice-ai-glow: 126 34 206; --ed-practice-mobile-glow: 82 65 208; --ed-practice-data-glow: 63 125 23; --ed-practice-growth-glow: 8 145 178; --ed-practice-design-glow: 194 65 12; --ed-practice-web-dark-glow: 24 132 255; --ed-practice-ai-dark-glow: 195 76 255; --ed-practice-mobile-dark-glow: 173 146 233; --ed-practice-data-dark-glow: 73 184 0; --ed-practice-growth-dark-glow: 0 176 212; --ed-practice-design-dark-glow: 255 122 56; --ed-rail-btn-line: #D6D3DE; --ed-rail-fade: 74px; /* An arrow with nowhere further to go: the press strip's at either end * (home.js, aria-disabled; the What we do arrows loop and never are). An * unavailable control is exempt from contrast minimums (WCAG 1.4.3, * 1.4.11); the focus ring around it is not, and keeps full strength. */ --ed-rail-btn-disabled: #B4B4BD; /* Card shadows: the rail and insight cards (HOME:712, 1186), the stat cards * (HOME:679) and the engagement cards (HOME:1140), each at rest and hover. */ /* The language picker's list, a small white sheet under the globe * (HANDOFF.md, "Language picker"; HOME:152). */ --ed-lang-shadow: 0 10px 24px -12px rgba(20, 18, 26, 0.28); /* The footer's, opening upward (HOME:1601). */ --ed-flang-shadow: 0 18px 40px -18px rgba(20, 18, 26, 0.28); --ed-card-shadow: 0 1px 2px rgba(20, 18, 26, 0.05); --ed-card-shadow-hover: 0 20px 40px -22px rgba(20, 18, 26, 0.28); /* THE THREE WAYS' SEGMENTED PILL (the owner, 4 October 2026): the light- * grey track the three tabs sit in, and the soft shadow that raises the * chosen one's white pill off it. The others' words are --ed-muted, 4.85:1 * on the track (home/tests_ways.py measures it). */ --ed-segment-track: var(--ed-border-soft); --ed-segment-shadow: 0 1px 2px rgba(20, 18, 26, 0.08), 0 4px 12px -4px rgba(20, 18, 26, 0.18); /* THE LIGHT GROUNDS (HANDOFF.md, "Light grounds carry a soft gradient"): * a vertical #FFFFFF / #F4F4F7 gradient, each section starting on the * colour the one before it ended on, under one grey corner fade, the * corners alternating down the page. One ground per drawn section, so * every page that draws the section reads it by name. Two of the fades * recur, and are written once. */ --ed-fade-bottom-start: radial-gradient(70% 108% at 4% 100%, rgba(23, 23, 26, 0.07) 0%, transparent 60%); --ed-fade-top-end: radial-gradient(78% 116% at 96% 2%, rgba(23, 23, 26, 0.09) 0%, rgba(23, 23, 26, 0) 58%); --ed-ground-about: var(--ed-fade-bottom-start), linear-gradient(180deg, var(--ed-bg-start) 0%, var(--ed-bg-alt) 100%); --ed-ground-services: radial-gradient(76% 112% at 96% 4%, rgba(23, 23, 26, 0.08) 0%, transparent 60%), linear-gradient(180deg, var(--ed-bg-alt) 0%, var(--ed-bg) 100%); --ed-ground-proof: var(--ed-fade-bottom-start), linear-gradient(180deg, var(--ed-bg) 0%, var(--ed-bg-alt) 100%); --ed-ground-outcomes: radial-gradient(74% 110% at 96% 6%, rgba(23, 23, 26, 0.07) 0%, transparent 58%), linear-gradient(180deg, var(--ed-bg-alt) 0%, var(--ed-bg) 100%); /* It follows the Mid CTA slab, the one section whose corner fade touches a * slab's edge: since slabs stop short of the viewport (2 October) the fade * met the white beside the slab in a hard line, so it fades in from white * over its first 160px. Every other section beside a slab meets it white. */ --ed-ground-how: linear-gradient(180deg, var(--ed-bg) 0, rgb(255 255 255 / 0) 160px), var(--ed-fade-top-end), linear-gradient(180deg, var(--ed-bg) 0%, var(--ed-bg-alt) 100%); --ed-ground-industries: radial-gradient(78% 116% at 4% 2%, rgba(23, 23, 26, 0.09) 0%, transparent 58%), linear-gradient(180deg, var(--ed-bg-alt) 0%, var(--ed-bg) 100%); --ed-ground-engage: radial-gradient(74% 112% at 4% 104%, rgba(23, 23, 26, 0.08) 0%, transparent 60%), linear-gradient(180deg, var(--ed-bg) 0%, var(--ed-bg-alt) 100%); /* The Insights ground (HOME:1169): on the homepage's #insights and under * every article's related cards; it ends white, against the closing slab. */ --ed-ground-insights: radial-gradient(74% 112% at 96% 4%, rgba(23, 23, 26, 0.08) 0%, transparent 60%), linear-gradient(180deg, var(--ed-bg-alt) 0%, var(--ed-bg) 100%); /* The article's head band: How we work's corner fade over a gradient that * ends white where the body starts (in place of ITW's violet and cyan * wash). */ --ed-ground-article-head: var(--ed-fade-top-end), linear-gradient(180deg, var(--ed-bg-alt) 0%, var(--ed-bg) 100%); /* AN IMPORTED PAGE'S BODY (pages/static/css/page.css): the ground the * design draws the first section after every internal page's hero on * (Products, Technology, Tech - Swift, Design - UX: the corner fade at * 96% 4% over #F4F4F7 to #FFFFFF), which is the What we do section's, so * it is that token. Painted over at most the first --ed-ground-reach of * the body, about one drawn section, and white below: stretched down a * 9,000px privacy policy, the corner fade would grey its whole right side. */ --ed-ground-page: var(--ed-ground-services); --ed-ground-reach: 960px; /* The tallest a picture in an imported page's body is drawn (page.css): * most of the screen, so a phone screenshot never runs past it. */ --ed-figure-max-h: 80svh; /* The footer (HOME:1521): white to --ed-footer-end, with its own * bottom-left fade (--ed-footer-fade, "The footer ground" above). */ --ed-ground-footer: radial-gradient(64% 104% at 8% 104%, var(--ed-footer-fade) 0%, transparent 60%), linear-gradient(180deg, var(--ed-bg) 0%, var(--ed-footer-end) 100%); --ed-stat-shadow: 0 0 0 1px rgba(20, 18, 26, 0.07), 0 1px 2px rgba(20, 18, 26, 0.06), 0 12px 28px -16px rgba(20, 18, 26, 0.28); --ed-stat-shadow-hover: 0 0 0 1px rgba(107, 33, 196, 0.55), 0 2px 4px rgba(20, 18, 26, 0.06), 0 22px 40px -20px rgba(20, 18, 26, 0.36); --ed-model-shadow: 0 1px 2px rgba(20, 18, 26, 0.04), 0 12px 32px -20px rgba(20, 18, 26, 0.18); --ed-model-shadow-hover: 0 1px 2px rgba(20, 18, 26, 0.04), 0 22px 44px -22px rgba(20, 18, 26, 0.28); /* A card that turns over (HOME:941, 1275; HANDOFF.md, 27 September): the * back is near-black with a magenta glow in its far corner, bottom-right, * mirrored under Arabic. On it: the "Next step" label, a label inside a * card on dark, --ed-card-label-on-dark #9199FF, 7.74:1 (6.23:1 at the * glow's peak, #420A30), white 86% 14.6:1 (11.97:1 at the peak); its ring * is the neutral, since #C40C7C falls to 2.80:1 at the peak. The front's * quote mark is decoration and never text. Both faces turn in a * --ed-perspective of depth, as the sample document tilts. */ --ed-flip-back-ground: #0A0910; --ed-flip-back-glow: radial-gradient(90% 90% at 100% 100%, rgba(196, 12, 124, 0.3) 0%, rgba(196, 12, 124, 0) 62%); --ed-flip-back-glow-rtl: radial-gradient(90% 90% at 0% 100%, rgba(196, 12, 124, 0.3) 0%, rgba(196, 12, 124, 0) 62%); --ed-flip-back-shadow: 0 20px 40px -22px rgba(20, 18, 26, 0.35); --ed-perspective: 1400px; /* THE PEEK (the owner, 4 October, 16:35; the design draws 7deg and no * lift): on a hover-capable screen with motion allowed, a card that can * turn over and has not turns this far toward the reader and lifts this * far, the What we do cards' 4px; mirrored under Arabic. Every flip card * reads these two, on every page. */ --ed-flip-tilt: 12deg; --ed-flip-lift: 4px; --ed-quote-mark: #C9C9D2; /* The press strip's soft shadow (HOME:1033). */ --ed-press-shadow: 0 1px 2px rgba(20, 18, 26, 0.05), 0 18px 36px -28px rgba(20, 18, 26, 0.25); /* An open Industries row's tile, hovered (HOME:1197). */ --ed-place-shadow-hover: 0 12px 24px -16px rgba(20, 18, 26, 0.3); --ed-stat-caption: #3F3E48; /* 10.53:1 on white */ /* The statement slab (HOME:898-905). The overlay covers the photo when * there is one and the slab's own glows when there is not, as drawn; since * 28 September both glows are the brand magenta and purple themselves. * * THE HIGHLIGHT is drawn #C40C7C -> #6B21C4 -> #C40C7C (28 September; it * was #8B2BD6 in the middle). The words are 30-48px bold, large text, so * 3:1 is the floor, and the brand purple is 2.49:1 on #0A0910: the middle * stop is #A45EE5, a brand purple at 4.99:1 (4.02:1 over a white photo), * which the build already used over a photo. The ends, #C40C7C, are 3.16:1 * at worst on the slab, 2.80:1 over a white photo (BASELINE.md §5, §6). * The homepage's contact heading takes the same gradient. */ --ed-statement-glow: radial-gradient(74% 110% at 84% 12%, rgba(196, 12, 124, 0.44) 0%, rgba(107, 33, 196, 0.26) 36%, rgba(10, 9, 16, 0) 70%), radial-gradient(60% 90% at 10% 96%, rgba(75, 15, 158, 0.32) 0%, rgba(10, 9, 16, 0) 62%); --ed-statement-overlay: linear-gradient(180deg, rgba(10, 9, 16, 0.4) 0%, rgba(10, 9, 16, 0.86) 42%, rgba(10, 9, 16, 0.9) 100%), radial-gradient(74% 110% at 84% 12%, rgba(196, 12, 124, 0.5) 0%, rgba(107, 33, 196, 0.34) 36%, rgba(10, 9, 16, 0.62) 72%), linear-gradient(180deg, rgba(10, 9, 16, 0.62) 0%, rgba(10, 9, 16, 0.78) 100%); --ed-statement-highlight: linear-gradient(96deg, #C40C7C 0%, #A45EE5 48%, #C40C7C 100%); --ed-statement-highlight-photo: var(--ed-statement-highlight); /* Its eyebrow: brand purple on dark at the design's 82% (HOME:910), and * at full strength over a photo. */ --ed-statement-eyebrow: color-mix(in srgb, var(--ed-purple-on-dark) 82%, transparent); --ed-statement-eyebrow-photo: var(--ed-purple-on-dark); /* The assessment slab and its sample document (HOME:908, 940). The glow * sits in the end corner, so it mirrors under Arabic. The document tilts * on hover, its shadow drawing in (28 September, night). */ --ed-offer-ground: #08070C; --ed-offer-glow: radial-gradient(46% 120% at 100% 100%, rgba(196, 12, 124, 0.3) 0%, rgba(196, 12, 124, 0) 62%); --ed-offer-glow-rtl: radial-gradient(46% 120% at 0% 100%, rgba(196, 12, 124, 0.3) 0%, rgba(196, 12, 124, 0) 62%); --ed-doc-ground: #100D18; /* The document's hairlines on its dark page: under the head, and between * its blocks (HOME:1100-1120). */ --ed-hairline-on-dark: rgba(255, 255, 255, 0.12); --ed-doc-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); --ed-doc-shadow-hover: 0 34px 64px -30px rgba(0, 0, 0, 0.65); /* The document's edge, head band, inks and redaction bars, as drawn. */ --ed-doc-edge: rgba(255, 255, 255, 0.16); --ed-doc-head: rgba(255, 255, 255, 0.04); --ed-doc-ink: rgba(255, 255, 255, 0.88); /* its text */ --ed-doc-ink-value: rgba(255, 255, 255, 0.8); /* a field's value */ --ed-doc-ink-faint: rgba(255, 255, 255, 0.45); /* the page number */ --ed-doc-redact: rgba(255, 255, 255, 0.3); /* THE DARK PLUM under the technology slab and the chosen Industries * sector, and the first stop of the slab's mesh: one colour, read by all. */ --ed-dark-plum: #0E0A18; /* The chosen Industries sector (3 October): a top sheen and a magenta-to- * purple glow rising from the start corner, on the plum, as the design's * commitment cards had it. */ --ed-sector-glow: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 14%), radial-gradient(112% 132% at 18% 112%, rgba(168, 4, 105, 0.72) 0%, rgba(107, 33, 196, 0.34) 44%, rgba(14, 10, 24, 0) 78%); --ed-sector-glow-rtl: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0) 14%), radial-gradient(112% 132% at 82% 112%, rgba(168, 4, 105, 0.72) 0%, rgba(107, 33, 196, 0.34) 44%, rgba(14, 10, 24, 0) 78%); /* The technology slab (HOME:1044, 1047, 1067): its mesh, the pointer * spotlight (a 340px circle) and the dark chips, at rest and on hover. */ --ed-stack-ground: var(--ed-dark-plum); --ed-stack-mesh: radial-gradient(58% 96% at 92% 2%, rgba(196, 12, 124, 0.5) 0%, rgba(196, 12, 124, 0) 58%), radial-gradient(54% 88% at 4% 98%, rgba(75, 15, 158, 0.42) 0%, rgba(75, 15, 158, 0) 60%), linear-gradient(160deg, var(--ed-dark-plum) 0%, #150A22 46%, #1C0A1A 100%); --ed-stack-spot: rgba(196, 12, 124, 0.13); --ed-stack-spot-size: 340px; --ed-chip-dark-bg: rgba(255, 255, 255, 0.055); --ed-chip-dark-line: rgba(255, 255, 255, 0.15); --ed-chip-dark-ink: rgba(255, 255, 255, 0.92); --ed-chip-dark-hover-bg: rgba(196, 12, 124, 0.16); --ed-chip-dark-hover-line: rgba(196, 12, 124, 0.75); --ed-stack-link-line: rgba(196, 12, 124, 0.6); /* The enquiry form's panel (HOME:1223, 36-39): a white card with a faint * white edge, whose shadow is drawn for the dark contact slab, a purple * ring on hover, and a stronger ring and halo while a field inside it has * focus. Off the slab (the contact page) it rests on the engagement * cards' lighter shadow. */ --ed-leadform-edge: rgba(255, 255, 255, 0.3); --ed-leadform-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.7); --ed-leadform-ring: 0 0 0 1px rgba(107, 33, 196, 0.35); --ed-leadform-focus: 0 0 0 1px #6B21C4, 0 0 0 6px rgba(107, 33, 196, 0.16); /* ---- Type: THE ONE PLACE FONTS ARE SET -------------------------------- * * EVERYTHING ABOUT TYPE IS HERE AND ONLY HERE: which fonts are loaded, the * family each role uses, the weights, and every size on the site. No * stylesheet names a family, a weight or a size of its own; each reads one * of these, and core/tests_fonts.py fails the build if one does not. * * TO CHANGE A FONT: * 1. edit its @font line below: any Google Fonts family, its weights and * styles in Google's own syntax, and the character sets to keep; * 2. edit the role it fills (--ed-font-display, -body or -mono); * 3. run `manage.py fetch_fonts`. It downloads the files into * evolvedash/static/fonts/ with each family's licence, and rewrites * fonts.css, the generated @font-face rules; * 4. commit all three. * The fonts are then served from this site, never from Google: see * core/fontsync.py for why. * * @font Archivo:wght@400..700 subsets=latin,latin-ext * @font IBM Plex Sans:ital,wght@0,400..700;1,400..700 subsets=latin,latin-ext * @font IBM Plex Mono:wght@400;500;600 subsets=latin,latin-ext * @font IBM Plex Sans Arabic:wght@400;500;600;700 subsets=arabic,latin * * THREE ROLES. Display (headings, pills, UI), body (reading text) and mono * (the small upper-case labels). Montserrat is gone: the handoff says "a * stray Montserrat was removed; do not bring it back", and IBM Plex Serif, * which every design file still requests, never renders there. * * THE THREE LANGUAGES. English and French are the latin sets: French's * accents, ç, œ and « » are all in them. Arabic is a script none of the three * families draws, so IBM Plex Sans Arabic — the same superfamily, designed to * sit beside Plex — follows each role as a per-character fallback, and * leads every role under Arabic (--ed-font-arabic). There its own Latin set * sets the line's strut and draws the Latin words (a brand name, a figure), * as the design's Google CSS has it. English and French pages never * download it: Archivo and the Plex faces cover Latin first. Tracking and * upper-case do not apply to Arabic (layout.css, "Scripts"). * * WEIGHTS AND STYLES ARE LOADED FOR WHAT THE CONTENT ASKS FOR. Plex Sans runs * to 700 and has an italic because the imported pages and articles use * , and default-bold headings in the body font. Until * 25 September those asked for a bold and an italic the site did not load, * and the browser drew semibold and a slanted upright instead. Mono stops at * 600: nothing sets it heavier. */ --ed-font-display: Archivo, "IBM Plex Sans Arabic", "Helvetica Neue", Helvetica, Arial, sans-serif; --ed-font-body: "IBM Plex Sans", "IBM Plex Sans Arabic", Archivo, Helvetica, Arial, sans-serif; --ed-font-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, Menlo, monospace; /* ARABIC TEXT, in every role (layout.css, "Scripts"): the design's stack, * HOME:27. Plex Sans Arabic's own Latin sets the strut and draws the Latin * inside an Arabic phrase; Plex Sans takes anything its sets lack. */ --ed-font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", Helvetica, Arial, sans-serif; --ed-weight-regular: 400; --ed-weight-medium: 500; --ed-weight-semibold: 600; --ed-weight-bold: 700; /* the heaviest loaded */ /* ONE SCALE ON EVERY PAGE, nothing above 56px and nothing below 11px, * ordered by each size's largest value. IN REM (27 September 2026, the * owner's WCAG 2.2 AA goal): at the browser's default 16px every size is * the design's pixel value exactly, and a reader who sets a larger default * text size gets larger text on every page, not only in articles. The vw * middle of each clamp stays: it is the design's fluid step between them. The handoff names h1, statement, * h2, figure-lg, figure, card, title (card headings, 20px), lead, body, * small, caption, eyebrow and label; the rest are the other sizes the * design files use, named for what they set. */ --ed-size-h1: clamp(2.125rem, 3.6vw, 3.5rem); --ed-size-quote-mark: 3rem; /* the outcome cards' mark */ --ed-size-h1-compact: clamp(1.75rem, 3.2vw, 2.875rem); /* article hero (Tech - Swift's) */ --ed-size-figure-lg: clamp(2.5rem, 3.4vw, 3.25rem); /* the Proof score */ --ed-size-statement: clamp(1.875rem, 3.2vw, 3rem); --ed-size-figure: clamp(2.25rem, 3vw, 2.75rem); /* stat figures */ --ed-size-h2: clamp(1.75rem, 2.5vw, 2.5rem); --ed-size-h3: clamp(1.375rem, 2vw, 1.75rem); /* tagline, form thank-you */ --ed-size-midcta: clamp(1.25rem, 1.8vw, 1.625rem); /* the Mid CTA line */ /* The What we do cards' title and the lead form's (19-23px), as drawn. * NEVER RETUNED for the one-card-title rule below: the protected cards read * it (core/tests_design.py pins its value). */ --ed-size-card: clamp(1.1875rem, 1.6vw, 1.4375rem); /* HANDOFF.md, 27 September: "One card-title size everywhere outside the * What we do cards: clamp(19px,1.6vw,22px), on both faces of flip cards." */ --ed-size-card-title: clamp(1.1875rem, 1.6vw, 1.375rem); --ed-size-title: 1.25rem; /* press, search results */ --ed-size-quote: clamp(1.125rem, 1.45vw, 1.25rem); /* every quote, 18-20px */ --ed-size-teaser: clamp(1.0625rem, 1.4vw, 1.25rem); /* article card titles */ --ed-size-title-sm: 1.1875rem; /* the score label */ --ed-size-step: clamp(1rem, 1.3vw, 1.125rem); /* step-row titles, 16-18px */ --ed-size-lead-lg: 1.125rem; /* hero, statement ledes */ --ed-size-lead-sub: clamp(1rem, 1.3vw, 1.125rem); /* a sub-page hero's lede */ --ed-size-lead: 1.0625rem; --ed-size-nav: 1rem; /* nav labels, 1280px up */ --ed-size-input: 1rem; /* a text field: iOS zooms the page under 16px */ --ed-size-body: 0.9375rem; --ed-size-small: 0.875rem; --ed-size-caption: 0.8125rem; /* meta lines, captions, fine print, chips */ --ed-size-eyebrow: 0.75rem; --ed-size-label: 0.6875rem; /* the floor; nothing smaller */ /* THE READING PAGES (article.css): the long-form scale. In rem, so it * follows the text size the reader set in their own browser, and in em * inside an article body, so its headings scale with the body text. */ --ed-read-title: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); --ed-read-dek: clamp(1.02rem, 0.98rem + 0.4vw, 1.22rem); --ed-read-body: clamp(1.02rem, 0.99rem + 0.22vw, 1.14rem); /* The article's text-size steps (the rail's control): about 15-16.6px, * 18.7-21px and 21.1-23.7px, all inside the 11-56px scale. */ --ed-read-body-s: clamp(0.94rem, 0.91rem + 0.2vw, 1.04rem); --ed-read-body-l: clamp(1.17rem, 1.13rem + 0.26vw, 1.31rem); --ed-read-body-xl: clamp(1.32rem, 1.28rem + 0.3vw, 1.48rem); --ed-read-byline: 0.92rem; --ed-read-caption: 0.86rem; --ed-read-chip: 0.84rem; --ed-read-toc: 0.82rem; --ed-read-kicker: 0.78rem; --ed-read-h2: 1.62em; --ed-read-faq-title: 1.5em; --ed-read-h3: 1.28em; --ed-read-cta-title: 1.15em; --ed-read-h4: 1.08em; --ed-track-tight: -0.026em; /* section h2 */ --ed-track-snug: -0.022em; --ed-track-eyebrow: 0.16em; --ed-track-label: 0.14em; --ed-track-places: 0.1em; /* the footer's locations */ --ed-track-tab: 0.13em; /* the back-to-top tab */ /* THE FOOTER'S LANGUAGE ROWS: Archivo's own line at 14px, 15px (measured; * a hair over 15/14, so it never rounds down), held for every name, so the * Arabic name's taller face no longer grows its row or the button. */ --ed-leading-lang: 1.0715; /* ---- Shape and measure ------------------------------------------------ */ --ed-radius: 8px; /* small controls, chips, menu-item hovers */ --ed-radius-card: 18px; /* every card */ --ed-radius-panel: 14px; /* hero and statement image panels */ --ed-plate-doc-h: clamp(200px, 26vw, 360px); /* a document page's plate */ --ed-radius-pill: 999px; --ed-radius-slab: clamp(24px, 3.2vw, 48px); --ed-radius-tab: 6px; --ed-radius-tile: 12px; /* tiles and small sheets: Industries, the footer's language list */ --ed-radius-list: 10px; /* the header's language list (HOME:214) */ --ed-radius-ring: 2px; /* the focus ring's corners (HOME:93), shell and article */ --ed-radius-label: 2px; /* a filled square label: the sample document's tag */ --ed-radius-doc: 4px; /* the sample document's page */ --ed-radius-redact: 1px; /* its redaction bars */ --ed-radius-press: 24px; /* the press strip */ --ed-radius-press-ring: 16px; /* the focus ring round its scroller */ --ed-radius-press-tile: 14px; /* its logo tiles */ /* A dot-led tag (HANDOFF.md, "Tags and badges": no pills): a 6px dot, 6px * before its words (layout.css, .ed-tag). */ --ed-dot-size: 6px; --ed-tag-gap: 6px; /* ONE PAGE GRID ON EVERY PAGE. Every container — header, menus, sections, * slabs, footer — holds content at most --ed-content-max wide, inside a * gutter that grows with the viewport and reaches --ed-gutter-max exactly * as the container reaches --ed-maxw, so content never narrows as the * window widens. Change the content width here and the grid, the gutter's * growth and every slab follow. * * 1140px SINCE 2 OCTOBER (the owner: the page read too wide). The design * draws 1240px in a 1540px grid. Below a 1356px viewport the gutter is the * design's own, so the content is exactly as drawn there; from 1356px it * holds the content at 1140px, growing to 150px at 1440px, where the * container reaches --ed-maxw (docs/BASELINE.md §5). The reading pages keep * a 1080px column, left-aligned on the same grid so it shares the logo's * left edge. */ --ed-content-max: 1140px; --ed-gutter-max: 150px; --ed-maxw: calc(var(--ed-content-max) + 2 * var(--ed-gutter-max)); --ed-maxw-read: 1080px; --ed-gutter: min(var(--ed-gutter-max), max(clamp(20px, 4.8vw, 88px), calc(26.25vw - 248px), calc((100vw - var(--ed-content-max)) / 2))); --ed-measure: 68ch; /* the reading column: long lines lose the reader */ /* Section rhythm: the same top and bottom on every page, slabs included. * The design's own (HANDOFF.md). The owner had it compacted on 2 October and * asked for it back on 3 October ("go back to our original margins and * gaps"); each section's own head-to-content gaps came back with it. */ --ed-section-y: clamp(56px, 6vw, 104px); /* The closing slab on every page, "a little tighter than other sections" * (HANDOFF.md, "Closing CTA slab", 27 September). */ --ed-slab-close-y: clamp(48px, 4.8vw, 80px); /* A STACKED HEAD USES THE ROW (the owner, 2 October: "why dont we expand the * heading and description text to right?"): a heading over full-width * content takes the content's width, balanced over its lines, and its lede * runs to 940px, about 92 characters, where the design held them to * 620-780px. Not the full 1140px: 112 characters a line is past where a * reader loses the next line. A head beside a document, a form or a second * column keeps its own width. */ --ed-head-maxw: none; --ed-lede-maxw: 940px; /* Every dark band below the hero is a slab inset this far from the viewport * on a white ground, and every slab's content subtracts it so headings, cards * and the logo share one left edge. The mega-menu uses the same frame. */ --ed-slab-inset: clamp(8px, 1vw, 16px); /* A SLAB REACHES A LITTLE PAST THE CONTENT (the owner, 2 October: "slab * should be a bit bigger than the content. content stays same"): its panel * stands --ed-slab-reach out from the content column each side, never * closer to the viewport than the inset, and its padding brings its words * back to the content's edge. On a phone the gutter is smaller than the * reach, so the slab is as drawn: the viewport less the inset. The open * mega-menu is a slab in this sense too (the owner, 2 October: "the menu * open view should be of Slabs width"), in the same three values. */ --ed-slab-reach: clamp(32px, 4.4vw, 64px); --ed-slab-edge: max(var(--ed-slab-inset), calc(var(--ed-gutter) - var(--ed-slab-reach))); --ed-slab-panel-maxw: calc(var(--ed-content-max) + 2 * var(--ed-slab-reach)); --ed-slab-text-pad: max(20px, calc(var(--ed-gutter) - var(--ed-slab-edge))); /* ---- Motion ------------------------------------------------------------- * Every duration the design draws, by what it moves; every transition * reads one. */ --ed-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* The design's two fades: ".18s ease" on fills and pills, and the quicker * ".16s ease" on links, nav items and the flip controls. */ --ed-duration-quick: 0.16s; --ed-duration: 0.18s; --ed-transition: var(--ed-duration) ease; --ed-transition-quick: var(--ed-duration-quick) ease; --ed-duration-reveal: 0.2s; /* an arrow fading in; the footer chevron's turn */ --ed-duration-slide: 0.22s; /* a revealed arrow's slide */ --ed-duration-turn: 0.3s; /* the main button's arrow, ↗ to → */ --ed-duration-bar: 0.22s; /* the bar's fade and the caret's turn */ --ed-duration-menu: 0.24s; /* a panel's entrance */ --ed-duration-card: 0.2s; /* the stat and engagement cards' hover, as drawn */ --ed-duration-lift: 0.22s; /* the 4px card lift (HANDOFF.md, "Motion") */ --ed-duration-fold: 0.35s; --ed-duration-tilt: 0.5s; --ed-duration-flip: 0.6s; --ed-flip-hide-delay: 0.3s; --ed-duration-orbit: 2.5s; /* one turn of the What we do glow */ --ed-duration-zoom: 0.6s; /* an Insights card's photo, on hover (4 Oct) */ /* The What we do cards' aurora silk (7 October): each glow's own loop, * about 8s and never in step with the others; how long the flow takes to * rise on hover, and to settle home on leave. */ --ed-duration-aurora-a: 8s; --ed-duration-aurora-b: 9.3s; --ed-duration-aurora-c: 7.1s; --ed-duration-aurora-in: 0.9s; --ed-duration-aurora-settle: 1.1s; /* A card CTA's words unfold, fade in and its boxed arrow nudges (HOME:88-91). */ --ed-reveal-words: 1.5s; --ed-reveal-fade: 1s; --ed-reveal-nudge: 1.35s; /* How far a link's arrow, or an index row's number, steps on hover and * keyboard focus (the owner, 4 October; HANDOFF.md: "the submit arrow * nudges 4px on hover"). */ --ed-nudge: 4px; /* An Industries row opening (HOME:68-74, 96): its content fades in as the * row folds open, one step late; then the bullets rise, a step apart, and * the tiles after them, from --ed-stagger-tile-start and a smaller step * apart, each fading and moving 8px up. */ --ed-duration-drop: 0.25s; --ed-duration-rise-fade: 0.3s; --ed-duration-rise: 0.4s; --ed-stagger: 0.06s; --ed-stagger-tile-start: 0.16s; --ed-stagger-tile: 0.04s; /* THE SITE'S TOUCH TARGET: every control is at least this tall (the owner's * rule, 26 September; WCAG 2.5.8 asks 24px). Read it by name; a text link * takes the extra back from the flow (layout.css, "Links"). */ --ed-target: 44px; /* The reading direction as a number, for the few things CSS has no logical * form of: every sideways nudge on hover is `translateX(calc(Npx * * var(--ed-dir)))`, so it points the right way under Arabic. * * EXCEPT ON AN ELEMENT THAT IS ITSELF MIRRORED with `scale: -1 1` (an arrow * glyph): the mirror flips its own transform too, so multiplying as well * flips it back. Nudge the mirrored glyph plainly, or nudge its unmirrored * box (layout.css, .ed-arr). */ --ed-dir: 1; } .ed-has-ctxbar { --ed-sticky-h: calc(var(--ed-header-h) + 46px); } [dir="rtl"] { --ed-dir: -1; } /* An English island inside an Arabic region points forward again. */ [dir="ltr"] { --ed-dir: 1; } /* `.ed-light` IS A LIGHT ISLAND. A white card inside a dark region — a * practice card, a stat card, the enquiry form, the language list under the * black bar — declares the light palette on itself, which resets every themed * token for everything inside it: a custom property set on an element beats * the one it would inherit. core/tests_design.py asserts it agrees with :root * token for token, since two copies of anything drift. */ .ed-light { --ed-bg: #FFFFFF; --ed-bg-alt: #F4F4F7; --ed-surface: #FFFFFF; --ed-ink: #17171A; --ed-body: #33323C; --ed-dek: #44444A; --ed-byline: #52525A; --ed-sub: #61616A; --ed-muted: #67676F; --ed-border: #E4E4E7; --ed-border-soft: #EFEEF2; --ed-rule: #D6D6DA; --ed-rule-soft: #DEDEE1; --ed-chip-bg: #F4F4F7; --ed-footer-end: #EDEDF1; --ed-magenta: #A80469; --ed-magenta-ink: #A80469; --ed-focus: #C40C7C; --ed-purple-deep: #4B0F9E; --ed-link: #6B21C4; --ed-link-hover: #4B0F9E; --ed-bg-start: #FBFBFC; --ed-hairline: #E6E6E9; --ed-input-line: #767680; --ed-error: #B42318; }