/* ============================================================================ NexusCore Operations — Design Tokens ---------------------------------------------------------------------------- The single source of truth for colour, type, space, and motion. Two rules keep this from sprawling again: 1. ACCENT MEANS INTERACTIVE. Teal is for things you can click or that have focus. It is never "good", never "healthy", never "done". 2. STATUS MEANS STATE. The five status colours are the only way state is expressed, and each state has exactly one value — no synonyms. Anything that needs a colour not listed here needs a conversation, not a new hex value. ========================================================================= */ :root { /* --- Type families ------------------------------------------------------ Archivo: a grotesque with slight condensation. Chosen because it holds up at heavy weights for metrics and buys horizontal room in dense tables. IBM Plex Mono: every machine-generated string — ticket IDs, project keys, timestamps, endpoints, counts — is set in mono, so you can tell at a glance what a system wrote and what a person wrote. */ --font-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- Type scale --------------------------------------------------------- Seven steps. Card titles are one size everywhere; there is no eighth. */ --text-label: 0.6875rem; /* 11px — mono, uppercase, tracked */ --text-meta: 0.8125rem; /* 13px — secondary and supporting text */ --text-body: 0.875rem; /* 14px — UI default */ --text-title: 1rem; /* 16px — card and panel titles */ --text-section: 1.25rem; /* 20px — section headings */ --text-page: 1.75rem; /* 28px — page title, one per page */ --text-metric: 2rem; /* 32px — mono, the number on a stat tile */ --tracking-label: 0.09em; --tracking-tight: -0.011em; --leading-tight: 1.2; --leading-normal: 1.5; --leading-prose: 1.6; /* --- Surfaces ----------------------------------------------------------- A real elevation ladder, replacing four accidental near-blacks. */ --bg: #0a0d0f; /* canvas */ --surface: #101519; /* cards, panels, table bodies */ --surface-raised: #161d22; /* nested blocks, hover, table headers */ --surface-sunken: #05080a; /* wells, code, the sidebar */ --border: #232c33; /* default hairline */ --border-strong: #33404a; /* emphasis, dividers that must read */ /* --- Text --------------------------------------------------------------- */ --text: #eef2f4; /* 16.9:1 on --bg */ --text-secondary: #9aa7b0; /* 7.6:1 on --bg */ --text-tertiary: #7c8992; /* 4.7:1 on --surface-raised — the dimmest permitted */ /* --- Accent: interactive only ------------------------------------------- --accent-ink is the text colour that goes ON accent. Never use --text on an accent fill: white on this teal is 1.86:1 and fails AA badly. */ --accent: #2dd4bf; --accent-hover: #5eead4; --accent-ink: #04211d; /* 11.6:1 on --accent */ --accent-quiet: color-mix(in srgb, var(--accent) 12%, transparent); --accent-line: color-mix(in srgb, var(--accent) 40%, transparent); /* --- Status: state only ------------------------------------------------- One value per state. If you need "a slightly different green", you don't. */ --status-ok: #4ade80; --status-warn: #fbbf24; --status-danger: #f87171; --status-info: #7dd3fc; --status-idle: #7c8992; /* Tints, derived — never hand-authored. */ --status-ok-quiet: color-mix(in srgb, var(--status-ok) 14%, transparent); --status-warn-quiet: color-mix(in srgb, var(--status-warn) 14%, transparent); --status-danger-quiet: color-mix(in srgb, var(--status-danger) 14%, transparent); --status-info-quiet: color-mix(in srgb, var(--status-info) 14%, transparent); --status-idle-quiet: color-mix(in srgb, var(--status-idle) 16%, transparent); /* --- Chart series ------------------------------------------------------- A categorical ramp, assigned in FIXED ORDER and never cycled. Distinct from the status palette on purpose: status colours are reserved for state and must never stand in for "series 4". Validated with the dataviz validator against surface #101519: node validate_palette.js "#0d9488,#3b82f6,#ea580c,#ec4899" \ --mode dark --surface "#101519" --pairs all lightness band PASS - chroma floor PASS - normal-vision floor PASS contrast PASS - CVD separation WARN (deutan dE 6.9, the 6-8 floor band) That WARN is only legal with secondary encoding, so every chart using these MUST also carry a legend, direct labels, and 2px gaps between adjacent fills. A fifth category folds into "Other" in --chart-other; do not invent a fifth hue. */ --chart-1: #0d9488; --chart-2: #3b82f6; --chart-3: #ea580c; --chart-4: #ec4899; --chart-other: #7c8992; --chart-grid: #1c242a; /* --- Space -------------------------------------------------------------- 4px base. Seven steps, no in-between values. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* --- Radius ------------------------------------------------------------- The product is flat and sharp. That was a deliberate choice; keep it. Status rails and table edges stay at 0. */ --radius: 2px; --radius-lg: 4px; /* --- Layout ------------------------------------------------------------- Two widths, both documented. Not five accidental ones. */ --shell-sidebar: 248px; --shell-sidebar-collapsed: 60px; --shell-topbar: 68px; --page-max: 1600px; /* dense: tables, dashboards, queues */ --page-max-narrow: 760px; /* focused: forms, single-record reading */ --page-gutter: var(--space-6); /* --- Motion ------------------------------------------------------------- This is a tool opened dozens of times a day. Motion confirms an action; it never performs. Nothing animates on page load. */ --ease: cubic-bezier(0.2, 0, 0.1, 1); --duration: 120ms; /* --- Focus -------------------------------------------------------------- One focus treatment, visible on every surface in the ladder. */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.45); } /* Fallback for engines without color-mix(). Values are the computed equivalents, so the tint system degrades rather than disappearing. */ @supports not (color: color-mix(in srgb, red 10%, transparent)) { :root { --accent-quiet: rgba(45, 212, 191, 0.12); --accent-line: rgba(45, 212, 191, 0.4); --status-ok-quiet: rgba(74, 222, 128, 0.14); --status-warn-quiet: rgba(251, 191, 36, 0.14); --status-danger-quiet: rgba(248, 113, 113, 0.14); --status-info-quiet: rgba(125, 211, 252, 0.14); --status-idle-quiet: rgba(119, 132, 141, 0.16); } }