/* * Copyright (c) 2026 HelloHive (hellohive.ai). All Rights Reserved. * * This file is part of HelloHive and contains confidential and proprietary * trade secrets of HelloHive. Unauthorized copying, * distribution, modification, or use is strictly prohibited. */ /* ═══════════════════════════════════════════════════════════════════════════ xClarus DESIGN TOKENS — the ONE source of truth for the look. Authority: docs/DESIGN.md. Loaded by base.html BEFORE anything else. THE RULE THIS FILE EXISTS TO ENFORCE: this is the only file in the product that may contain a literal colour (hex or rgba), a font face, or a raw px font size. app.css, every template and every script READ these names. tests/central/test_design_tokens.py fails the build on a literal anywhere else. A value that is not a token does not exist. FOUR SECTIONS, in dependency order: 1. THE PALETTE — the brief's block, verbatim (00054) 2. THE EXTENDED PALETTE — raw values the product needs that the brief did not name (overlay step, hover shades, edges, the fifth health state, chart series, the terminal) 3. THE VOCABULARY — surface/text/state/type/space/radius/motion, built only from 1 and 2 4. LEGACY ALIASES — the pre-00054 names 175 templates and 6,000 lines of CSS still read, re-pointed at the new palette so every page inherits it at once ═══════════════════════════════════════════════════════════════════════════ */ /* Inter, bundled (static/fonts/InterVariable.woff2, Inter 4.1, SIL OFL 1.1 — see static/fonts/PROVENANCE.md). NO third-party font call: this app runs on customer-reachable hosts and must not phone home (no Google Fonts). One variable file carries every weight the product uses (400-700) and is smaller than four static weights would be. Italic is not shipped; the product sets almost none, and the browser's synthetic oblique covers it. */ @font-face { font-family: "Inter"; src: url("/static/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ── 1 · THE PALETTE (verbatim from the DESIGN-LANGUAGE brief) ────────── */ --ground:#0e1115; --deep:#0a0d11; --surface:#161b22; --raised:#1c2229; --hairline:#2a323d; --grid:#243040; --text:#f2f5f8; --body:#e6ebf1; --label:#aab5c2; --muted:#8794a3; --faint:#6b7684; --accent:#5aa9ff; --on-accent:#0b0f14; --accent-tint:rgba(90,169,255,.12); --accent-2:#b8a4ff; --accent-2-tint:rgba(184,164,255,.12); --nominal:#3fb27f; --warning:#e0a43a; --critical:#e5484d; --unknown:#6b7684; --warning-tint:rgba(224,164,58,.10); --critical-tint:rgba(229,72,77,.10); --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.35); --shadow-dialog:0 24px 60px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35); --r-card:16px; --r-control:10px; --r-chip:6px; /* Grouped inset lists and sidebar icon tiles (report 00066, DESIGN.md §5a). */ --r-group:18px; --tile:28px; --r-tile:8px; --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --focus:0 0 0 2px rgba(90,169,255,.6); /* COLOUR ROLES (docs/DESIGN.md §2), restated where the values live: --accent (blue) THE ONLY ACTION COLOUR: primary buttons, active nav, checkboxes/toggles, focus rings, the primary node. --accent-2 (purple) HINTS ONLY: text links, eyebrows, secondary chart series, secondary illustration lines, glows, platform/MSP context markers. NEVER on a button, NEVER a status. status colours ONLY for status, and ALWAYS beside the word. */ /* ── 2 · THE EXTENDED PALETTE ─────────────────────────────────────────── */ /* A fourth elevation for things that float over a raised surface (menus, popovers). Elevation, never a border, raises a surface. */ --overlay: #232a33; --hairline-strong: #36404c; --accent-hover: #7cbcff; --accent-edge: rgba(90,169,255,.45); --accent-2-hover: #cbbcff; --accent-2-edge: rgba(184,164,255,.35); --accent-2-glow: rgba(184,164,255,.14); --accent-glow: rgba(90,169,255,.12); /* The FIFTH health state. The brief names four statuses; the product's health vocabulary (services/health.py HealthStatus) has five, and "degrading" (scored, worsening) is not "warning". Orange, between the two it sits between. */ --degrading: #e8793a; --degrading-tint: rgba(232,121,58,.10); --nominal-tint: rgba(63,178,127,.10); --unknown-tint: rgba(107,118,132,.12); /* Red for TEXT. --critical measures 4.42:1 on --surface — under AA for copy — so error sentences use this lighter step (5.73:1); borders, dots and fills keep --critical. */ --critical-text: #ef6a6e; /* Edges: the status hue at the weight a 1px border needs. */ --nominal-edge: rgba(63,178,127,.35); --warning-edge: rgba(224,164,58,.35); --degrading-edge: rgba(232,121,58,.35); --critical-edge: rgba(229,72,77,.40); --unknown-edge: rgba(107,118,132,.35); /* Louder fills — a chip that must read across a room, a honeycomb cell. */ --nominal-fill: rgba(63,178,127,.32); --warning-fill: rgba(224,164,58,.36); --degrading-fill: rgba(232,121,58,.42); --critical-fill: rgba(229,72,77,.40); --unknown-fill: rgba(107,118,132,.28); --warning-mid: rgba(224,164,58,.20); --critical-mid: rgba(229,72,77,.20); --unknown-mid: rgba(107,118,132,.14); --nominal-glow: rgba(63,178,127,.15); --warning-glow: rgba(224,164,58,.14); --degrading-glow: rgba(232,121,58,.25); --critical-glow: rgba(229,72,77,.30); /* Hairline highlights that give a dark surface its top edge. */ --sheen-1: rgba(255,255,255,.012); --sheen-2: rgba(255,255,255,.025); --sheen-3: rgba(255,255,255,.03); --sheen-4: rgba(255,255,255,.04); --sheen-edge: rgba(255,255,255,.25); /* Scrims. --scrim is the dialog scrim from the brief (rgba(10,13,17,.7)). */ --scrim: rgba(10,13,17,.7); --scrim-page: rgba(10,13,17,.6); --scrim-strong: rgba(0,0,0,.4); --scrim-mid: rgba(0,0,0,.35); --scrim-soft: rgba(0,0,0,.15); /* HelloHive parent-brand accent — the ".ai" in the parent wordmark. The one colour here that is not xClarus's to change. */ --hellohive-tld: #818cf8; /* Chart series beyond the two accents (secondary series, heat, info). */ --series-3: #22d3ee; --series-4: #38bdf8; --series-5: #e879f9; /* THE TERMINAL VIEWPORT — the one surface that is not an xClarus surface. Past the inset edge you are looking at somebody else's hardware talking. Desaturated on purpose; the cursor is the only genuinely green thing. */ --term-bg: #05070a; --term-fg: #d3dbd4; --term-cursor: #7fbf98; --term-selection: rgba(127,191,152,.28); /* ── 3 · THE VOCABULARY ───────────────────────────────────────────────── */ /* Surfaces — four steps of elevation, darkest first. */ --surface-page: var(--ground); --surface-card: var(--surface); --surface-raised: var(--raised); --surface-overlay: var(--overlay); /* Text — the brief's five steps collapse onto the four-step hierarchy the components already read. */ --text-primary: var(--text); --text-secondary: var(--label); --text-tertiary: var(--muted); --text-disabled: var(--faint); --border-subtle: var(--raised); --border-default: var(--hairline); --border-strong: var(--hairline-strong); /* The five health states (HealthStatus). UNKNOWN IS GREY, NEVER GREEN, and the dimmest — an unknown must not out-shout a device we measured. */ --state-healthy: var(--nominal); --state-healthy-bg: var(--nominal-tint); --state-healthy-edge: var(--nominal-edge); --state-watch: var(--warning); --state-watch-bg: var(--warning-tint); --state-watch-edge: var(--warning-edge); --state-degrading: var(--degrading); --state-degrading-bg: var(--degrading-tint); --state-degrading-edge: var(--degrading-edge); --state-critical: var(--critical); --state-critical-bg: var(--critical-tint); --state-critical-edge: var(--critical-edge); --state-unknown: var(--unknown); --state-unknown-bg: var(--unknown-tint); --state-unknown-edge: var(--unknown-edge); /* The WORD on an unknown chip. --unknown is 3.75:1 on a card — right for a dot, wrong for copy — so the word is set in --muted (5.6:1). */ --state-unknown-text: var(--muted); --state-watch-loud: var(--warning-fill); --state-watch-mid: var(--warning-mid); --state-critical-loud: var(--critical-fill); --state-critical-mid: var(--critical-mid); --state-unknown-loud: var(--unknown-fill); --state-unknown-mid: var(--unknown-mid); --state-hatch: var(--unknown-mid); --state-limited-edge: var(--unknown-edge); /* THE HIVE RAMP — the same five hues at honeycomb saturation. An alias set, never a second palette. */ --hive-healthy: var(--state-healthy); --hive-healthy-bg: var(--nominal-fill); --hive-watch: var(--state-watch); --hive-watch-bg: var(--warning-fill); --hive-degrading: var(--state-degrading); --hive-degrading-bg: var(--degrading-fill); --hive-critical: var(--state-critical); --hive-critical-bg: var(--critical-fill); --hive-unknown: var(--unknown); --hive-unknown-bg: var(--unknown-fill); --hive-healthy-glow: var(--nominal-glow); --hive-watch-glow: var(--warning-glow); --hive-degrading-glow: var(--degrading-glow); --hive-critical-glow: var(--critical-glow); --hive-cell-edge: var(--sheen-edge); /* The status WORD inside a hive cell (POLISH-3): white at .75 over the cell's own dark base, so it reads as a caption under the score rather than a second headline. */ --hive-word: rgba(255,255,255,.75); /* Accent vocabulary used by components. */ --accent-bg: var(--accent-tint); --accent-loud: var(--accent-edge); --accent-mid: var(--accent-edge); /* Type. Families from the brief; mono is the SYSTEM monospace stack (no second web font — machine values want a mono face, not a brand one). */ --font-sans: var(--font); --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-serif: var(--font); --term-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; /* THE TYPE SCALE (docs/DESIGN.md §4). Ten steps, and the brief's five named sizes sit on them: --fs-1 11 EYEBROW uppercase, tracked --fs-2 12 CAPTION metadata, timestamps, units (--faint) --fs-3 13 CELL table cells, chips, dense rows --fs-4 14 BODY the default --fs-5 15 SECTION section titles (600) --fs-6 18 TITLE-SM card and panel titles --fs-7 20 TITLE drawer titles --fs-8 24 PAGE page titles (600, -.02em) --fs-9 fluid DISPLAY-SM --fs-10 fluid DISPLAY — the one number a page is about */ --fs-1: 11px; --fs-2: 12px; --fs-3: 13px; --fs-4: 14px; --fs-5: 15px; --fs-6: 18px; --fs-7: 20px; --fs-8: 24px; --fs-9: clamp(30px, 3.4vw, 40px); --fs-10: clamp(38px, 4.6vw, 56px); --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --tracking-eyebrow: 0.14em; --tracking-title: -0.02em; /* Table cells are sans (the founder's 2026-08 call); machine values keep mono through `.mono`. One line to revert. */ --table-cell-font: var(--font-sans); /* Spacing — 4px base. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --row-y: var(--sp-2); --row-x: var(--sp-3); --panel-pad: var(--sp-4); --stack-gap: var(--sp-3); --prose-measure: 68ch; /* Shell geometry (docs/DESIGN.md §5). */ --sidebar-width: 240px; --content-max: 1280px; --gutter: 32px; --control-h: 40px; --control-h-auth: 46px; --row-h: 44px; --dialog-w: 480px; --icon: 16px; /* Radius — the brief's three, plus the fully-round pill. */ --r-sm: 4px; --r-md: var(--r-chip); --r-lg: var(--r-control); --r-full: 999px; --motion-instant: 90ms; --motion-fast: 140ms; --motion-slow: 220ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Focus — the brief's ring, as a box-shadow AND as an outline for the components that already draw focus with `outline`. */ --focus-ring: 2px solid var(--accent); --focus-offset: 2px; --shadow-raised: var(--shadow-card); --shadow-overlay: var(--shadow-dialog); /* Tier context bar (PLAN 4.2). Platform/MSP context is a HINT, so the entered-tenant bar is tinted purple, never blue. */ --tier-bar-h: 32px; --tier-bar-h-in: 52px; --tier-bar-in-bg: var(--accent-2-tint); --term-min-height: 460px; /* ── 4 · LEGACY ALIASES ──────────────────────────────────────────────── Every name the product used before 00054, re-pointed. Nothing new may read these; they exist so the refresh reached every page in one change instead of 175 hand edits. The light "xPassword cream" palette is GONE: its names now resolve to dark surfaces, because no page may keep a light background (docs/DESIGN.md §7). */ --xp-cream: var(--ground); --xp-navy: var(--deep); --xp-white: var(--surface); --xp-violet: var(--accent); --xp-violet-soft: var(--accent-2); --xp-violet-tint: var(--accent-2-tint); --xp-violet-border: var(--accent-2-edge); --xp-text: var(--body); --xp-text-muted: var(--muted); --xp-text-on-violet: var(--on-accent); --xp-success: var(--nominal); --xp-warning: var(--warning); --xp-danger: var(--critical); --xp-neutral: var(--unknown); --xp-radius-sm: var(--r-chip); --xp-radius-md: var(--r-control); --xp-radius-lg: var(--r-card); --xp-shadow-overlay: var(--shadow-dialog); --xp-shadow-card: var(--shadow-card); --xp-border-soft: 1px solid var(--hairline); --surface-navy: var(--deep); --ink-0: var(--ground); --ink-1: var(--surface); --ink-2: var(--raised); --ink-3: var(--overlay); --ink-4: var(--hairline); --ink-5: var(--hairline-strong); --line: var(--hairline); --line-2: var(--hairline-strong); --fg-0: var(--text); --fg-1: var(--label); --fg-2: var(--muted); --fg-3: var(--faint); --plate-frame: var(--hairline-strong); /* --brand was the violet "identity and interaction" colour. Interaction is now blue (--accent); identity text moved to --accent-2 through --accent-soft/--brand-soft below. */ --brand: var(--accent); --brand-soft: var(--accent-2); --brand-glow: var(--accent-2-glow); --brand-grain: var(--sheen-1); --brand-grid: var(--sheen-2); --brand-accent-border: var(--accent-2-edge); --brand-hover: var(--accent-hover); --accent-soft: var(--accent-2); --signal: var(--accent); --signal-soft: var(--accent-2); --signal-glow: var(--accent-glow); --status-warning: var(--warning); --status-warning-bg: var(--warning-tint); --status-warning-border: var(--warning-edge); --status-success-bg: var(--nominal-tint); --status-success-glow: var(--nominal-glow); --status-success-halo: var(--nominal-edge); --status-danger-bg: var(--critical-tint); --status-danger-border: var(--critical-edge); --status-danger-panel: var(--critical-tint); --status-critical-bg: var(--critical-tint); --ok: var(--nominal); --warn: var(--warning); --error: var(--critical); --warn-link: var(--warning); --on-light-strong: var(--text); --on-light-scrim: var(--sheen-3); --on-light-scrim-soft: var(--sheen-2); --on-dark-strong: var(--on-accent); --surface-light: var(--raised); --legacy-green-tint: var(--nominal-tint); --legacy-red-tint: var(--critical-tint); --radius: var(--r-chip); /* Two names that were READ before 00054 and declared nowhere — they rendered as nothing. Declared here so the rules that read them work. */ --radius-2: var(--r-control); --surface-sunken: var(--deep); --shadow-md: var(--shadow-card); }