/* ASP Consulting — color tokens Source: brand asset folder "1.1 Logos" color naming + portfolio print work */ :root { /* Base palette (named exactly as in the brand asset library) */ --brand-dark-blue: #10328B; /* Color 1 — logo mark, display type on paper */ --brand-blue: #0A40C0; /* Color 2 — vivid brand blue, covers, full-bleed fields */ --brand-grey: #C7C8C3; /* Color 3 — warm grey, rules, technical linework */ --brand-orange: #FF5001; /* Color 4 — accent, markers, eyebrows, bullets */ --brand-light-grey: #F5F5F5; /* Color 5 — paper, page backgrounds */ --brand-navy: #0C1139; /* Color 6 — near-black ink */ --brand-white: #FFFFFF; /* Extended neutrals (derived, stay quiet) */ --brand-grey-700: #55564F; /* Secondary ink — the cool grey the email canvas sets quoted history and supporting lines in (10 uses in artboard 2a). Distinct on purpose from --brand-grey-700, which is the warm grey used for muted UI chrome. */ --brand-ink-2: #4A4E68; --brand-grey-500: #8A8B85; --brand-grey-200: #DEDEDA; --brand-grey-100: #ECECEA; /* Turn 7/8 (design_handoff_tasks_module 3). Three greys the module leans on that Track had no token for — they are NOT the existing warm greys and a swap reads as a smudge rather than a bug: --surface-sunk-2 the board's column ground and the toolbar's --rule-strong the column borders that carry the table's structure --blocked-line the border of anything tinted for a blocker */ --surface-sunk-2: #EDEDEA; --rule-strong: #D8D8D4; --blocked-line: #E0B49C; /* Blue ramp (derived from the two brand blues) */ --brand-blue-800: #0A2668; --brand-blue-100: #DCE4F8; --brand-blue-50: #EDF1FB; /* Semantic aliases */ --surface-page: var(--brand-light-grey); --surface-card: var(--brand-white); --surface-brand: var(--brand-blue); --surface-ink: var(--brand-navy); --text-primary: var(--brand-navy); --text-secondary: var(--brand-grey-700); --text-brand: var(--brand-dark-blue); --text-accent: var(--brand-orange); --text-on-brand: var(--brand-light-grey); --text-muted: var(--brand-grey-500); --accent: var(--brand-orange); --brand: var(--brand-blue); --brand-deep: var(--brand-dark-blue); /* Drawing review markup (handoff-drawing-review §11.2): the one saturated colour allowed on a sheet. Not --status-error (reads brown on linework) and not --brand-orange (spoken for as attention). */ --markup-red: #E02B1D; /* Promoted from styles.css literals (design audit 08/08): the amber "on hold" state family and the orange hover-deepen. Semantic, not decorative — everything else snapped to existing tokens. */ --status-hold: #C9A227; --status-hold-ink: #937717; --status-hold-bg: #FBF3E0; --brand-orange-deep: #E84A00; /* Track identity (design_handoff_track_logo, locked 08/08). Rose is an IDENTITY colour — node and full stop only. Never buttons, links, chips, focus rings or charts; interface accents stay on --brand-blue/orange. */ --track-navy: #0C1139; --track-rose: #F5385D; --track-paper: #F5F5F5; --track-grey-rule: #6E7080; --track-grey-ink: #2C2E38; --border-hairline: var(--brand-grey-200); --border-rule: var(--brand-grey); --border-strong: var(--brand-navy); --interactive: var(--brand-blue); --interactive-hover: var(--brand-dark-blue); --interactive-active: var(--brand-blue-800); --focus-ring: var(--brand-orange); /* Status (kept inside the brand palette — no green/red invented beyond necessity) */ --status-info: var(--brand-blue); --status-warn: var(--brand-orange); --status-error: #C0290A; --status-ok: #1F7A4D; /* Fill-ins for tokens that were only ever referenced via fallback, so the same grey/red/amber now resolves identically everywhere instead of drifting into three near-identical values per screen (Karan 16/07). */ --brand-grey-50: #F7F8FA; /* faint surface tint (was #fafbfc/#f6f7f9/#f7f8fa) */ --brand-grey-050: rgba(12, 17, 57, 0.04); /* subtle navy-tinted hover fill */ --brand-red: var(--status-error); --brand-amber-050: #FFF6E9; --brand-amber-200: #F3D79A; --card: var(--surface-card); /* --------------------------------------------------------------------- Tasks module (design_handoff_tasks_module, 28/08/2026). Lifted from the canvas with scripts/extract-artboard.py, not read off the README — 21 colours across artboards 1a-1g, of which these 11 had no token. Frequencies are the canvas's own, so the weight of each is visible: hairlines and metadata carry the module. --------------------------------------------------------------------- */ /* Cool ink ramp. Continues --brand-ink-2 (#4A4E68) downward. NOT the warm --brand-grey-500 (#8A8B85): the canvas uses a cool grey for metadata and the two are close enough to read as a typo if they get swapped. */ --brand-ink-3: #8A8C99; /* metadata, source chips, mono meta — 147 uses */ --brand-ink-4: #A8AAB4; /* placeholders, NO DUE DATE — 18 uses */ /* Warm neutrals. --brand-grey-150 sits 2 points off --brand-grey-100 (#ECECEA); they are not interchangeable — 150 is the row hairline the whole module is ruled with, 100 is existing chrome. */ --brand-grey-150: #EAEAE7; /* row hairlines — 100 uses */ --brand-grey-25: #FBFBFA; /* inset strips, hint bar, running row — 8 uses */ --brand-skeleton: #F0F0EE; /* loading bars, artboard 1b only — 6 uses */ /* Blue tints, quick-add. Fills the gap under --brand-blue-50 (#EDF1FB) and adds the chip border. */ --brand-blue-25: #F2F6FE; /* chip fill, pre-selected picker row — 10 uses */ --brand-blue-75: #E6ECFB; /* parsed span highlight in the field — 7 uses */ --brand-blue-200: #C9D6F5; /* chip border — 9 uses */ /* Overdue and overload. One triad, two jobs: the overdue band on Today and the soft overload warning in the Daily Plan. Soft by design — it names the clash, it never blocks. */ --status-overdue-bg: #FEF3EE; --status-overdue-line: #F7DCCE; --status-overdue-ink: #B03600; /* Ambiguity, not error: the quick-add span when a token matches two projects highlights warm instead of blue, because nothing is wrong yet. */ --brand-orange-050: #FDE7DC; /* Ink ON NAVY (turn 3). Turn 1 used one of these once, for the diary block's sub-label, and it was held here marked UNCONFIRMED because the README named no such colour. Turn 3 settles it: the Today block, Focus and the mobile screens are navy grounds, and they need a ramp of their own — text on navy cannot be drawn from a ramp built for text on paper. 1 the brightest muted tone: labels that must still read 2 supporting text 3 the dimmest: rules, hairlines and quiet meta on navy */ --brand-on-ink-1: #C9CDE0; --brand-on-ink-2: #9AA0BE; --brand-on-ink-3: #6B7192; /* The turn-1 name, kept so nothing already written has to change. */ --text-on-ink-muted: var(--brand-on-ink-2); /* OLD NAMES (multi-tenant step 5, 21/10/2026): the palette was renamed --asp-* → --brand-* so a company's colours are not named after ASP. These aliases keep a branch written before the rename rendering; the design lint refuses any NEW var(--asp-*) use. Delete once no branch needs them. */ --asp-dark-blue: var(--brand-dark-blue); --asp-blue: var(--brand-blue); --asp-grey: var(--brand-grey); --asp-orange: var(--brand-orange); --asp-light-grey: var(--brand-light-grey); --asp-navy: var(--brand-navy); --asp-white: var(--brand-white); --asp-grey-700: var(--brand-grey-700); --asp-ink-2: var(--brand-ink-2); --asp-grey-500: var(--brand-grey-500); --asp-grey-200: var(--brand-grey-200); --asp-grey-100: var(--brand-grey-100); --asp-blue-800: var(--brand-blue-800); --asp-blue-100: var(--brand-blue-100); --asp-blue-50: var(--brand-blue-50); --asp-deep: var(--brand-deep); --asp-orange-deep: var(--brand-orange-deep); --asp-grey-50: var(--brand-grey-50); --asp-grey-050: var(--brand-grey-050); --asp-red: var(--brand-red); --asp-amber-050: var(--brand-amber-050); --asp-amber-200: var(--brand-amber-200); --asp-ink-3: var(--brand-ink-3); --asp-ink-4: var(--brand-ink-4); --asp-grey-150: var(--brand-grey-150); --asp-grey-25: var(--brand-grey-25); --asp-skeleton: var(--brand-skeleton); --asp-blue-25: var(--brand-blue-25); --asp-blue-75: var(--brand-blue-75); --asp-blue-200: var(--brand-blue-200); --asp-orange-050: var(--brand-orange-050); --asp-on-ink-1: var(--brand-on-ink-1); --asp-on-ink-2: var(--brand-on-ink-2); --asp-on-ink-3: var(--brand-on-ink-3); }