/* ============================================================================ MOTION LIBRARY - DESIGN TOKENS ---------------------------------------------------------------------------- One file. Change it, and every component in the library rebrands. HOW TO USE ON A CLIENT SITE 1. Copy this file into the project. 2. Override only what the brand actually changes - usually --brand and --ink: :root{ --brand:#7A2E4E; --brand-light:#C46B93; --ink:#1A1418; } 3. Paste any component from the library. It picks the new palette up immediately, because every component reads these variables. Every component also carries the original value as a var() fallback - var(--brand, #1f6feb) - so a component still renders correctly if this file is missing. Nothing breaks; it just stops being themeable. ========================================================================== */ :root{ /* --- BRAND --------------------------------------------------------------- --brand is the one value most client work changes. The lighter steps are for dark grounds, where the base brand is usually too dark to read. */ /* #1f6feb measured 4.51:1 on --paper and 4.36:1 on --paper-alt: a pass on the lightest ground in the system and a fail on the one directly beside it. This is the library default and every component's fallback, so the fail was everywhere and had never been measured. #1D69DF is the same hue at 95% - 4.77 on --paper-alt, 5.07 on --surface. On dark grounds use --brand-light, which is what it is for. 11 Sep 2026. */ --brand: #1D69DF; /* primary accent, CTAs, links, active states */ --brand-2: #3f8ef0; /* secondary step, gradients, second data series */ --brand-light: #4f9dff; /* brand on dark grounds */ --brand-pale: #8fb8f5; /* third data series, de-emphasised brand */ --brand-wash: #eef4fd; /* faint brand tint - icon tiles, hover surfaces */ /* --- DERIVED TINTS ------------------------------------------------------- Computed from the tokens above, so they follow a rebrand automatically. Used by the mesh-gradient background and other soft, atmospheric fills. */ --brand-tint: color-mix(in srgb, var(--brand) 46%, #fff); --good-tint: color-mix(in srgb, var(--good) 46%, #fff); --violet-tint: color-mix(in srgb, var(--violet) 42%, #fff); --warn-tint: color-mix(in srgb, var(--warn) 40%, #fff); /* --- SEMANTIC ------------------------------------------------------------ Deliberately separate from --brand, so a rebrand never turns a positive figure into a warning colour. THE THREE FILL TOKENS ARE NOT TEXT COLOURS. As text on a light ground --warn measures 2.11:1 and --good-deep 3.23:1. They were being used for words - status pills, verdict lines, the bold lead of 40 "the trap:" paragraphs - and SEO-MTA-001 gave the game away by writing `var(--warn,#b7791f)`: a dark amber fallback against a bright amber token, the same collision as --ground-2. Use --warn-ink and --good-ink for anything anybody reads, and keep these for bars, marks, borders and series. 11 Sep 2026. */ --good: #25b798; /* growth, success, positive figures - FILL */ --good-deep: #1f9d6d; /* success on light grounds, tick marks - FILL */ --good-ink: #10593E; /* 7.83 the same green as WORDS */ --warn: #f0993f; /* shortfall, attention, drawdown - FILL */ --warn-ink: #96590A; /* 5.29 the same amber as WORDS */ /* There was no red here at all, and three components had invented one - `var(--danger,#c0392b)` and `var(--success,#1e8e5a)` name tokens this file has never defined, so they ALWAYS used their fallback and were silently immune to a rebrand. #c0392b happens to measure 5.11, so it reads; that was luck, not design. Added rather than aliased, and the components now use the real names. 11 Sep 2026. */ --bad: #c0392b; /* 5.11 error, refusal, negative - fill AND text */ --violet: #7b61ff; /* fourth series, tertiary accent */ /* --- INK RAMP (text on light grounds) ------------------------------------ A single ramp, darkest to lightest. Named by weight, not by role, so the same token works for body copy in one component and a caption in another. Ratios below are against --paper-alt #f6f8fb, the DARKEST light ground the system defines. Measure here, not against --paper: the two differ by enough to turn a pass into a fail, which is how three separate accent colours shipped failing in this repo. THE BOTTOM THREE STEPS ARE NOT TEXT COLOURS. --ink-40, -35 and -30 sit at 2.79, 2.28 and 2.07 - below even the 3:1 large-text floor, let alone 4.5. Their old role names ("labels, axis text", "faintest legible text") said otherwise and were wrong. They are re-labelled rather than re-coloured because re-colouring the light end of a ramp changes the appearance of every chart in the library, and that is a design decision rather than a defect fix. Use --ink-45 or darker for anything a visitor must read. */ --ink: #0f1720; /* 16.96 headings, primary text, dark ground */ --ink-60: #4b5a68; /* 6.66 */ --ink-55: #5b6b7c; /* 5.14 standard secondary text */ --ink-50: #616d7b; /* 4.96 */ --ink-45: #636E7A; /* 4.88 captions - the LIGHTEST legible step */ --ink-40: #8b97a5; /* 2.79 NOT TEXT - hairlines, decorative fills */ --ink-35: #9aa8b6; /* 2.28 NOT TEXT */ --ink-30: #a4b0bc; /* 2.07 NOT TEXT */ /* --- GROUNDS -------------------------------------------------------------- */ --paper: #fbfcfd; /* default page ground */ --surface: #ffffff; /* cards and panels sitting on --paper */ --paper-alt: #f6f8fb; /* alternating section ground */ /* THESE THREE ARE DARK. --ground-2 is a DEEPER DARK, not a second light tint, and on 11 Sep 2026 eight components had assumed the opposite - `var(--ground-2,#f2f5f8)`, a light fallback, paired with dark ink. Their own demo pages never load this file, so the fallback applied and they looked right; on any real site they rendered dark ink on a dark ground at 1.06:1. If you want a light tint, the token is --paper-alt. */ --ground: #0f1720; /* dark section ground */ --ground-2: #0d141c; /* DEEPER DARK ground - see the note above */ --ground-3: #0b1017; /* deepest - hero and full-bleed panels */ /* --- TEXT ON DARK GROUNDS ------------------------------------------------- Ratios are against --ground #0f1720, the LIGHTEST of the three darks and therefore the hardest. */ --on-ground: #eaf1f8; /* 15.06 primary text on a dark ground */ --on-ground-mut: #93a5b8; /* 7.14 secondary text on a dark ground */ --on-ground-mut2: #9fb0c2; /* 8.13 */ /* #67727e measured 3.68 on --ground and 3.89 on --ground-3: a token whose documented role - "faint text on a dark ground" - it could not perform on any ground the system defines. 39 elements in the adviser template alone, including the whole footer and every regulatory line. It shared its hex with --ink-45, which is a LIGHT-ground token, and the two had silently been treated as interchangeable. #7B8794 is 4.93 on --ground, still visibly fainter than --on-ground-mut at 7.14. 11 Sep 2026. */ --on-ground-fnt: #7B8794; /* 4.93 faint text on a dark ground */ /* --- LINES AND EDGES ------------------------------------------------------ */ --line: #e6ecf3; /* standard border */ --line-2: #dde4ec; /* input borders, slightly stronger */ --line-3: #e8edf2; --line-4: #dbe5f0; /* chart tracks, faint fills */ --line-soft: #eef2f6; /* internal dividers */ --line-dark: #223041; /* borders on dark grounds */ /* --- MOTION -------------------------------------------------------------- Shared easings are what make separately-authored components feel like one system. Change these and the whole library changes character. */ --ease-out: cubic-bezier(.16,1,.3,1); /* default - decisive, settled */ --ease-inout: cubic-bezier(.76,0,.24,1); /* curtains, wipes, masks */ --ease-spring: cubic-bezier(.68,-.3,.27,1.35);/* dots, toggles, pops */ --dur-fast: .3s; --dur: .45s; --dur-slow: .8s; /* --- SHAPE ---------------------------------------------------------------- */ --r-sm: 6px; --r: 12px; --r-lg: 16px; --r-pill: 999px; } /* --------------------------------------------------------------------------- OPTIONAL: dark-mode token flip. The library's components are individually light- or dark-grounded by design, so this is opt-in rather than automatic. Add data-theme="dark" to if the client site has a dark mode. ------------------------------------------------------------------------- */ :root[data-theme="dark"]{ --paper: #0f1720; --surface: #161d26; --paper-alt: #131a23; --ink: #eaf1f8; --ink-60: #c3ced9; --ink-55: #aab7c4; --ink-50: #9aa8b6; --ink-45: #8b97a5; /* Same rule as the light ramp: the bottom three are 3.46, 3.22 and 3.10 against --surface and are NOT text colours in this theme either. */ --ink-40: #67727e; --ink-35: #616d7b; --ink-30: #5b6b7c; --line: #243040; --line-2: #2b3848; --line-3: #223041; --line-4: #1d2836; --line-soft: #1b2532; --brand: #4f9dff; --brand-wash: #16243a; }