/* CHELABS Unified UI v2 — tokens Version: 2.2.0 (see ../VERSION next to this file, and the header of docs/DESIGN_SYSTEM.md) The single source of every design value used by the system. Root Owner decision of 2026-09-14/15: this is the one master design system of the CHELABS ecosystem; every product uses it by default, and a product-specific visual style needs a separate, explicit Root Owner decision (docs/adr/ADR-016-unified-ui-v2-supersedes-design-system-v1.md). Structural values come from the approved reference, docs/design-system/v2-reference/chelabs-ui.css: its :root block is ported verbatim (the --cl-* names are the reference's own), and every literal shadow and structural dimension the reference spells out inside a component rule is lifted here under a role-named token, so that base.css / layout.css / components.css contain no colour literal at all. --------------------------------------------------------------------- [2.1.0, ADR-037] THE BRAND IS NOW A LAYER, NOT A COLOUR. Up to 2.0.0 the reference's purple was written into this file eighteen times over, under eighteen different role names, each one a hand-picked literal. That is unthemeable by construction: a token called --cl-purple cannot be pink for Contenally, and changing the brand meant re-picking eighteen shades by eye. Every brand-derived value below is now DERIVED from the ten-token brand block at the top, by a factor solved out of the reference itself. The scheme's own test is reversibility: feed the reference's purple #7a36ec back through those factors and the reference's values come back, to within 11/255 on any one channel. That number is measured, not asserted — core/tests_design_system.py recomputes it. The CHELABS values here are the approved brand palette (docs/design/standard-2026-09-24), which supersedes the reference's #7a36ec for the platform's own shell. A product overrides the brand block — and nothing else — from themes/.css. --------------------------------------------------------------------- */ :root { /* ================= THE BRAND LAYER ================= Ten tokens. Everything brand-coloured in the system derives from these, and a product theme overrides exactly these (plus the one auth gradient at the bottom of this file) and nothing else. */ /* IDENTITY. The approved colour, verbatim, never altered for any reason including contrast: the mark, accents, the active state and the active tab's underline are all this value. Root Owner decision 2026-09-24. */ --cl-brand: #5B3BFF; /* The same colour as a bare triplet, so every shadow, focus ring and translucent wash below is one definition instead of eight hand-written rgba() literals. */ --cl-brand-rgb: 91, 59, 255; /* INTERACTIVE SURFACE. Equal to --cl-brand unless NEITHER ink nor white carries AA text on it, in which case it — and only it — darkens by the smallest step that clears the threshold. CHELABS needs no such step: white on #5B3BFF measures 5.98:1. AdsAlly is the one shell in the ecosystem that does; themes/adsally.css carries the measurement and the reason. */ --cl-brand-fill: var(--cl-brand); /* The gradient's far stop, and the pressed state. */ --cl-brand-strong: #5235e7; --cl-brand-hover: #4e33db; /* TEXT ON THE FILL. Whichever of ink or white actually reads on --cl-brand-fill. White on #5B3BFF is 5.98:1. Four shells of the eight take ink here instead; that is a real difference between brands, not a mistake. */ --cl-brand-on: #ffffff; /* BRAND-COLOURED TEXT ON A LIGHT BACKGROUND — links, the active nav label, the wordmark. One value, chosen as the darkest of what white, --cl-page and --cl-brand-soft each demand, because the active nav item is brand text on brand soft and that is the case that fails first. #5B3BFF already clears all three (5.98 / 5.54 / 5.11:1), so for CHELABS this is the approved colour unchanged. */ --cl-brand-text: var(--cl-brand); /* The hover of that text. Derived from --cl-brand-text and NOT from --cl-brand-hover, which is a FILL. In a shell whose text colour had to be darkened away from the brand — MetricAlly's #0e7b90 against its #16BDDC — reusing the fill's hover would make a link get LIGHTER on hover and drop below AA. This one is always darker than the resting state, in every shell, by construction. */ --cl-brand-text-hover: #4e33db; /* THE TINTS. Fixed fractions toward white, solved out of the reference's own #f1ecfe / #faf8ff / #e4d8ff. */ --cl-brand-soft: #eeebff; --cl-brand-soft-2: #f8f7ff; --cl-brand-line: #e1dbff; /* ---------- Core surfaces (reference :root, verbatim) ---------- */ --cl-page: #f6f6fa; --cl-surface: #ffffff; --cl-surface-soft: #fbfaff; --cl-sidebar: #ffffff; --cl-line: #ececf2; --cl-line-strong: #dedee7; /* ---------- Text (reference :root, verbatim) ---------- */ --cl-ink: #1e1b2e; --cl-text: #2a263c; --cl-muted: #938da8; --cl-muted-2: #b2adc2; /* ---------- Semantics (reference :root, verbatim) ---------- Deliberately NOT part of the brand layer. A success is green in every product of the ecosystem; a brand that recoloured it would make "did that work" a question about which product you are in. */ --cl-blue: #12a4df; --cl-pink: #eb3f92; --cl-green: #1fac68; --cl-green-soft: #e7f8ef; --cl-orange: #f59e2e; --cl-orange-soft: #fff3df; --cl-red: #ef4e50; --cl-red-soft: #fff0f0; --cl-yellow-soft: #fff6e6; /* ---------- Effects (reference :root; the brand-tinted ones now derive from --cl-brand-rgb) ---------- */ --cl-shadow-card: 0 10px 30px rgba(36, 28, 70, 0.055), 0 1px 2px rgba(36, 28, 70, 0.025); --cl-shadow-float: 0 16px 40px rgba(36, 28, 70, 0.13), 0 3px 10px rgba(36, 28, 70, 0.06); --cl-shadow-brand-glow: 0 12px 24px rgba(var(--cl-brand-rgb), 0.20); --cl-gradient: linear-gradient(135deg, var(--cl-brand-fill) 0%, var(--cl-brand-strong) 100%); /* ---------- Shape (reference :root, verbatim) ---------- */ --cl-r-sm: 10px; --cl-r-md: 14px; --cl-r-lg: 18px; --cl-r-xl: 22px; --cl-r-pill: 999px; /* ---------- Layout (reference :root, verbatim) ---------- */ --cl-sidebar-w: 282px; --cl-content-max: 1500px; /* ---------- Motion (reference :root, verbatim) ---------- */ --cl-ease: cubic-bezier(.2,.8,.2,1); --cl-fast: 150ms var(--cl-ease); --cl-normal: 220ms var(--cl-ease); /* ---------- Typography ---------- The reference's own stack. Inter is served from ./fonts (see base.css); no request ever leaves the origin (Security Baseline: no external font/script loads). */ --cl-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; /* (not in the reference) The reference has no monospace text; the Control Plane shows slugs, keys and fingerprints, which need one. */ --cl-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* ---------- Roles the reference spells out inside components ---------- A non-brand literal here is the reference's own, named by the role the reference uses it for. A brand-derived one is a var() onto the block above — that is what makes the system themeable. */ /* shell */ --cl-sidebar-line: #efeff4; /* .sidebar border-right */ --cl-brand-wordmark: var(--cl-brand-text); /* .brand-name (was --cl-brand: #5f29b9) */ --cl-nav-label: #aaa5b8; /* .nav-label */ --cl-nav-text: #817b98; /* .nav-item */ --cl-nav-hover: var(--cl-brand-text); /* .nav-item:hover colour */ --cl-nav-hover-bg: var(--cl-brand-soft-2); /* .nav-item:hover background */ --cl-nav-active: var(--cl-brand-text); /* .nav-item.active colour */ --cl-profile-sub: #9f99b1; /* .profile-link span */ --cl-avatar-text: var(--cl-brand-text); /* .avatar */ --cl-subtitle: #9993aa; /* .page-subtitle */ /* buttons */ --cl-ghost-text: #817a97; /* .btn.ghost */ /* cards */ --cl-card-line: #eeeef4; /* .card border */ --cl-card-head-line: #f0eff5; /* .card-head border-bottom */ /* tables */ --cl-th-text: #9993a9; /* .data-table th */ --cl-th-line: #efeff4; /* .data-table th border-bottom */ --cl-td-text: #29253a; /* .data-table td, .input colour */ --cl-td-line: #f0f0f4; /* .data-table td border-bottom */ --cl-row-hover: #fcfbff; /* .data-table tbody tr:hover */ --cl-strong-text: #242035; /* .query */ --cl-muted-text: #9d97aa; /* .muted */ --cl-gray-soft: #f4f3f7; /* .pos.gray background */ /* badges — the semantic three keep their own hues; the accent one is the brand, which is the whole point of calling it "accent" */ --cl-badge-orange-bg: #fff2dd; --cl-badge-orange-text: #df8b20; --cl-badge-red-bg: #ffeaea; --cl-badge-red-text: #ef5558; --cl-badge-green-bg: #e5f8ee; --cl-badge-green-text: #20a35d; --cl-badge-accent-bg: var(--cl-brand-soft); --cl-badge-accent-text: var(--cl-brand-text); /* notice (.notice — the amber one; the other tones reuse the semantic soft colours above) */ --cl-notice-line: #f1d8a8; --cl-notice-bg: #fff7e8; --cl-notice-text: #a35d0b; --cl-notice-strong: #8e5009; /* (not in the reference) The reference has only the amber notice; for 14px body text on the green / red soft backgrounds the semantic --cl-green / --cl-red measure 2.7:1 / 3.1:1, below WCAG AA. These are the same hues darkened the way the reference darkens its amber (#f59e2e -> #a35d0b); the icon keeps the undarkened semantic colour. */ --cl-message-success-text: #157a4b; --cl-message-error-text: #c0393b; /* forms */ --cl-label: #302b43; /* .label */ --cl-input-line: #e9e8f0; /* .input border */ --cl-input-focus-line: #b09aff; /* .input:focus border (brand tinted 48.1%) */ --cl-input-disabled-bg: #f5f4f8; --cl-input-disabled-text: #aaa5b4; --cl-placeholder: #a9a3b4; /* .search input::placeholder */ /* tabs and their counters (reference .tabs / .tab / .count-pill) */ --cl-tab-text: #9b95ab; /* .tab */ --cl-tab-active-text: #272239; /* .tab.active */ --cl-tabs-gap: 34px; /* .tabs gap */ --cl-tab-underline-h: 2px; /* .tab.active::after */ --cl-pill-bg: #f3f1f8; /* .count-pill */ --cl-pill-text: #8c85a1; --cl-pill-size: 22px; /* search box (reference .search) */ --cl-search-line: #ecebf3; /* .search border */ --cl-search-icon: #a19bad; /* .search leading glyph */ --cl-search-h: 48px; /* the before -> after pair in a change history row. (not in chelabs-ui.css: the pattern is specified by the approved ui-reference/03_change_history.png in docs/design/standard-2026-09-24, which is a Root Owner decision of its own. The chip colours are the count pill's neutral and the brand's soft tint, reused rather than newly picked.) */ --cl-diff-arrow: #b2adc2; /* lists / detail */ --cl-link: var(--cl-brand-text); /* .project-name */ --cl-caption: #aaa4b3; /* .project-domain */ --cl-info-key: #9993a7; /* .info-key */ --cl-info-value: #282438; /* .info-value */ --cl-row-line: #f0eff4; /* .project-row / .info-row border-top */ --cl-status-dot: #19ad63; /* .status-dot */ /* auth */ --cl-auth-sub: #77718d; /* .auth-sub */ --cl-auth-muted: #706a80; /* the secondary auth link */ --cl-auth-check: #29e579; /* .check — semantic green, not brand */ /* The one brand value a theme overrides outside the block above: the panel is a composite of a radial highlight over a two-stop gradient, so it cannot be assembled from the brand tokens without a colour function this system does not allow. Each theme carries its own, with the white-on-deep-stop ratio measured in its file. */ --cl-auth-right: radial-gradient(circle at 30% 20%, #6a4dff 0, transparent 36%), linear-gradient(145deg, #5B3BFF 0%, #442cbe 100%); --cl-on-accent: #ffffff; --cl-on-accent-soft: rgba(255, 255, 255, .83); --cl-on-accent-strong: rgba(255, 255, 255, .9); /* selection / focus */ --cl-selection: #d6ccff; /* brand tinted 76.4% */ --cl-focus-outline: rgba(var(--cl-brand-rgb), .25); --cl-input-focus-ring: 0 0 0 4px rgba(var(--cl-brand-rgb), .08); /* shadows the reference gives to individual components. [2.1.0] --cl-shadow-brand is GONE, not merely unused: it existed only to drop a shadow under the CSS-drawn mark, and the mark is now the approved brand asset served as an image. A logo does not get a drop shadow. */ --cl-shadow-btn: 0 7px 14px rgba(var(--cl-brand-rgb), .14); /* .btn */ --cl-shadow-btn-active: 0 5px 12px rgba(var(--cl-brand-rgb), .13); /* .btn:active */ --cl-shadow-secondary: 0 5px 14px rgba(36, 28, 70, .04); /* .btn.secondary */ --cl-shadow-secondary-hover: 0 8px 18px rgba(36, 28, 70, .06); --cl-shadow-input: 0 1px 0 rgba(30, 20, 60, .02); /* .input */ --cl-shadow-accent-card: 0 14px 28px rgba(var(--cl-brand-rgb), .16); /* .stat-card.accent */ /* ---------- Structural dimensions ---------- Lifted from the reference's component rules so layout and control sizes are declared once. */ --cl-content-pad: 40px 44px 56px; /* .content */ --cl-card-pad: 28px; /* .card.pad, .form-card */ --cl-gap: 24px; /* grid / stack gap */ --cl-control-h: 44px; /* .btn */ --cl-control-h-sm: 37px; /* .btn.sm */ --cl-input-h: 47px; /* .input */ --cl-auth-input-h: 61px; /* .auth-form .input / .btn */ --cl-nav-item-h: 48px; /* .nav-item */ --cl-brand-h: 68px; /* .brand */ --cl-brand-mark-size: 30px; /* .brand-mark (the served asset's box) */ --cl-avatar-size: 38px; /* .avatar */ --cl-topbar-h: 56px; /* mobile top bar (not in the reference) */ /* radii the reference assigns to specific components */ --cl-r-btn: 11px; /* .btn, .input, .select-like */ --cl-r-btn-sm: 10px; /* .btn.sm */ --cl-r-nav: 12px; /* .nav-item, .profile-link, .search */ --cl-r-badge: 8px; /* .badge */ --cl-r-notice: 13px; /* .notice, auth inputs/button */ --cl-r-xs: 6px; /* inline code chips */ /* No --cl-r-mark: the approved mark artwork carries its own rounded corners, and a CSS radius on top would clip a second curve into it. See .chelabs-brand-mark in layout.css. */ /* type sizes the reference assigns to specific components */ --cl-text-body: 15px; /* body */ --cl-text-page-title: 30px; /* .page-title */ --cl-text-page-title-sm: 26px; /* .page-title at <=640px */ --cl-text-card-title: 18px; /* .card-title, .info-title */ --cl-text-auth-title: 34px; /* .auth-title */ --cl-text-brand: 22px; /* .brand-name */ }