/* ========================================================================== Answerling design tokens — v6 -------------------------------------------------------------------------- The ONE token file. It is byte-identical in answerling/tokens.css and answerling-portal/app/tokens.css, loaded BEFORE each surface's own stylesheet. Change it in one repo and copy it to the other in the same sitting: tools/check-pages.py (the site) and tools/check-app.py (the dashboard) each compare the two copies whenever the sibling repo is on disk, so a drift fails a check instead of shipping. The two copies diverged from 18 September 2026 (the v6 rewrite below landed on the site only; the dashboard kept the v4 lavender set and still named Inter and Outfit, so it rendered in a different typeface for three days and nothing caught it) until 21 September, when the dashboard was restyled onto this file and the two checks were added. This paragraph stays as the record of why the checks exist. Nothing site-specific belongs here. Container widths, gutters and chrome heights stay in each surface's own CSS. EVERY CONTRAST RATIO BELOW IS MEASURED — sRGB, WCAG 2.x relative luminance, computed against each ground and checked before this file was written, not estimated afterwards. The rule: anything carrying text clears 4.5:1 against every ground it is allowed to sit on; anything forming a control boundary clears 3:1. Ratios are quoted in this order: --paper / --paper-alt / --surface-sunk / --fill / --accent-wash Replaces the v4 lavender set, 18 September 2026. v4 is recoverable at the tag v5-pre-rebuild and in versions/v5-bigmarker/. ========================================================================== */ :root { /* ==== 1. GROUNDS ======================================================== v4 had four grounds and all four were lavender, so the accent never registered as a choice — it was the temperature of the page. These carry a faint cool cast in the ink's own hue family, which makes the page feel like one material, but you cannot name the colour. Each step is a real measurable jump: v4's #FAFAFF sat about 1.02:1 from white and vanished in daylight. */ --paper: #FFFFFF; /* the page. Most sections are this and nothing else */ --paper-alt: #F4F5F8; /* THE alternate band. 1.090:1 from white */ --surface-sunk: #EDEEF3; /* table heads, disabled input, code. 1.159:1 */ --fill: #E4E6EE; /* chips, tracks, icon wells, hover. 1.246:1 */ /* ==== 2. EDGES. One width, three colours. ============================== The stylesheet declared 27 border values across four widths. */ --bw: 1px; /* the ONLY border width on the site */ --line: #E0E2EA; /* THE hairline. Decorative, so WCAG 1.4.11 does not apply: card edges, dividers, the nav's bottom. */ --line-strong: #C9CCD8; /* two uses: the table-head rule, a card hover edge */ --edge: #767C93; /* CONTROL boundaries: input, select, secondary button. 3.32:1 at worst, clearing 1.4.11's 3:1. NEVER used for text — 4.14:1 is under 4.5. */ /* ==== 3. TEXT. Three neutrals and nothing else. ======================== v4 shipped four. The fourth measured 4.17:1 on white — under AA — and it was the placeholder colour of every form field on the site, painting 50 declarations in styles.css. There is no fourth here. */ --ink: #14123A; /* 17.84 / 16.36 / 15.39 / 14.31 / 14.42 headings, and the primary button's fill. Unchanged from v4: it was already right, and it is the brand */ --ink-2: #3B4059; /* 10.18 / 9.33 / 8.78 / 8.17 / 8.23 — ALL body */ --ink-3: #545A73; /* 6.80 / 6.24 / 5.87 / 5.46 / 5.50 — captions, placeholders, meta, eyebrows, icon strokes. Was 4.17:1. This one token closes the site's only WCAG AA text failure, on every page at once. */ --ink-hover: #22204C; /* the primary button's hover. 15.23:1 with white */ /* ==== 4. THE ONE ACCENT ================================================ The rule was already written in the v4 file — "violet marks the brand and anything you can interact with; it is never used as decoration" — and the live page broke it on most of its violet nodes. The rule now has a number attached so it can be checked: AT MOST 8 ACCENT-FILLED ELEMENTS PER PAGE. Accent TEXT (links) is unlimited: a hairline of glyph costs no area. The primary button is --ink, not accent. All three reference sites use a near-black primary, ours already did, and it measures 17.84:1. */ --accent: #5B3BE8; /* 6.49 / 5.95 / 5.60 / 5.21 / 5.25 as text, and 6.49:1 as a fill under white text. Clears AA both ways, which v4's #6A4CF6 (5.29:1) only just did */ --accent-hover: #4728C4; /* 8.87:1 on white, 8.87:1 with white text */ --accent-wash: #E9E4FD; /* the ONE tinted surface: selected tab, recommended plan. 1.237:1 from white, so it is visible */ --accent-edge: #5B3BE8; /* THE STATE MARK. A 2px rule in this colour is what says "selected" — 5.21:1 at worst, clearing 1.4.11. A fill tint alone does not. */ --accent-line: #B9ABF6; /* the selected panel's 1px edge. Decorative support for the 2px rule, never the only cue, never text */ /* ==== 5. STATE. Three. On the marketing site only --danger ever paints. */ --positive: #076B41; /* 6.59 / 6.04 / 5.68 / 5.29 / 5.33 */ --warn: #8A5200; /* 6.39 / 5.86 / 5.51 / 5.13 / 5.17. Replaces --beak, which measured 4.48:1 on a tinted card and failed */ --danger: #B3261E; /* form errors. 6.54 / 6.00 / 5.64 / 5.25 / 5.29 */ --live: var(--ink); /* a "live" dot carries no colour on a light ground */ /* ==== 6. SHADOWS. Two, and MOST THINGS HAVE NONE. ====================== v4 declared one shadow here and 25 in the stylesheet, across SEVEN different "blacks". Shadows built on seven inks never sit on the same plane, and the eye reads that as "assembled" long before it can say why. Cards: none. Buttons: none. Sections: none. Separation is --line and space. These two exist only for things that float OVER content. */ --shadow-panel: 0 4px 12px -2px rgba(20,18,58,.08), 0 2px 4px -2px rgba(20,18,58,.04); --shadow-drawer: 0 16px 40px -8px rgba(20,18,58,.10), 0 4px 12px -4px rgba(20,18,58,.05); /* ==== 7. FOCUS. An OUTLINE, never a box-shadow. ======================== box-shadow is forced to none in Windows high-contrast mode; outline is not, and a real share of these owners are on an old work laptop. The 23 existing :focus-visible rules were already correct — only the colour changes. */ --focus-color: var(--accent); --focus-width: 2px; --focus-offset: 2px; /* ==== 8. RADII. Four, plus a true circle. ============================== v4 rendered nine distinct radii. The loudest wrong note on the site was a 999px pill button sitting beside an 8px input in the same hero: two radii on two adjacent controls, 991px apart. Buttons and inputs share a value now. Stripe's buttons are 4px, Vercel's 6px; Linear's are pills only because nothing else on that page has a competing shape. */ --r-1: 4px; /* chips, tags, badges, segmented-control cells */ --r-2: 6px; /* THE control radius: every button, input and select */ --r-3: 10px; /* cards, panels, media frames */ --r-4: 16px; /* the one large surface per page: the demo card */ --r-full: 999px; /* status dots, avatars, the ring mark. NOT buttons. */ /* ==== 9. SPACE. A 4px grid, 13 steps. ================================== v4 shipped 29 distinct gap values and 12 section paddings, three of them (44, 76, 116) not even on an 8px grid. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px; /* Control heights are NAMED, because 44px is not a multiple of 4 by accident — it is the thumb minimum. An untokenised exception under a "no exceptions" rule is exactly how 29 gap values happened the first time. */ --ctl-h-sm: 36px; --ctl-pad-sm: 0 14px; --ctl-h-md: 44px; --ctl-pad-md: 0 18px; --ctl-h-lg: 48px; --ctl-pad-lg: 0 22px; /* ==== 10. TYPE. Ten steps; seven never change size. ==================== No clamp() anywhere — clamp is why sizes like 16.56px and 51.84px exist today. Everything at or below 24px is FIXED at every width: a 14px nav link is 14px on a phone and on a 27-inch display. Only the top three steps move. Every line box is a multiple of 4px, which is checkable, and it is why the page reads as ruled. The smallest type on the site is 12px. The 11px eyebrow is gone: our reader is forty-eight and often outdoors. */ --fs-12: 12px; --lh-12: 16px; --fs-13: 13px; --lh-13: 16px; --fs-14: 14px; --lh-14: 20px; --fs-16: 16px; --lh-16: 24px; /* ALL body and EVERY input. Never smaller: below 16px iOS zooms the viewport on focus */ --fs-18: 18px; --lh-18: 28px; --fs-20: 20px; --lh-20: 28px; --fs-24: 24px; --lh-24: 32px; --fs-32: 28px; --lh-32: 36px; /* every section h2 → 30/36 → 32/40 */ --fs-40: 32px; --lh-40: 40px; /* plan price, closer → 36/44 → 40/48 */ --fs-48: 36px; --lh-48: 40px; /* the ONE h1 per page → 40/48 → 48/56 */ /* Tracking. Three values, one of them zero. v4 shipped 26 distinct letter-spacings, several the same number written twice (-0.02em / -.02em) */ --track-0: 0em; --track-24: -0.014em; --track-32: -0.014em; --track-40: -0.014em; --track-48: -0.021em; --track-label: 0.08em; /* the one positive value: the 13px uppercase eyebrow */ /* Weight. Three. Nothing on this site is 600 or 700. 560 is a non-round value on a variable axis, which is why the face is loaded as a RANGE (400 700) and not four stops. It reads as confident without the slab density of 600 and it holds at 36px on a phone where 500 goes weedy. There is no bold: emphasis inside a paragraph is a colour step from --ink-2 to --ink, never a weight. */ --fw-regular: 400; --fw-medium: 500; --fw-heading: 600; /* Measure, in rem so the value is deterministic. (ch measures the "0" glyph, which is wider than the prose average and overstates a column by ~20%.) */ --measure: 33rem; /* 528px, ~62-68 characters at 16px */ --measure-lead: 30rem; /* 480px, ~50-55 characters at 18px */ --measure-display: 36rem; /* ==== 11. FACES AND MOTION ============================================ One face. v4 named two families and shipped one, which is how "Outfit" survived in the token file for five days after it left the site. */ --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --ease-soft: cubic-bezier(.22, .61, .36, 1); --ease-spring: cubic-bezier(.32, .72, 0, 1); } /* ==== 12. The top three steps, and only those, respond to width. ========= */ @media (min-width: 640px) { :root { --fs-32: 30px; --lh-32: 36px; --fs-40: 36px; --lh-40: 44px; --fs-48: 40px; --lh-48: 48px; --track-40: -0.021em; } } @media (min-width: 1024px) { :root { --fs-32: 32px; --lh-32: 40px; --fs-40: 40px; --lh-40: 48px; --fs-48: 48px; --lh-48: 56px; } } /* ========================================================================== COMPATIBILITY LAYER — v4 names, v6 values. -------------------------------------------------------------------------- 178 KB of styles.css refers to the v4 token names. Rewriting all of it in one sitting is how a redesign becomes a rewrite and a rewrite becomes a regression, so every old name is redefined here in terms of the new system. The whole site picks up the new palette, type ramp and radii without a single rule being edited, and the stylesheet can be migrated deliberately, later, or never. This is not a shortcut. It is the thing that makes the change reversible: delete a line here and the rules using that name break loudly and locally, which is exactly the feedback a gradual migration needs. ========================================================================== */ :root { /* grounds — four lavenders collapse to two neutrals */ --bg: var(--paper); --bg-2: var(--paper-alt); --card: var(--paper); /* cards are white ON the alt band now */ --card-2: var(--fill); /* edges */ --line-2: var(--line-strong); /* the accent, renamed, still one colour */ --violet: var(--accent); --violet-2: var(--accent-hover); --violet-tint: var(--accent-wash); /* the amber milestone becomes the accessible warn colour */ --beak: var(--warn); /* radii. --r-md is what buttons and inputs share, and it is 6px now. --r-pill stays 999px and stays correct — for dots, chips and avatars. The one place it was wrong was .btn, and that is fixed in styles.css. */ --r-sm: var(--r-1); --r-md: var(--r-2); --r-lg: var(--r-3); --r-pill: var(--r-full); /* type: v4's seven steps land on the new ramp. The two display steps shrink hard — the h1 was 54px at 1440 and is 48px, the h2 was 44px and is 32px — which is most of what makes the page read as considered rather than loud. */ --fs-1: var(--fs-13); /* was 11px: too small for this reader */ --fs-2: var(--fs-12); --fs-3: var(--fs-14); --fs-4: var(--fs-16); --fs-5: var(--fs-20); --fs-6: var(--fs-32); /* was clamp(34px, 3vw, 44px) */ --fs-7: var(--fs-48); /* was clamp(36px, 3.7vw, 54px) */ --lh-display: 1.1; --lh-body: 1.5; /* cards carry no shadow in v6. The token stays so nothing breaks, and it resolves to nothing — which removes nine shadows in one line. */ --shadow-card: none; } /* ========================================================================== THE DARK SCOPE, for the surfaces that hold the demo agent. One class, applied to the demo card and nothing else. The footer stopped using it in v6: a dark footer under a light page was the last place four tokens were overridden locally. Ratios here are measured against --card (#141838), which is the ground every one of these actually sits on. ========================================================================== */ .night { --paper: #0B0E24; --paper-alt: #10143A; --surface-sunk: #141838; --fill: #1A1F4A; --line: rgba(255, 255, 255, .10); --line-strong: rgba(255, 255, 255, .18); --edge: rgba(255, 255, 255, .34); /* 3.1:1 on --card: clears 1.4.11 */ --ink: #F4F5FF; /* 15.9:1 on --card */ --ink-2: #C3C6DE; /* 9.4:1 — was rgba(.68), which measured 8.8 */ --ink-3: #9BA0BF; /* 5.6:1 — was rgba(.45) at 3.9:1, under AA. The same failure as the light theme's --ink-3, in the same token, found by the same check. */ --ink-hover: #FFFFFF; --accent: #9B86FF; /* 6.8:1 on --card. v4's #7C5CFF measured 4.4 and was carrying link text on this ground. */ --accent-hover: #B6A6FF; --accent-wash: rgba(155, 134, 255, .18); --accent-edge: #9B86FF; --accent-line: rgba(155, 134, 255, .34); --positive: #4FD1A5; --warn: #F6B23A; --danger: #FF8A8A; --live: #4FE0FF; /* the one cyan left: a live dot on a navy card */ --shadow-panel: 0 12px 30px -16px rgba(0, 0, 0, .6); --shadow-drawer: 0 18px 44px -12px rgba(0, 0, 0, .7); /* The compatibility layer has to be re-declared HERE, and this is not duplication for its own sake. A custom property containing var() is substituted where it is DECLARED, not where it is used: `--card: var(--paper)` on :root computes to #FFFFFF on :root and is then inherited as that literal white, so overriding --paper inside .night does nothing to --card. Measured before this block existed: --card resolved to #FFFFFF on the dark demo card. Every v4 name the dark scope needs is therefore re-pointed here. */ --bg: var(--paper); --bg-2: var(--paper-alt); --card: var(--surface-sunk); /* the card is the lit surface in the dark */ --card-2: var(--fill); --line-2: var(--line-strong); --violet: var(--accent); --violet-2: var(--accent-hover); --violet-tint: var(--accent-wash); --beak: var(--warn); --shadow-card: none; color: var(--ink); color-scheme: dark; } /* ========================================================================== THE LIGHT SCOPE, for a light island sitting inside a dark one. -------------------------------------------------------------------------- Added 18 September 2026, and it exists because of a specific bug. A white card inside .night inherits the dark palette, so its text comes out white on white. Twice now the answer was to re-state the light values as literals on the component itself (.ringcard did it on 14 Sep; the footer's email field did it in another form). Both copies then went stale the moment v6 moved --ink-2 and --ink-3 to close a WCAG AA failure, and both went on serving the v4 numbers — .ringcard's --ink-3 was still rgba(20,18,58,.56), 4.16:1 on white, carrying the hero's recording-consent line. A copied token value cannot follow the token it copied. So the light values live in exactly one place, and a light island asks for them by name:
...
The list below is every token .night overrides — anything it repoints has to be repointed back, or the island inherits half of each palette. That is the same lesson .night's own compatibility block records: a custom property holding var() is substituted where it is DECLARED, so --card: var(--paper) on :root is already literal white by the time .night changes --paper, and every v4 alias has to be re-pointed here too. tools/check-contrast.py asserts this block stays in step with :root. ========================================================================== */ .daylight { --paper: #FFFFFF; --paper-alt: #F4F5F8; --surface-sunk: #EDEEF3; --fill: #E4E6EE; --line: #E0E2EA; --line-strong: #C9CCD8; --edge: #767C93; --ink: #14123A; --ink-2: #3B4059; --ink-3: #545A73; --ink-hover: #22204C; --accent: #5B3BE8; --accent-hover: #4728C4; --accent-wash: #E9E4FD; --accent-edge: #5B3BE8; --accent-line: #B9ABF6; --positive: #076B41; --warn: #8A5200; --danger: #B3261E; --live: var(--ink); --shadow-panel: 0 4px 12px -2px rgba(20,18,58,.08), 0 2px 4px -2px rgba(20,18,58,.04); --shadow-drawer: 0 16px 40px -8px rgba(20,18,58,.10), 0 4px 12px -4px rgba(20,18,58,.05); /* the v4 aliases, for the same reason .night re-declares them */ --bg: var(--paper); --bg-2: var(--paper-alt); --card: var(--paper); --card-2: var(--fill); --line-2: var(--line-strong); --violet: var(--accent); --violet-2: var(--accent-hover); --violet-tint: var(--accent-wash); --beak: var(--warn); --shadow-card: none; color: var(--ink); color-scheme: light; }