/* VENDORED — do not edit directly. Source: evenonfridays/origincloud-brand, skills/origincloud-brand/references/blueprint.css Synced from commit df97b1366e26a43c9b0a200e482a2df644ab44d6. Edit the source repo and re-copy; see that repo's README. */ /* =================================================================== Origin Cloud — "blueprint" brand tokens (canonical, dark UI variant) Source of truth for the color palette shared across dark, dense product UIs (origincloud-console, origincloud-operator, ...). See ../SKILL.md for the full rationale and ../../origincloud-product-design/SKILL.md for how product apps (as opposed to the marketing site) should use these. Relationship to the marketing site (origincloud-web): origincloud-web's page/themes/bs5/assets/scss/_variables.scss holds the base light-ink palette ($primary #c96a34, $secondary #3f6a92, $success #3f7a5c, $warning #b9862f, $danger #b9432f) plus its own dark-on-dark variant baked into the same swatches (see that file's comments — Bootstrap's $primary etc. don't have independent dark-mode hooks in that setup). The values below are the palette BRIGHTENED for legibility on the darker, denser ink canvas that origincloud-console and origincloud-operator use — this file exists so that brightening is chosen ONCE, here, instead of independently eyeballed per consuming repo (which is what happened before this file existed — see origincloud-console's issue #11). Consumption: vendor this file verbatim (copy it in, don't hand-transcribe values) into `styles/tokens.css` or equivalent, load it before your own stylesheet, and reference the custom properties below — never inline a hex code for one of these roles. Re-copy when this file changes; there's no build-time import mechanism, the same low-tech vendoring pattern origincloud-console already uses for graphql/schema.graphql from origincloud-mono. What's in scope: every color a product UI renders. That is four layers, and all four are here — the neutral scale it paints on, the five reserved hues, the line/grid variants derived from --blue, and the categorical series ramp. A product repo should be able to build a whole console without typing a hex. Font tokens are deliberately NOT included here — origincloud-web uses Big Shoulders Display/Public Sans/JetBrains Mono, but a dense, stared-at-all-day product console wants legibility over character, so origincloud-console (and origincloud-operator) use the system font stack instead. That's a per-product decision, not a brand token — see each product's own design skill. The line to draw, when something new is proposed for this file: a value is a brand token if two product UIs choosing it independently would be a defect. Two consoles picking different system-font stacks is fine; two consoles picking different inks is not, because everything else in this file is chosen against the ink. =================================================================== */ :root { /* ----------------------------------------------------------------- Neutral scale — the canvas every product UI paints on. --ink is the page behind everything; --surface-0..3 are four steps of elevation; --text/-soft/-muted are the three text weights that sit on them. The off-whites are warm (hue ~87-90) while the ink and surfaces are a cool blue-grey (~262): that opposition is what makes the surface read as ink-on-paper rather than as a grey terminal, and it is why --text is #ede9e0 and not #ffffff. --text-muted is deliberately the one cool neutral — it's the "this is not the point" weight, and dropping the warmth is what separates it from --text-soft at a glance rather than by luminance alone. These belong here, not in each product repo, for the same reason the hues below do — and one sharper one: the --series-* ramp at the bottom of this file was validated against --surface-0/-1/-2 specifically. A product UI that picks its own darker ink silently invalidates that validation and nothing detects it. Vendor these; don't re-derive them. Contrast, --surface-1 (the panel/table surface most text sits on): --text 13.9:1, --text-soft 8.1:1, --text-muted 4.3:1. Two limits that follow, stated rather than designed around: - --text-muted sits just UNDER the 4.5:1 AA floor on --surface-1 and reaches 3.6:1 on --surface-3. It is a secondary-label weight — never small print that carries meaning on its own, and never the only channel distinguishing one row from another. - Elevation here is a 2-3 point luminance step, not a shadow. Two adjacent surfaces are ~2 dE76 apart, so an element must not rely on a single step to read as raised; pair it with --line/ --line-strong, which is what the corner-bracket motif does. -------------------------------------------------------------- */ --ink: #101318; --surface-0: #14171d; --surface-1: #191d24; --surface-2: #20242c; --surface-3: #262b34; --text: #ede9e0; --text-soft: #b7b3a8; --text-muted: #7c8089; /* Copper — the only action/signal color. Primary buttons, active nav, launch CTAs. Never decorative. */ --copper: #e2793d; --copper-soft: rgba(226, 121, 61, 0.14); /* Copper's SURFACE set — the three values a product UI needs the moment it *fills* something with copper instead of tinting it with --copper-soft. Nothing here is a fourth copper you may pick from for emphasis; each has exactly one job. --copper-hover the lighter step a copper fill takes on hover or focus. Only ever --copper's hover partner. --copper-deep the darker step: gradient terminus, pressed fill. Not "copper but calmer" — a copper fill at rest is --copper. --ink-on-copper the ONE text/icon color that goes on a copper fill. There is exactly one on purpose. A second, differently-dark brown for the same job is this file's whole reason for existing, and it had already happened: origincloud-console shipped #1a0f08 on .avatar and #221206 on .btn-primary — same role, two eyeballed values, dE76 5.0 apart (origincloud-console#35). --ink-on-copper clears AA on the two fills meant to carry text: 6.31:1 on --copper, 7.54:1 on --copper-hover. On --copper-deep it reaches only 3.56:1 — so --copper-deep must not carry small text on its own. It is a gradient/pressed partner, not a text surface. Anything filled with a --copper → --copper-deep gradient that also holds text (an avatar's initials) must keep the text off the deep end of the ramp. */ --copper-hover: #ef8a4e; --copper-deep: #a8542a; --ink-on-copper: #1a0f08; /* Cyanotype blue — structural. Links, panel corner-brackets, info, schematic/grid lines. Never a status color. */ --blue: #6fa3d6; --blue-soft: rgba(111, 163, 214, 0.12); /* Status-only colors — running/healthy, pending/warning, error/danger. Never used decoratively, never for anything that isn't reporting an actual resource/request state. */ --sage: #6db28e; --sage-soft: rgba(109, 178, 142, 0.14); --gold: #d9a441; --gold-soft: rgba(217, 164, 65, 0.14); --coral: #d9584b; --coral-soft: rgba(217, 88, 75, 0.14); /* Schematic/grid line variants, derived from --blue at different opacities — corner-bracket motifs, faint grid-paper texture, hover/active structural lines. */ --line: rgba(111, 163, 214, 0.14); --line-strong: rgba(111, 163, 214, 0.28); --line-bright: #6fa3d6; /* ----------------------------------------------------------------- Series ramp — DECORATIVE-CATEGORICAL, NEVER STATUS. The one job the palette above cannot do. Every hue above is reserved: copper signals action, blue is structural, sage/gold/ coral report an actual resource state. A chart that has to tell N categories apart — products on a cost breakdown, projects, network interfaces, volumes — needs colors whose only meaning is "not the same series as the one next to it". These six are those colors. Rules: - Identity only. --series-N never means good/pending/failed. If a band in a chart genuinely reports state, it wears --sage/--gold/ --coral instead; never both idioms in one chart. - Assign in fixed order from --series-1, never cycled. Color follows the entity, not its rank, so re-filtering a chart must not repaint the survivors. A 7th category folds into an "Other" band (--text-muted) — it never gets a generated hue. - Never used for chrome, CTAs, links, borders or text. A series color only ever fills or strokes a data mark. Chosen with the `dataviz` skill's validate_palette.js rather than by eye, against the dark product surfaces --surface-0, --surface-1 and --surface-2 defined at the top of this file (#14171d, #191d24, #20242c). Those three are the ramp's premise, not an incidental backdrop: re-derive the ramp if they ever move. All six slots pass all six checks at the full series count on all three: OKLCH L 0.53–0.60 (band 0.48–0.67), C 0.105–0.165 (floor 0.10), worst adjacent CVD ΔE 10.6 (protan; target >= 8), worst adjacent normal-vision ΔE 19.0 (floor 15), all >= 3:1 on surface. The ramp deliberately sits deeper and more saturated than the signal/status hues above (which live at L 0.62–0.75, C 0.09–0.17) — that register difference is what stops a filled band reading as a copper CTA or a sage "running" dot. Every slot is also >= 15 ΔE from every reserved hue under normal vision, the same threshold the method uses for "two colors a full-color reader can tell apart", so no series color is confusable with one of them. Re-running the checks after any edit here is mandatory: node scripts/validate_palette.js \ "#1a76a1,#8c8309,#8366bb,#387d3d,#ac479a,#4670d7" \ --mode dark --surface "#191d24" Six is the ceiling, not an arbitrary stop: with five hue families already reserved, the remaining sRGB space that clears the chroma floor, the contrast floor and the >= 15 separation from the reserved hues is two arcs (yellow-green→green, blue→magenta). Don't add --series-7 without re-deriving the whole ramp. Note also that these six clear the *adjacent* pairlist (stacks, bars, lines, stacked areas). Chart forms where any two marks can end up side by side — scatter, bubble, choropleth, small multiples — must run `--pairs all`, which the full six do not clear; cap those at three series and fold the rest into "Other". */ --series-1: #1a76a1; --series-1-soft: rgba(26, 118, 161, 0.14); --series-2: #8c8309; --series-2-soft: rgba(140, 131, 9, 0.14); --series-3: #8366bb; --series-3-soft: rgba(131, 102, 187, 0.14); --series-4: #387d3d; --series-4-soft: rgba(56, 125, 61, 0.14); --series-5: #ac479a; --series-5-soft: rgba(172, 71, 154, 0.14); --series-6: #4670d7; --series-6-soft: rgba(70, 112, 215, 0.14); /* The same six hues re-stepped for a LIGHT chart surface. These are NOT a light mode: every Origin Cloud surface is dark-only and nothing in origincloud-console or origincloud-operator should reference these. They exist because a chart sometimes leaves the product — an exported/printed cost report, a light-background embed on origincloud-web — and that rendering should still be the same six hues rather than an eyeballed re-tint. Kept as separate named tokens on purpose: a prefers-color-scheme swap on --series-N would flip a permanently-dark console's charts to the light steps the moment the reader's OS is set to light. Validated the same way, --mode light, against both #f4f4f2 and #ffffff: all six checks pass, worst adjacent CVD ΔE 12.2 (deutan), worst adjacent normal-vision ΔE 19.7. */ --series-1-on-light: #0d76a3; --series-2-on-light: #928a17; --series-3-on-light: #8259c7; --series-4-on-light: #258030; --series-5-on-light: #ae499c; --series-6-on-light: #5480e8; }