/* ============================================================================ jops — Design Tokens "An honest instrument panel for a single operator's life." Derived from The Expanse's design discipline (dark substrate, luminous linework, restricted system-colors with strict meaning, chamfered panels, technical typography) tuned for all-day livability rather than a battle station. Every token here is load-bearing; see DESIGN-LANGUAGE.md for the why. ============================================================================ */ :root { /* --------------------------------------------------------------------------- 1. SUBSTRATE — the dark hull. UI emits light; it never sits on white. Cool near-black with a faint blue cast (Agatha-King legibility + calm). --------------------------------------------------------------------------- */ --void: #04060c; /* deepest background — the space outside the hull */ --bg: #070b14; /* app background */ --panel: #0b111e; /* standard panel fill */ --panel-2: #0f1626; /* raised panel / hover */ --panel-3: #131c30; /* selected / active panel */ --well: #05080f; /* recessed well — data tables, the ledger, inputs */ /* --------------------------------------------------------------------------- 2. STRUCTURE — hairline geometry. The "line work" of the instrument. Cyan, low-alpha. This is the calm structural primary, not a status color. --------------------------------------------------------------------------- */ --line: rgba(116, 168, 214, 0.14); /* default hairline frame */ --line-soft: rgba(116, 168, 214, 0.07); /* faint dividers, grid texture */ --line-strong: rgba(120, 196, 236, 0.34); /* emphasized edge / active frame */ --tick: rgba(120, 196, 236, 0.22); /* ruler ticks along panel headers */ /* --------------------------------------------------------------------------- 3. INK — cool whites for text, three legible tiers + an emissive heading. --------------------------------------------------------------------------- */ --ink: #d6e2f5; /* primary text — AA on panel */ --ink-2: #93a4c4; /* secondary — labels, metadata — AA on panel */ --ink-3: #7283a6; /* tertiary — captions, hints, ticks — AA small txt */ --ink-faint: #5a6b90; /* de-emphasized data (done, parked) — AA large/UI */ --ink-mute: #38465f; /* truly inert decoration ONLY (never carries words) */ --ink-bright: #f2f7ff; /* emissive — headings, key values */ /* --------------------------------------------------------------------------- 4. ACCENT — the interactive cyan. Focus, links, the operator's cursor. Distinct from every status color so "interactive" never reads as "status". --------------------------------------------------------------------------- */ --accent: #45c8e8; --accent-bright: #7ee0f7; --accent-dim: #2a7e96; --accent-glow: rgba(69, 200, 232, 0.30); --accent-wash: rgba(69, 200, 232, 0.10); /* --------------------------------------------------------------------------- 5. SYSTEM COLORS — THE honest-mirror palette. Strict, reserved meanings. The article's sharpest lesson: color must mean something, or alerts blend in and the mirror lies. These four are never used decoratively. OK / healthy / go ........ green NUDGE / caution / soft ... amber (persistent, never blocking — P4) ALARM / stop / blocking .. red (reserved; when it's red, it IS an alarm) DEFERRED / parked ........ violet (out of the active working set — P16) --------------------------------------------------------------------------- */ --ok: #34d9a0; --ok-bright: #5cf0bc; --ok-wash: rgba(52, 217, 160, 0.12); --ok-line: rgba(52, 217, 160, 0.42); --nudge: #f0b340; --nudge-bright: #ffcf6e; --nudge-wash: rgba(240, 179, 64, 0.13); --nudge-line: rgba(240, 179, 64, 0.44); --alarm: #ff5468; --alarm-bright: #ff8090; --alarm-wash: rgba(255, 84, 104, 0.13); --alarm-line: rgba(255, 84, 104, 0.46); --defer: #9b8cff; --defer-bright: #bcb1ff; --defer-wash: rgba(155, 140, 255, 0.13); --defer-line: rgba(155, 140, 255, 0.42); /* --------------------------------------------------------------------------- 6. CATEGORICAL — area / mode accents. Deliberately OUTSIDE the system palette so a "lens" is never confused with a "status". Used only as thin pips and edges (P1: one life, not siloed — areas tint, never repaint). --------------------------------------------------------------------------- */ --area-gps: #5b9dff; /* periwinkle */ --area-labor: #e070c8; /* magenta */ --area-personal: #d9a566; /* sand */ /* --------------------------------------------------------------------------- 7. TYPOGRAPHY — three voices: · LABEL — condensed, uppercase, letter-spaced (the instrument labels) · MONO — data, values, IDs, queries, the ledger (the command-line DNA) · PROSE — humanist sans for goals & note bodies (the human's own words) Self-hostable stacks (P13 sovereignty: no hard CDN dependency at runtime). --------------------------------------------------------------------------- */ --font-label: "Saira Condensed", "Barlow Semi Condensed", "Oswald", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace; --font-prose: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --fs-micro: 10px; /* sub-labels, ticks, IDs */ --fs-label: 11px; /* instrument labels (uppercase) */ --fs-sm: 12px; /* dense data, metadata */ --fs-base: 13px; /* body data */ --fs-md: 15px; /* prose, values */ --fs-lg: 19px; /* card titles */ --fs-xl: 26px; /* section headers */ --fs-display:34px; /* the big readout numbers / status */ --ls-label: 0.14em; /* letter-spacing for uppercase labels */ --ls-wide: 0.26em; /* extra-wide spacing for tiny ticks */ /* --------------------------------------------------------------------------- 8. GEOMETRY — chamfer sizes, hairline widths, the radius we DON'T use. The signature shape is the notched/octagonal cut corner, not a rounded rect. --------------------------------------------------------------------------- */ --chamfer: 10px; /* standard panel corner cut */ --chamfer-sm: 5px; /* chips, buttons, small controls */ --chamfer-lg: 16px; /* hero panels */ --hair: 1px; --radius-soft: 2px; /* the only "roundness" we permit — inputs/wells ONLY */ /* The ONE signature silhouette, tokenized so every surface cuts the same way. Two sizes of the SAME 8-cut octagon — panels use --clip-oct, small controls use --clip-oct-sm. Nothing in the system invents its own corner. (DL5) */ --clip-oct: polygon( var(--chamfer) 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)), 0 var(--chamfer)); --clip-oct-sm: polygon( var(--chamfer-sm) 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% calc(100% - var(--chamfer-sm)), calc(100% - var(--chamfer-sm)) 100%, var(--chamfer-sm) 100%, 0 calc(100% - var(--chamfer-sm)), 0 var(--chamfer-sm)); --clip-oct-lg: polygon( var(--chamfer-lg) 0, calc(100% - var(--chamfer-lg)) 0, 100% var(--chamfer-lg), 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, var(--chamfer-lg) 100%, 0 calc(100% - var(--chamfer-lg)), 0 var(--chamfer-lg)); /* --------------------------------------------------------------------------- 9. SPACING — 4px base grid. --------------------------------------------------------------------------- */ --s0: 2px; /* the ONE permitted optical half-step (tight control interiors) */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* --------------------------------------------------------------------------- 10. ELEVATION & GLOW — depth comes from light, not drop shadows. --------------------------------------------------------------------------- */ --inset: inset 0 1px 0 rgba(255,255,255,0.03), inset 0 0 0 1px rgba(0,0,0,0.4); --lift: 0 1px 0 rgba(0,0,0,0.5), 0 8px 24px -12px rgba(0,0,0,0.8); --glow-accent: 0 0 0 1px var(--accent-glow), 0 0 18px -4px var(--accent-glow); --text-glow: 0 0 10px var(--accent-glow); /* --------------------------------------------------------------------------- 12. FOCUS — the keyboard-first promise (DL10) made into one token. Chamfered controls clip a normal outline, so the ring is rendered as an inset accent stroke + a 1px dark gap; non-clipped items use the outline. --------------------------------------------------------------------------- */ --focus-color: var(--accent); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); /* outer (unclipped) */ --focus-ring-in: inset 0 0 0 2px var(--accent), inset 0 0 0 3px var(--void); /* inner (clipped): a confident 2px accent ring + 1px dark sep */ /* --------------------------------------------------------------------------- 13. LAYERING — one z-index scale so overlays never collide (DL16). --------------------------------------------------------------------------- */ --z-hull: 0; /* the body grid + radial washes */ --z-base: 1; /* app content */ --z-raised: 10; /* sticky panel headers, the command bar */ --z-rail: 20; /* the persistent rail / its drawer */ --z-overlay: 100; /* popovers, tooltips, the lens menu */ --z-modal: 1000; /* command palette, dialogs */ --z-toast: 2000; /* transient confirmations */ /* --------------------------------------------------------------------------- 14. DATA-VIZ (DL17) — charts are emissive marks on the dark hull. Default mark = the structural --accent; status colors enter a chart ONLY when the data crosses a threshold (DL3). Built from these tokens, never a chart lib. --------------------------------------------------------------------------- */ --spark-h: 40px; /* default sparkline / strip-lane band height */ --bars-h: 48px; /* default micro bar-chart height */ --gauge-d: 72px; /* default radial gauge diameter */ --chart-stroke: 1.5; /* data-line weight (SVG units, non-scaling) */ /* --------------------------------------------------------------------------- 15. MOTION --------------------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --fast: 120ms; --med: 220ms; }