/* ============================================================================ TBWC / Orwell — canonical design tokens Served from: https://assets.thebusinesswritingclub.co.uk/tokens/tokens.css Maintained in: tbwc-assets/tokens/tokens.css Consume, don't fork: product repos link this stylesheet and set a theme on the root element — or . No product repo should define its own copy of these values. Every value below was sourced from the product codebases (audited 5 July 2026), not invented. Where the same concept had drifted between products, the variants are listed in a comment beside the chosen value. Scope note (day one): this file defines colour, type, and severity tokens. Spacing and radius tokens are deferred — the audit found no consistent cross-product scale to canonise, and inventing one here would be design work, not migration. They can be added when a real scale is agreed. ========================================================================= */ /* ---------------------------------------------------------------------------- Shared, theme-independent values ------------------------------------------------------------------------- */ :root { /* Type stacks — identical across TBWC Live, the interactives and the marketing site; Orwell uses the same sans. The mono stack is the interactives' (Plex-first); TBWC Live's mono is system-first but Live barely uses mono — flagged, Plex-first chosen. */ --font-sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif; --font-serif: 'Spectral', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* -------------------------------------------------------------------------- FF severity scale — signed off by Alan, 5 July 2026. These four tokens are a self-contained semantic ramp for friction- framework severity display. They are deliberately pinned and do NOT track the theme accent/secondary colours: --sev-minor stays the original brand yellow #E8C84A and --sev-clear the original sage #88B698 even though the live theme's accent/secondary normalised to #E2C65B / #88B596. Severity meaning must not drift when a theme is tuned. FILL / OUTLINE CONVENTION (load-bearing — do not deviate): · Fill encodes STATE, colour encodes SEVERITY. · A category with an issue present renders FILLED in its severity colour. A clear category renders as an OUTLINE in --sev-clear — never filled green. · Rationale: #E8C84A (minor) is LIGHTER than #88B698 (clear) in greyscale luminance, so a fully-filled four-colour ramp inverts between "minor" and "clear" when printed or viewed greyscale. Filled-vs-outline keeps the distinction without relying on colour — consistent with the dual coding used for inline marks (colour + underline style) and the PDF pip strip (fill density). · Colour is never the sole channel anywhere severity is displayed. SEVERITY SCORE BANDING (single reference — UI, accordion worst-cluster logic, and PDF all cut at these points; confirmed by Alan 5 July 2026): · score ≥ 4 → --sev-significant · score = 3 → --sev-moderate · score ≤ 2, present → --sev-minor · not present → --sev-clear (outline, never filled) Note: these tokens supersede the ad-hoc severity colourings found in the Orwell frontend (e.g. --m-red #c0392b / --m-amber #d4850a, the .severity-low/medium/high greens/ambers/reds, and the .l2-sev-* greys). UI application happens under a separate follow-on brief — do not remap product UI to these tokens under the migration brief. ----------------------------------------------------------------------- */ --sev-significant: #B3402F; /* significant issue — muted brick red */ --sev-moderate: #D08A2E; /* moderate issue — amber */ --sev-minor: #E8C84A; /* minor issue — brand yellow (pinned) */ --sev-clear: #88B698; /* good / not present — brand sage (pinned); rendered as OUTLINE, never fill */ } /* ---------------------------------------------------------------------------- Theme: live — bold teal palette TBWC Live, the interactives, and course-facing surfaces. Canonical source: tbwc-live/src/styles.css, which matches 8 of the 10 interactives. Decision (Alan, 5 July 2026): this NEWER set is canonical. Superseded variants found in older surfaces (site index, roadmap, syntactic-example, tbwc-website, and the brief's original anchors): · yellow #E8C84A → normalised to --colour-accent #E2C65B · sage #88B698 → normalised to --colour-secondary #88B596 · cream #F5F4F0 → normalised to --bg-surface #F5F4EF Those surfaces will visibly (subtly) shift when they switch to these tokens — an intentional normalisation, not a regression. ------------------------------------------------------------------------- */ [data-theme="live"] { --colour-primary: #29545D; /* teal — identical estate-wide */ --colour-primary-deep: #1F424A; --colour-primary-ink: #16323A; /* darkest teal (tbwc-live --teal-ink) */ --colour-accent: #E2C65B; /* gold (variant listed above: #E8C84A) */ --colour-accent-deep: #B89A33; --colour-secondary: #88B596; /* sage (variant listed above: #88B698) */ --colour-secondary-soft: #B7D3BD; --colour-ink: #233238; /* interactives; variant: #2E2E2C (tbwc-live --ink) */ --colour-ink-soft: #51636A; /* interactives; variant: #6E6B64 (tbwc-live --muted) */ --colour-link: #2A7A6E; /* interactives (7 files) */ --bg-surface: #F5F4EF; /* cream (variant listed above: #F5F4F0) */ --bg-raised: #FBFAF6; /* cards/paper — agrees across live + interactives */ --bg-page: #FAF9F6; /* light page background (interactives) */ --bg-stage: #0B1517; /* dark stage/backdrop (scene interactives) */ } /* ---------------------------------------------------------------------------- Theme: orwell — softer palette The Orwell app (app.orwell.coach). Canonical source: orwell/frontend/index.html :root. Orwell keeps the ORIGINAL sage/cream (#88B698 / #F5F4F0) and its own softened yellow — that difference is the point of per-theme scopes, not drift. Tokens Orwell's code does not define (e.g. accent-deep, secondary-soft, link) are deliberately absent rather than invented; the Orwell switchover follow-on brief extends this scope from its own audit. ------------------------------------------------------------------------- */ [data-theme="orwell"] { --colour-primary: #29545D; --colour-primary-deep: #1E3F46; /* orwell --m-teal-mid */ --colour-accent: #F1CC68; /* orwell --accent — softer than live's gold */ --colour-secondary: #88B698; /* orwell --secondary (original sage) */ --colour-ink: #333333; /* orwell --gray-dark */ --colour-ink-soft: #666666; /* orwell --gray */ --bg-surface: #F5F4F0; /* orwell --background (original cream) */ --bg-raised: #FAF9F6; /* orwell --white */ --bg-page: #F5F4F0; /* Legacy utility colours carried from the Orwell frontend. For anything severity-related use the --sev-* tokens above, not these. */ --colour-error: #D32F2F; --colour-success: #2E7D32; }