/* ============================================================================ PER-ASSET PALETTES — swappable theme objects ---------------------------------------------------------------------------- Each asset page gets exactly ONE of these, applied at the page root as ``. Nothing else in the system changes between assets: neutrals, type scale, spacing, radii, shadows, motion curves and every component's structure are shared and live in tokens.css. THE THEME CONTRACT An asset theme defines these roles and nothing else. Adding asset 02 or 03 means adding one block below plus one content file — no component changes. --accent primary accent. MUST reach 4.5:1 on --canvas and on --tint, because it carries text. --accent-strong deeper accent for headings-on-accent and hover states. --accent-quiet lower-emphasis accent text. MUST reach 4.5:1 on canvas. --accent-contrast text colour placed ON a filled --accent surface. --support second voice: a cool/warm counterpart. Carries text, so 4.5:1 on --canvas required. --tint pale themed surface for banded sections. --tint-strong pale themed surface, one step up, for cards on tint. --fill-1 / --fill-2 decorative fills ONLY. Never text, never a meaning-bearing stroke. No contrast floor, because nothing depends on seeing them. --chart-a first chart series stroke. 3:1 on canvas required. --chart-b second chart series stroke. 3:1 on canvas required. --chart-band fill between the series. Decorative; the labels and strokes carry the meaning. Run `node tools/contrast.mjs` after any change. It is the source of every ratio quoted in CHOICES.md. ========================================================================= */ /* ---------------------------------------------------------------------------- ASSET 01 · FREIGHT OS Brand colours supplied by the client: #9FA1FF #B5BAFF #AEE2FF #D9F9DF All four are light pastels. None reaches 3:1 on white, so all four are classified as SURFACES AND FILLS. The tones that carry text and strokes are derived from the same hue axis (#9FA1FF is hsl(239 100% 81%)) by dropping lightness until AA is met — so the page reads as the supplied palette while remaining legible. -------------------------------------------------------------------------- */ [data-asset='freight-os'] { /* text-bearing, derived */ --accent: #3b3e9e; /* 8.87:1 on canvas · 7.83:1 on tint */ --accent-strong: #2a2c78; /* 12.14:1 on canvas · 10.72:1 on tint */ --accent-quiet: #5b5fc7; /* 5.38:1 on canvas · 4.75:1 on tint */ --accent-contrast: #ffffff; /* 8.87:1 on filled accent */ --support: #1d4e7a; /* 8.67:1 on canvas · 7.89:1 on sky */ /* supplied pastels, as surfaces */ --tint: #eef0ff; /* from #9FA1FF / #B5BAFF */ --tint-strong: #e4e7ff; --tint-alt: #eaf6ff; /* from #AEE2FF — the "support" band */ --tint-proof: #effbf2; /* from #D9F9DF — used once, see below */ /* supplied pastels, as decorative fills only */ --fill-1: #9fa1ff; --fill-2: #b5baff; --fill-3: #aee2ff; --fill-4: #d9f9df; /* chart series — separated by dash, weight and direct label as well as colour, so the graphic never depends on hue discrimination alone. */ --chart-a: #6b6b7b; /* 5.23:1 — incumbent, dashed, lighter */ --chart-b: #3b3e9e; /* 8.87:1 — platform, solid, heavier */ --chart-band: rgba(159, 161, 255, 0.22); /* Accents INSIDE the dark product panels. This is the one context where the supplied pastels carry text: #9FA1FF is 8.01:1 on the panel ground against 2.33:1 on the light canvas. */ --panel-accent: #9fa1ff; /* 8.01:1 on panel · 7.35:1 on raised */ --panel-accent-alt: #aee2ff;/* 13.43:1 on panel */ --panel-ok: #d9f9df; /* 16.49:1 on panel */ --panel-flag: #e9a238; /* 8.61:1 on panel · 1.92:1 from ok */ } /* ---------------------------------------------------------------------------- ASSET 02 · FREIGHTNEO — signal green. ASSET 03 · HEXA OPS — ink and clay. Not defined yet, deliberately. Each needs its own contrast audit before it can ship, and inventing values here would put unvalidated colour in the system. To add one: copy the block above, replace the eleven role values, add the palette to PALETTE and PAIRS in tools/contrast.mjs, and run it. -------------------------------------------------------------------------- */