/* ============================================================ STELLARIA DESIGN TOKENS · v1.0.0 Canonical foundation for the Stellaria visual system. Every component reads from these custom properties. Override them in another project to rebrand without touching component CSS. Categories covered: · Color — accent, surfaces, neutrals, borders, status, semantic, domain, confidence, gold, on-accent, elevation ladder, focus, selection · Theme — light-theme override block · Type — families, scale, weights, line-heights, letter-spacings, reading measures · Spacing — 8px scale (with 4px half-step), section rhythm · Radius — 0 / 1 / 2 / 3 / pill · Borders — widths and the canonical hairline composite · Z-index — semantic stacking scale · Layout — max-widths and gutter · Breaks — reference-only breakpoint values · Motion — easings and durations (with reduced-motion) · Shadow — none, except a single accessibility focus ring Reference aesthetic: Palantir · Shield AI · Vantor · Planet. Institutional, technical, under-designed, legible under skim. No glow. No glassmorphism. No drop shadows for elevation. ============================================================ */ :root { /* ── COLOR · BRAND ACCENT ──────────────────────────────────── One decision-grade accent. Used sparingly: links, primary CTAs, current-state nav, key data emphasis. Never decorative. */ --c-accent: oklch(0.52 0.22 260); /* #085cee */ --c-accent-hi: oklch(0.62 0.22 260); /* hover */ --c-accent-lo: oklch(0.40 0.20 260); /* pressed */ --c-accent-wash: oklch(0.52 0.22 260 / 0.14); /* surface tint */ --c-on-accent: oklch(0.985 0.003 260); /* fg on accent fill */ /* ── COLOR · SURFACES ──────────────────────────────────────── Near-black canvas, tinted toward the brand hue so neutrals read as one family. Three page-level grounds for layered compositions; surface tokens for cards and panels. */ --c-bg: oklch(0.11 0.014 260); /* primary page ground */ --c-bg-2: oklch(0.13 0.015 260); /* recessed band */ --c-bg-3: oklch(0.09 0.014 260); /* deepest well */ --c-surface: oklch(0.16 0.016 260 / 0.55); /* cards, panels */ --c-surface-2: oklch(0.20 0.018 260 / 0.75); /* elevated */ /* ── COLOR · ELEVATION LADDER ─────────────────────────────── Tint steps replace drop shadows. Stack panels by stepping up the ladder; each step is a small lightness increment against the same hue. No box-shadow elevation, ever. */ --c-elev-0: oklch(0.11 0.014 260); /* page ground */ --c-elev-1: oklch(0.14 0.015 260); /* base panel */ --c-elev-2: oklch(0.17 0.016 260); /* nested panel */ --c-elev-3: oklch(0.21 0.018 260); /* topmost (modal) */ /* ── COLOR · NEUTRALS ─────────────────────────────────────── */ --c-white: oklch(0.985 0.003 260); /* primary text */ --c-fg-dim: oklch(0.78 0.010 260); /* body copy */ --c-fg-muted: oklch(0.60 0.012 260); /* tertiary, captions */ --c-gray: oklch(0.68 0.012 260); --c-silver: oklch(0.56 0.012 260); /* ── COLOR · BORDERS ─────────────────────────────────────── */ --c-border: oklch(0.32 0.018 260 / 0.55); --c-border-h: oklch(0.52 0.18 260 / 0.45); /* hover */ /* ── COLOR · FOCUS & SELECTION ────────────────────────────── Focus ring tracks the accent. Offset color is the page ground so the ring reads as a halo, not a fill. Selection is a subtle accent wash so highlighted text stays legible. */ --c-focus: var(--c-accent-hi); --c-focus-offset: var(--c-bg); --c-selection: oklch(0.52 0.22 260 / 0.32); --c-selection-fg: var(--c-white); /* ── COLOR · STATUS (tactical only) ───────────────────────── */ --c-alert: #FF4D5E; /* live alert, P1 */ --c-stamp: #FF6A24; /* tactical stamp overlay, P2 */ --c-scan: #2FD9C8; /* scanning, P3 */ --c-dorm: #6EA3FF; /* dormant, P4 */ --c-warn: oklch(0.72 0.16 55); /* true warning */ --c-danger: oklch(0.55 0.22 25); /* destructive only */ /* ── COLOR · SEMANTIC (UI states, non-tactical) ────────────── Use for tag chips and inline status that is not part of the tactical palette: form validation, generic notices, "no data". */ --c-success: oklch(0.72 0.16 150); /* confirm / passed */ --c-info: oklch(0.70 0.12 230); /* neutral notice (cooler than accent) */ --c-neutral: oklch(0.65 0.012 260); /* "no signal" fill */ /* ── COLOR · DOMAIN (aircraft role) ────────────────────────── Used to tint role tags so an analyst can scan a list of classifications and parse role-class at a glance. Reach for these only on role/class tags — not generic UI. */ --c-role-fighter: oklch(0.62 0.20 25); /* hot red-orange */ --c-role-bomber: oklch(0.55 0.18 320); /* magenta */ --c-role-transport: oklch(0.70 0.16 95); /* sand / yellow-green */ --c-role-helo: oklch(0.68 0.16 180); /* teal-green */ --c-role-civil: oklch(0.72 0.10 260); /* desaturated blue-gray */ --c-role-unknown: oklch(0.55 0.012 260); /* dim neutral */ /* ── COLOR · CONFIDENCE TIERS ──────────────────────────────── hi reuses --c-accent so high-confidence reads as the brand. */ --c-conf-mid: oklch(0.72 0.14 75); /* amber */ --c-conf-lo: oklch(0.55 0.012 260); /* muted gray */ /* ── COLOR · GOLD ───────────────────────────────────────── Used for "all sources agree" / consensus chips and any other pinnacle state where the tactical palette doesn't fit. */ --c-gold: oklch(0.85 0.16 90); /* ── TYPOGRAPHY · FAMILIES ───────────────────────────────── Two families, not three. Display covers everything that is not telemetry; mono covers tabular data and labels. */ --f-display: 'Host Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --f-body: 'Host Grotesk', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── TYPOGRAPHY · SCALE ───────────────────────────────────── All sizes are fluid via clamp(). The viewport-derived middle value lets type breathe, the floor and ceiling keep it sane. */ --t-xs: clamp(11px, 0.75rem, 12px); --t-sm: clamp(13px, 0.86rem, 14px); --t-body: clamp(15px, 1rem, 17px); --t-lead: clamp(17px, 1.12rem, 19px); --t-h4: clamp(18px, 1.35vw, 22px); --t-h3: clamp(20px, 1.8vw, 26px); --t-h2: clamp(32px, 4.2vw, 56px); --t-h1: clamp(44px, 7vw, 92px); --t-display: clamp(56px, 9vw, 132px); /* ── TYPOGRAPHY · WEIGHTS ─────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ── TYPOGRAPHY · LINE HEIGHTS ────────────────────────────── tight — display headlines snug — section headlines, leads base — body prose relaxed — long-form reading */ --lh-tight: 1.04; --lh-snug: 1.22; --lh-base: 1.6; --lh-relaxed: 1.7; /* ── TYPOGRAPHY · LETTER SPACING ──────────────────────────── Negative on headlines to tighten optical air; mild negative on body for visual density; positive on mono caps for the classic institutional eyebrow. */ --ls-display: -0.022em; --ls-heading: -0.012em; --ls-body: -0.005em; --ls-mono-cap: 0.16em; /* ── TYPOGRAPHY · READING MEASURES ────────────────────────── Use these instead of hard widths for prose containers. */ --measure-body: 66ch; --measure-lead: 54ch; /* ── SPACING · 8px BASE ────────────────────────────────────── Half-step exists only for tight icon-text gaps; never use it for layout rhythm. All section-level spacing uses the full 8px scale or the fluid section-rhythm tokens below. */ --sp-0_5: 4px; /* icon ↔ text gap only */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 48px; --sp-7: 56px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; --sp-14: 112px; --sp-16: 128px; --sp-24: 192px; /* Section rhythm: dense vs editorial sections breathe differently. */ --section-tight: clamp(72px, 9vw, 112px); --section-loose: clamp(120px, 13vw, 176px); /* ── ICON SIZING ───────────────────────────────────────── Three institutional sizes. Default 20px reads at body-text height; 16px for dense rows and inline mono; 24px for nav icons and primary controls. All icons render via stroke (currentColor) so parent text-color drives them. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-stroke: 1.75; /* ── RADIUS ────────────────────────────────────────────────── The institutional aesthetic prefers sharp corners. Anything beyond 8px reads as consumer-software and violates restraint; do not introduce additional radius tokens. The pill is for dot indicators and status chips only. */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-pill: 999px; /* ── BORDER WIDTHS ────────────────────────────────────────── The hairline composite is the canonical 1px divider used across panels, dl rows, and section dividers. */ --border-1: 1px; --border-2: 2px; --border-3: 3px; /* accent rail on featured tiles */ --border-hairline: 1px solid var(--c-border); /* ── Z-INDEX SCALE ────────────────────────────────────────── Semantic stacking. Components must reference these tokens rather than inventing magic numbers. */ --z-base: 0; --z-sticky: 50; --z-nav: 100; --z-overlay: 500; --z-modal-backdrop: 1000; --z-modal: 1010; --z-toast: 1100; /* ── LAYOUT ────────────────────────────────────────────────── max-w — the institutional shell max-w-narrow — forms, dashboards, dense data screens max-w-prose — long-form reading column */ --max-w: 1440px; --max-w-narrow: 1080px; --max-w-prose: 720px; --gutter: clamp(24px, 5vw, 80px); /* ── BREAKPOINTS · REFERENCE ONLY ─────────────────────────── Custom properties are not consumable inside @media rules; these exist as a single source of truth for documentation and for use inside @container queries. Use the literal pixel values in @media (min-width: …) declarations. */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 980px; --bp-xl: 1280px; --bp-2xl: 1600px; /* ── MOTION · CURVES ───────────────────────────────────────── Two easings only. Tactical settles fast; standard is the general-purpose curve. Linear is permitted only for indeterminate progress where any curvature would lie. */ --ease-tactical: cubic-bezier(0.16, 1, 0.3, 1); --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --ease-linear: linear; /* ── MOTION · DURATIONS ────────────────────────────────────── instant — focus rings, immediate state echoes fast — hover, color, small surface mid — card surface, modal entry slow — hero choreography only */ --dur-instant: 50ms; --dur-fast: 100ms; --dur-mid: 400ms; --dur-slow: 800ms; /* ── SHADOW · NONE (with one exception) ────────────────────── The system uses tint steps (see elevation ladder) for depth. No drop shadows are permitted for elevation, hover, or decorative lift. The single sanctioned shadow is the accessibility focus ring below: a 2px halo offset by the page ground so the ring reads against any surface. */ --shadow-focus: 0 0 0 2px var(--c-focus-offset), 0 0 0 4px var(--c-accent); /* ── DATA VIZ · CHART PALETTE ───────────────────────────── 8 categorical series colors for line/bar/area/scatter, plus sequential and diverging scales for heatmaps and threshold-crossing variables. See docs/CHARTS.md for usage rules. Discipline: every series at least 30 degrees apart in OKLCH hue, lightness banded together so no series dominates by accident. Series 1 reuses --c-accent so the primary metric reads as the brand color. */ --chart-1: var(--c-accent); /* primary / brand */ --chart-2: oklch(0.68 0.16 180); /* teal */ --chart-3: oklch(0.72 0.16 95); /* sand */ --chart-4: oklch(0.65 0.18 320); /* magenta */ --chart-5: oklch(0.62 0.20 25); /* hot orange */ --chart-6: oklch(0.78 0.14 230); /* cool blue */ --chart-7: oklch(0.60 0.18 145); /* moss green */ --chart-8: oklch(0.85 0.16 90); /* gold */ /* Sequential scale (heatmaps, single-variable intensity) */ --chart-seq-1: oklch(0.30 0.06 260); --chart-seq-2: oklch(0.42 0.10 260); --chart-seq-3: oklch(0.55 0.14 260); --chart-seq-4: oklch(0.68 0.18 260); --chart-seq-5: oklch(0.82 0.20 260); /* Diverging scale (variables that cross a zero / threshold) */ --chart-div-low-2: oklch(0.55 0.18 25); /* strong negative */ --chart-div-low-1: oklch(0.70 0.10 25); /* weak negative */ --chart-div-mid: oklch(0.55 0.012 260); /* neutral */ --chart-div-high-1: oklch(0.70 0.10 230); /* weak positive */ --chart-div-high-2: oklch(0.55 0.18 230); /* strong positive */ } /* ============================================================ LIGHT THEME Mirrors every color token. Same accent hue — institutional blue works on light. Surfaces step DOWN in lightness; text colors invert; borders lift their lightness floor. ============================================================ */ [data-theme="light"] { /* Accent — identical hue, identical chroma. The institutional blue is theme-agnostic. Wash is darker so it reads against the light ground. */ --c-accent: oklch(0.52 0.22 260); --c-accent-hi: oklch(0.46 0.22 260); /* hover deepens */ --c-accent-lo: oklch(0.36 0.20 260); /* pressed */ --c-accent-wash: oklch(0.52 0.22 260 / 0.10); --c-on-accent: oklch(0.985 0.003 260); /* Surfaces — light ground, surfaces step DOWN in lightness. */ --c-bg: oklch(0.98 0.005 260); --c-bg-2: oklch(0.96 0.006 260); --c-bg-3: oklch(0.99 0.004 260); --c-surface: oklch(0.95 0.007 260 / 0.85); --c-surface-2: oklch(0.92 0.008 260 / 0.95); /* Elevation ladder — inverted: lighter = recessed, darker = closer to the reader. */ --c-elev-0: oklch(0.98 0.005 260); --c-elev-1: oklch(0.96 0.006 260); --c-elev-2: oklch(0.94 0.007 260); --c-elev-3: oklch(0.91 0.008 260); /* Neutrals — text steps from near-black to muted. */ --c-white: oklch(0.18 0.012 260); /* "white" = primary text */ --c-fg-dim: oklch(0.32 0.012 260); --c-fg-muted: oklch(0.48 0.012 260); --c-gray: oklch(0.42 0.012 260); --c-silver: oklch(0.55 0.012 260); /* Borders — slightly darker than surface so hairlines remain readable. */ --c-border: oklch(0.78 0.012 260 / 0.75); --c-border-h: oklch(0.52 0.18 260 / 0.55); /* Focus & selection */ --c-focus: var(--c-accent-hi); --c-focus-offset: var(--c-bg); --c-selection: oklch(0.52 0.22 260 / 0.20); --c-selection-fg: oklch(0.18 0.012 260); /* Status (tactical) — same hex anchors, dim slightly for contrast. */ --c-alert: #E63B4D; --c-stamp: #E55A18; --c-scan: oklch(0.55 0.14 190); --c-dorm: oklch(0.52 0.16 260); --c-warn: oklch(0.58 0.16 55); --c-danger: oklch(0.48 0.22 25); /* Semantic */ --c-success: oklch(0.55 0.16 150); --c-info: oklch(0.55 0.14 230); --c-neutral: oklch(0.55 0.012 260); /* Domain */ --c-role-fighter: oklch(0.52 0.20 25); --c-role-bomber: oklch(0.45 0.18 320); --c-role-transport: oklch(0.55 0.16 95); --c-role-helo: oklch(0.50 0.16 180); --c-role-civil: oklch(0.52 0.10 260); --c-role-unknown: oklch(0.55 0.012 260); /* Confidence */ --c-conf-mid: oklch(0.58 0.14 75); --c-conf-lo: oklch(0.55 0.012 260); /* Gold */ --c-gold: oklch(0.62 0.14 90); /* ── DATA VIZ · CHART PALETTE · LIGHT ───────────────────── Lower lightness across the series so each color reads against an off-white canvas. Hues are preserved; chroma is held or trimmed slightly to avoid neon against light. Sequential scale inverts direction: dark = high intensity. */ --chart-1: var(--c-accent); --chart-2: oklch(0.48 0.16 180); --chart-3: oklch(0.52 0.16 95); --chart-4: oklch(0.46 0.18 320); --chart-5: oklch(0.50 0.20 25); --chart-6: oklch(0.50 0.18 230); --chart-7: oklch(0.48 0.18 145); --chart-8: oklch(0.55 0.16 90); --chart-seq-1: oklch(0.85 0.04 260); --chart-seq-2: oklch(0.72 0.08 260); --chart-seq-3: oklch(0.58 0.14 260); --chart-seq-4: oklch(0.46 0.18 260); --chart-seq-5: oklch(0.34 0.18 260); --chart-div-low-2: oklch(0.46 0.18 25); --chart-div-low-1: oklch(0.62 0.12 25); --chart-div-mid: oklch(0.78 0.010 260); --chart-div-high-1: oklch(0.58 0.12 230); --chart-div-high-2: oklch(0.42 0.18 230); } /* ============================================================ REDUCED MOTION Token-level concession. Per-component animations still need their own @media (prefers-reduced-motion: reduce) guards; this provides a cheap blanket for transitions that read the duration tokens directly. ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0.01ms; --dur-fast: 0.01ms; --dur-mid: 0.01ms; --dur-slow: 0.01ms; } }