/* ============================================================================ ACS MANUFACTURING — token layer. The palette, the type scale, the spacing. THE SOURCE OF TRUTH IS THE PUBLISHED CONSOLE, NOT THE LOGO. --------------------------------------------------------------------------- This file previously carried #991D18 / #1B245F, sampled out of the pixels of `static/logo.png`. That sampling was accurate and is now superseded. Abe published the "ACS Operations Console" artifact — six pages, Main.dc.html, QuoteDesk, PlantDashboard, ShopFloor, SpecAssistant, Quality — and that artifact is the settled design. The values below were COUNTED out of its decoded source (the markup is escaped inside JS strings; < → <), not eyeballed and not carried over from the old sampling. Frequency, from the console region of the decoded file: 136 × #5C6670 muted grey — the workhorse, more common than any other 89 × #FFFFFF cards 85 × #8F8F8F dim grey 84 × #DCDFE3 border 57 × #0D141B ink 27 × #6F1010 ACS red — THE single accent 27 × #3F7A56 pass / good 23 × #A8503D hover / secondary red 22 × #F7F8F9 page background 18 × #C3C4C6 faint 17 × #EDEFF1 recessed surface 15 × #8A5E12 warn 15 × #E7E9EB inset surface 12 × #C0392B fail / critical 10 × #F6EDEC red tint wash 5 × #C87A6B light red accent Note the shape of that list: ONE accent at 27 uses against 136 uses of grey. That is principle 02 expressed as arithmetic — ACS red marks the single thing that matters on a screen, steel and ink carry everything else. A token that spends red on ordinary chrome breaks the design even if the hex is right, so the red aliases below are deliberately few. The navy #1B245F is GONE from the product UI. It appeared nowhere in the console. It survives only inside the logo bitmap, which is untouched. Do not add a hex literal to a page. Add a token here. ========================================================================== */ :root { /* ---- Brand — counted from the published console ----------------------- */ --brand-name: "ACS Manufacturing"; /* The single accent. Everything else on a view is steel and ink. */ --brand-accent: #6F1010; /* ACS red · the one accent */ --brand-accent-hover: #A8503D; /* hover / secondary red */ --brand-accent-deep: #6F1010; /* no darker red exists in the console */ --brand-accent-light: #C87A6B; /* light red accent — rules, thin strokes */ --brand-accent-wash: #F6EDEC; /* red tint wash — the flat fill behind a selected row or an accent pill */ --brand-accent-faint: #F6EDEC; --brand-accent-line: rgba(111, 16, 16, .28); --brand-ink: #0D141B; --brand-paper: #FFFFFF; --brand-steel: #5C6670; /* the workhorse grey — 136 uses */ --on-accent: #FFFFFF; --accent: var(--brand-accent); --accent-hover: var(--brand-accent-hover); --accent-faint: var(--brand-accent-faint); --accent-line: var(--brand-accent-line); /* ---- Ground ramp — page bed, recess, card ----------------------------- */ --bg: #F7F8F9; /* page background */ --canvas: #EDEFF1; /* recessed bed, sub-nav */ --surface: #FFFFFF; /* raised panel / card */ --surface2: #E7E9EB; /* inset well, pressed state */ --surface3: #DCDFE3; /* border */ --card: #FFFFFF; --card-base: #FFFFFF; --paper-alt: #EDEFF1; /* the well behind a formula or a bar track */ --panel: rgba(255, 255, 255, .96); --glass: rgba(255, 255, 255, .92); --line: #DCDFE3; --border: #DCDFE3; --hair: #E7E9EB; /* ---- Ink ramp --------------------------------------------------------- */ --text: #0D141B; --ink: #0D141B; --its-ink: #0D141B; --stone: #5C6670; /* secondary prose — the workhorse */ --muted: #5C6670; /* #8F8F8F was 3.04:1 on #F7F8F9 - under the 4.5 floor, and it carries captions, citations and basis tags across 28 call sites. Same neutral, one step darker: #6B7280 clears at 4.83:1. The console palette is unchanged; this token was never one of its named values. */ --faint: #6B7280; /* captions, citations, basis tags */ --soft: #8F8F8F; --text-dim: #5C6670; /* MEASURED against --bg #F7F8F9: ink 17.4:1, muted 5.5:1, accent 11.2:1 — the ramp that carries prose is comfortably clear of AA. Two honest cautions, both measured, neither invented: · --faint #8F8F8F is 3.04:1 on --bg. That is BELOW the 4.5:1 AA floor for body text. It is the console's own value and is kept, because the palette is law — but it is only sound on text ≥19px, or on the bold ≥14px that AA Large permits. For a caption or a citation at 10–12px it does not pass. Reach for --muted (5.5:1) there; it is the workhorse for exactly this reason and the console spends it 136 times. · #C3C4C6 is DECORATIVE ONLY — rules, bar tracks, disabled strokes, the cool end of the critical-path ramp. At 1.64:1 on --bg it must never carry a word of any size. */ --dim: #C3C4C6; --track: #E7E9EB; /* ---- Semantic — verdicts. Principle 03: the WORD ships with the colour. These three never appear without their label in the markup, because on a shop floor in poor light, through safety glasses, colour alone is not a status. Do not add a fourth; the console has exactly three verdicts. --- */ --good: #3F7A56; /* pass */ --plus: #3F7A56; --watch: #8A5E12; /* warn */ --warn: #8A5E12; --crit: #C0392B; /* fail / critical */ --bad: #C0392B; --success: #3F7A56; --warning: #8A5E12; /* ---- Critical-path bar ramp ------------------------------------------- takeoff.html builds its stacked bar with color-mix(in srgb, var(--terracotta) N%, var(--sage)) at N = 100 / 72 / 50 / 30 / 12. Those two names come from shop.css, which the surface used before this app existed; the render script is otherwise the verified original, so the ramp is re-pointed here rather than by editing it. BOTH ENDS MUST STAY LIGHT and that constraint outranks "use the workhorse grey". The day labels sit INSIDE each segment painted in --ink, so the darkest point of the ramp sets the floor. The two ends chosen are both console values and both light: #C87A6B (light red accent) and #C3C4C6 (faint). MEASURED, --ink #0D141B on each of the five mixed segments: N=100% #C87A6B 5.69:1 N=30% #C4AEAB 8.82:1 N= 72% #C78F84 6.79:1 N=12% #C4BBBB 9.86:1 N= 50% #C69F98 7.78:1 Every segment clears AA, and the hot end sets the floor at 5.69:1. #5C6670 — the workhorse grey — was NOT used here despite being the obvious "steel" candidate: --ink on it measures 3.17:1 and the numbers on the bar stop being readable. It stays a TEXT colour. Darken either end and the ramp fails. */ --terracotta: #C87A6B; /* hot end — light red accent */ --terracotta-deep: var(--brand-accent); --sage: #C3C4C6; /* cool end — faint, decorative */ /* ---- Type · principle 04: Montserrat, and only Montserrat ------------- The console loads exactly one family, at 300–800: fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800 There is no second face. Where figures must align — costs, RFQ numbers, gauges, dB readings — the console reaches for `font-variant-numeric: tabular-nums`, 59 times in its six pages, and never for a mono family. (The 6 `monospace` hits in the decoded file are Claude's own editor chrome, not the product UI.) So --font-mono resolves to Montserrat like everything else. The token is KEPT rather than deleted because ~30 rules in app.css and shell.css already reference it, and it now carries a narrower meaning: "a tabular figure run". app.css attaches tabular-nums to those call sites. Anything that used --font-mono purely to get an uppercase tracked LABEL has been moved off it — mono, in the old sense, must not appear in headings or nav, and now it cannot, because no mono face ships. */ --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-display: var(--font-sans); --font-mono: var(--font-sans); --sans: var(--font-sans); --mono: var(--font-mono); /* Label weight and tracking, counted from the console: uppercase labels run 700–800 at .08em (the workhorse, 37 uses), stepping to .14em for the widest kickers. Nav and section labels use these, not a mono face. */ --label-weight: 700; --label-track: .08em; --kicker-track: .14em; /* One type scale for every ACS surface. Ported unchanged from the scale the four named-job pages already used, so their layouts keep their proportions. 10px uppercase, tracked labels, pills, citations 12px sans why-lines, secondary prose 13.5px sans body 15.5px sans lede 19px sans section heading clamp(30-50px) page heading (one per page) clamp(28-42px) the one number a section is about */ --fs-label: 10px; --fs-why: 12px; --fs-body: 13.5px; --fs-lede: 15.5px; --fs-sec: 19px; /* ---- Metrics ---------------------------------------------------------- */ --max: 1180px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --ease: cubic-bezier(.33, 0, .15, 1); --ease-weighted: cubic-bezier(.16, 1, .3, 1); --shadow: 0 10px 30px rgba(13, 20, 27, .10); } /* shell.js stamps data-theme="dark" on for every seat in the book. The ACS console is a LIGHT product — #F7F8F9 paper, #0D141B ink — so this block keeps the ramp identical to :root rather than reintroducing a black one. The attribute is honoured, the values are the console's. Nothing shifts when it lands. */ html[data-theme="dark"] { --paper: #FFFFFF; --card: #FFFFFF; --line: #DCDFE3; --muted: #5C6670; --soft: #8F8F8F; --its-ink: #0D141B; } /* ---- Card-kit re-brand ------------------------------------------------------ card-kit.css ships its own token block and says in its own header comment: "Re-brand via :root tokens." These are the console's. The kit's structure, its 28 card types and its SVG charts are untouched; only the colours move. The six --ck-cat-* category slots are the one place the kit wants a spread of hues. The console has no such spread — it has one accent. So the categories are separated by INK WEIGHT rather than by hue: ink, workhorse grey, dim grey. Only the one category that is genuinely the product's own subject keeps the red, and the two verdict-shaped categories keep their verdict colours. Nothing here invents a hue the console does not have. -- */ :root[data-theme="dark"], :root { --ck-bg: #F7F8F9; --ck-surface: #FFFFFF; --ck-surface-2: #EDEFF1; --ck-inset: #E7E9EB; --ck-border: #DCDFE3; --ck-border-strong: #C3C4C6; --ck-text: #0D141B; --ck-text-2: #3A444E; --ck-muted: #5C6670; --ck-accent: #6F1010; --ck-accent-2: #A8503D; --ck-accent-soft: #F6EDEC; --ck-good: #3F7A56; --ck-warn: #8A5E12; --ck-crit: #C0392B; --ck-info: #5C6670; --ck-track: #E7E9EB; --ck-cat-protocol: #0D141B; --ck-cat-science: #5C6670; --ck-cat-product: #6F1010; --ck-cat-kpi: #8A5E12; --ck-cat-policy: #C0392B; --ck-cat-general: #8F8F8F; --ck-font: var(--font-sans); --ck-mono: var(--font-mono); --ck-radius: 12px; --ck-radius-sm: 8px; --ck-shadow: 0 1px 2px rgba(13, 20, 27, .05), 0 10px 30px rgba(13, 20, 27, .08); color-scheme: light; }