/* ═══════════════════════════════════════════════════════════════════════════ NEXGEN SECURE — DESIGN TOKENS The single source of truth for colour, type, motion and surface geometry across the marketing site. Link this first; every page inherits from it and declares nothing of its own. ── Why this file exists ────────────────────────────────────────────────── It did not, until now. css/brand-variables.css looked like the shared palette but was imported only by brand-components.css, which no page links — so all thirteen marketing pages carried their own copy-pasted :root instead, and the copies had already begun to drift: --bg #050508 on twelve pages, #04050a on one --text2 .5 on eight, .52 on two, .58 on one That drift is the reason a radius policy or a motion policy could not be enforced: there were thirteen places to enforce it. ── Names are deliberately unchanged ────────────────────────────────────── --bg, --text, --cyan, --t-tap and the rest keep the names home.html already used, so migrating a page is "delete the :root block, add the link" rather than a rename across hundreds of usages. The ink ramp and the semantics are additions, for the dashboards. ── The palette is authored, not imported ───────────────────────────────── Sixteen of the thirty tokens in the old brand file were Tailwind's defaults verbatim — slate-900, slate-800, emerald-500, red-500 and so on. Nobody chose those; they were the values that already existed, and in aggregate they are recognisable. The ink ramp below holds ONE hue — 230°, taken from the logo blue #5667bb — across its full length, with saturation bowed higher at both ends. Tailwind drifts hue 222 → 214 and holds saturation flat. A ramp that holds hue is the clearest single sign a palette was authored. Nothing here changes how the site looks. Against the values home.html used yesterday the largest shift is 2/255 on the page ground and 1/255 on body text — invisible side by side. The look is identical; the provenance is not. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── Anchors ──────────────────────────────────────────────────────────── The three colours that came from somewhere. Everything else is derived from them or measured against them. Do not nudge these. */ --brand:#5667bb; /* the logo blue. hue 230 seeds the ink ramp */ --brand-dark:#3d4a8f; --brand-light:#7084d1; --accent:#21d8fc; /* hsl(190 97% 56%) — the L/S the others match */ --gold:#d4af37; /* ── Ink ───────────────────────────────────────────────────────────────── hue 230 held throughout; saturation 26→34→16→30 across the range, higher at both ends. 000 is the page ground, 950 is body text on it. */ --ink-000:#06060a; --ink-100:#0c0e17; --ink-200:#131626; --ink-300:#1e2338; --ink-400:#343a55; --ink-500:#4a506d; --ink-600:#6b7294; --ink-700:#9499b3; --ink-800:#bcbfd2; --ink-900:#dfe1ec; --ink-950:#edeef3; /* ── Page ──────────────────────────────────────────────────────────────── Text is set in alpha rather than as flat greys so it blends with whatever is behind it — the marketing pages run coloured washes under everything, and a solid grey sits on top of those instead of in them. */ --bg:var(--ink-000); --text:var(--ink-950); --text2:rgba(237,238,243,.56); --text3:rgba(237,238,243,.26); --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); /* ── Accents ───────────────────────────────────────────────────────────── Used to identify — a grade band, a subject area, a role — never to decorate. Hues are the site's own; lightness and saturation are pulled toward --accent so the set reads as one family. Before this, --violet was Tailwind violet-500 at L66% and --lime was emerald-500 at L39%, against a cyan at L56%. A twenty-seven point lightness spread is why the three never looked related. */ --cyan:#21d8fc; /* hsl(190 97% 56%) — unchanged, it is the anchor */ --violet:#7f56f0; /* hsl(256 84% 64%) — was #8b5cf6, tailwind violet-500 */ --lime:#1ad19a; /* hsl(162 78% 46%) — was #10b981, tailwind emerald-500 */ --amber:#efb42a; /* hsl( 42 86% 55%) */ /* ── Semantics ─────────────────────────────────────────────────────────── Hues stay where they are, because green has to read as green. What changes is that they now share one saturation and lightness, so a success chip and an error chip finally look like they belong to one product. --info is the brand accent. A separate blue beside a cyan was never doing a job the cyan could not. */ --success:#37e1a3; --warning:#e1ae37; --danger:#e13743; --info:var(--accent); /* ── Type ──────────────────────────────────────────────────────────────── Bricolage Grotesque is variable across 200–800, so weight is a design axis rather than a choice made once. Atkinson Hyperlegible is an accessibility face, which on a K-12 product is a decision with a reason. */ --heading:'Bricolage Grotesque',sans-serif; --body:'Atkinson Hyperlegible',sans-serif; --mono:'Martian Mono',monospace; /* Fluid, not stepped. A finite named scale a component picks FROM, rather than a literal invented beside it. Steps are role-bound because the site's are — d1 is only ever a hero subject. */ --fs-d1:clamp(2.7rem,9.4vw,7.6rem); --fs-d2:clamp(2.4rem,8.4vw,6.6rem); --fs-d3:clamp(2rem,5.5vw,4.2rem); --fs-d4:clamp(1.9rem,5vw,3.7rem); --fs-d5:clamp(1.6rem,4.6vw,3.4rem); --fs-h2:clamp(1.7rem,3.9vw,3rem); --fs-h3:clamp(1.35rem,3.4vw,2.5rem); --fs-h4:clamp(1.45rem,2.6vw,2.05rem); --fs-lede-lg:clamp(1.3rem,3.7vw,2.9rem); --fs-lede:clamp(1.2rem,3vw,2.2rem); --fs-lede-sm:clamp(1.05rem,2vw,1.42rem); --fs-sub:clamp(.96rem,1.6vw,1.1rem); --fs-body-lg:1.12rem; --fs-body-md:1.06rem; --fs-body:1rem; --fs-body-sm:.94rem; --fs-meta:.82rem; --fs-mono:.66rem; --fs-mono-xs:.62rem; /* ── Motion ────────────────────────────────────────────────────────────── Two registers, deliberately not sharing a scale. Interface motion answers a pointer and has to be over before it is noticed; choreography is the page speaking and needs room to be read. Collapsing them into one set of numbers is what makes a site feel either sluggish on hover or curt on arrival. */ --ease:cubic-bezier(.16,.8,.3,1); --ease-over:cubic-bezier(.2,.9,.25,1.05); --t-tap:.2s; /* colour, opacity, button lift */ --t-state:.35s; /* border, background, row shift */ --t-flood:.5s; /* an accent crossing a whole row */ --t-word:.7s; /* a word arriving */ --t-rise:.9s; /* a line rising, a section landing */ --t-settle:1.1s; /* weight resolving, a rule drawing */ --t-draw:1.5s; /* the longest single gesture */ --t-pulse:2.8s; /* ambient, never triggered */ /* ── Surfaces ──────────────────────────────────────────────────────────── Four radii on a regular interval, one glass blur, one hover lift. The live stylesheets carry eighteen distinct radii at 8px and above — 8, 9, 10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 26, 28 and four flavours of pill. That is not richness, it is eighteen separate decisions nobody made. The clusters are real though, so this is a scale rather than a single value: controls, panels, and the large surfaces. 10 chips, controls, inline marks 14 buttons, inputs, cards 20 large panels, modals, the dashboard window These three are the teacher dashboard's existing scale, adopted rather than replaced. It was already coherent — 10/14/20 — where the marketing site's eighteen values were not, so the product keeps its geometry and the site conforms to it. Deriving a fourth scale to impose on both would have moved the one part of the codebase that had this right. Every remaining value lands within 4px of one of these, most within 2. --blur is backdrop-filter ONLY. An earlier audit counted eighteen blur values and most were not glass at all: filter:blur(120px) is a background wash, filter:blur(28px) is a bloom behind a heading, filter:blur(8px) is a word arriving out of focus. Those are effects with their own reasons and none of them belongs on a shared token. Glass is the thing that should be consistent, and there is one of it. --lift is -2px because that is what twenty of the twenty-eight live hover transforms already use, and because a 2px rise reads as a response where an 8px one reads as a card game. The -8 and -10px lifts the audit found were all in homepage-animations.css, which no page has ever linked. Shadows are long, soft and low-opacity. Short tight ones read as Bootstrap; a 44px blur at 26px offset reads as weight. */ --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px; --blur:16px; --lift:-2px; --shadow:0 20px 44px -26px rgba(0,0,0,.92); --shadow-lg:0 34px 76px -30px rgba(0,0,0,.95); --edge-top:inset 0 1px 0 rgba(255,255,255,.07); /* ── Panels ────────────────────────────────────────────────────────────── Ten of the thirteen marketing pages already shared these four, at identical values, each holding its own copy. Re-derived onto hue 230 like everything else; the shift is 2/255 on both surfaces. */ --surface:#0b0c14; /* a panel sitting on the page ground */ --elevated:#10121e; /* a panel sitting on a panel */ --glass:rgba(255,255,255,.025); --glass-border:rgba(255,255,255,.06); /* ── Paper ─────────────────────────────────────────────────────────────── The light end. Everything above this line assumes a dark ground, which was true of the marketing site and the teacher dashboard and is not true of the product as a whole: the K-5 student experience is a LIGHT theme, and a token file that only models dark cannot describe half the product. Same hue 230, the same ramp continued upward rather than a second palette bolted on — so a light screen and a dark one are the same system at different ends of it, which is the thing that makes them look related. No pure #ffffff. The brightest surface carries a trace of the brand hue for the same reason the darkest one is not pure black. Text on these uses the ink ramp from the other direction: --ink-300 for primary, --ink-500 for secondary, --ink-600 for muted. */ --paper:#fbfcfe; /* cards, the brightest surface */ --paper-2:#f7f8fc; /* a card hover, a resting row */ --paper-3:#eff1fb; /* the page ground under them */ /* ── Deprecated aliases ────────────────────────────────────────────────── Four names for colours that already had names. Kept so the pages that use them keep working, and pointed at the real token so they cannot drift apart again — but every one of these should be renamed at the callsite and deleted from here. --sky was #21d8fc … which is exactly --cyan --pink was #8b5cf6 … which was --violet. A violet, called pink. --teal was #10b981 … which was --lime. A green, called teal. --blue was #5667bb … which is exactly --brand This is the sprawl that makes a product look assembled rather than designed: not that the colours were wrong, but that nobody could tell how many there were. There are five. There appeared to be eleven. */ --sky:var(--cyan); --pink:var(--violet); --teal:var(--lime); --blue:var(--brand); --green:var(--success); --red:var(--danger); --orange:#ff6b35; /* genuinely its own — nothing else is warm-red */ --accent-soft:color-mix(in srgb,var(--cyan) 30%,transparent); /* Not an alias — a repair. partners.html sets three footer links to var(--muted) and no stylesheet has ever defined it, so they have been rendering in whatever colour they inherited. Pointed at --text2 rather than --text3 because they are links and .26 alpha is not a link. */ --muted:var(--text2); }