/* ============================================================ Orbita Design System · v1.0 Telemetry-grade control surface for satellite fleets. ------------------------------------------------------------ Drop this file into a page's and consume the tokens below via var(--token-name). Designed for dark-by-default surfaces; signal-500 is the ONLY brand accent — use sparingly. ============================================================ */ /* Webfonts — Inter (UI), Instrument Serif (display), JetBrains Mono (telemetry) */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap'); :root { /* ──────────────────────────────────────────────────────── COLOR · Signal Orange (primary accent · 10-step ramp) signal-500 is canonical. Reserved for primary action, active state, brand moments, the most important datum. ──────────────────────────────────────────────────────── */ --signal-50: #fff3e8; /* tinted callout background */ --signal-100: #ffdcb8; --signal-200: #ffc187; --signal-300: #ffa455; --signal-400: #ff8a30; /* hover lift */ --signal-500: #ff7a18; /* ★ canonical brand */ --signal-600: #e36410; /* pressed */ --signal-700: #bf4f08; /* dark borders, focus ring */ --signal-800: #8c3a06; --signal-900: #5a2503; /* ──────────────────────────────────────────────────────── COLOR · Surfaces (dark-mode default · 6-step neutral) Build depth without colored shadows. Cards sit one step above their background; hovered rows step up by one. ──────────────────────────────────────────────────────── */ --void: #04060a; /* the absolute floor */ --bg-0: #07090c; /* canvas */ --bg-1: #0c1117; /* card */ --bg-2: #10161e; /* panel */ --bg-3: #161d27; /* control */ --bg-4: #1d2632; /* raised */ --bg-5: #27313f; /* hovered raised */ /* ──────────────────────────────────────────────────────── COLOR · Lines / Borders ──────────────────────────────────────────────────────── */ --line-1: #1a2330; /* default border */ --line-2: #2a3645; /* strong border, input outline */ --line-3: #3a4a5d; /* hover border */ /* ──────────────────────────────────────────────────────── COLOR · Text (5-step scale on dark surfaces) ──────────────────────────────────────────────────────── */ --text-0: #ffffff; /* headline */ --text-1: #e6ecf3; /* primary body */ --text-2: #aab4c0; /* secondary body */ --text-3: #6c7886; /* tertiary / muted / metadata */ --text-4: #4a5462; /* disabled */ /* ──────────────────────────────────────────────────────── COLOR · Semantic (status · 1:1 with terminal health) Never repurpose for decoration. ──────────────────────────────────────────────────────── */ --ok-500: #3ecf8e; --warn-500: #ffc857; --crit-500: #ff4d5b; --info-500: #5da9ff; --ok-tint: rgba(62, 207, 142, .14); --warn-tint: rgba(255, 200, 87, .14); --crit-tint: rgba(255, 77, 91, .14); --info-tint: rgba(93, 169, 255, .14); /* ──────────────────────────────────────────────────────── TYPOGRAPHY · Families Three voices, three jobs. They don't trade places. ──────────────────────────────────────────────────────── */ --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* TYPOGRAPHY · Scale (token / size / line-height / role) */ --fs-display: 96px; --lh-display: .95; /* hero · cover slide */ --fs-h1: 54px; --lh-h1: 1.02; /* section opening */ --fs-h2: 30px; --lh-h2: 1.2; /* in-app page header */ --fs-h3: 22px; --lh-h3: 1.3; /* card / settings group */ --fs-body-lg: 17px; --lh-body-lg: 1.6; /* marketing lead */ --fs-body: 14px; --lh-body: 1.55; /* UI default */ --fs-label: 13px; --lh-label: 1.4; /* button / field label */ --fs-caption: 11.5px; --lh-caption: 1.55; /* mono metadata */ --fs-eyebrow: 10.5px; --lh-eyebrow: 1.6; /* mono ALL CAPS section label */ /* Tracking */ --tracking-display: -1.5px; --tracking-tight: -.3px; --tracking-normal: 0; --tracking-wide: .5px; --tracking-eyebrow: 2px; --tracking-eyebrow-loose: 2.5px; /* ──────────────────────────────────────────────────────── RADII ──────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-pill: 999px; /* ──────────────────────────────────────────────────────── SPACING · 4px base grid ──────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ──────────────────────────────────────────────────────── ELEVATION · 3-step shadow ladder + glow Layered glass: outer drop + 1px inner-top highlight. Never colored shadows — only the cyan/orange glow uses hue. ──────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03) inset; --shadow-md: 0 12px 30px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.03) inset; --shadow-lg: 0 30px 80px rgba(0,0,0,.55); --glow-signal: 0 0 0 4px rgba(255,122,24,.18), 0 6px 24px rgba(255,122,24,.25); /* ──────────────────────────────────────────────────────── MOTION · Three curves, three durations. No exceptions. ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(.22, .61, .36, 1); /* default · enters, drawers */ --ease-in-out: cubic-bezier(.65, .05, .36, 1); /* toggles, expanders */ --ease-snap: cubic-bezier(.5, 1.6, .4, .95); /* confirmation spring */ --dur-fast: 120ms; /* hover, focus, in-place color shift */ --dur-base: 200ms; /* drawer, modal, tab switch — the default */ --dur-slow: 340ms; /* full-page transition */ /* ──────────────────────────────────────────────────────── BRAND GRADIENT — the canonical Signal Sweep 0% transparent → 100% signal-500, bottom-left → top-right. NEVER reverse. NEVER multi-hue. ──────────────────────────────────────────────────────── */ --gradient-trail: linear-gradient(to top right, rgba(255,122,24,0) 0%, rgba(255,122,24,1) 100%); /* Page background — radial wash, used on canvas/bg-0 surfaces */ --bg-canvas: radial-gradient(1200px 800px at 0% -10%, #0e1623 0%, transparent 55%), radial-gradient(1000px 700px at 100% 110%, #0d141d 0%, transparent 55%), var(--bg-0); } /* ============================================================ SEMANTIC HELPERS · plug-and-play classes ============================================================ */ html, body { font-family: var(--font-sans); color: var(--text-1); background: var(--bg-canvas); } /* Headings */ .orbita-display { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); } .orbita-h1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.5px; } .orbita-h2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-tight); } .orbita-h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.2px; } /* Body / lead */ .orbita-lead { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--text-2); } .orbita-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-1); } .orbita-label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label); line-height: var(--lh-label); } /* Mono — telemetry & metadata */ .orbita-caption { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; } .orbita-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); color: var(--signal-400); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow-loose); } .orbita-readout { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .3px; color: var(--text-1); } /* Accent · color helpers */ .orbita-signal { color: var(--signal-500); } .orbita-italic-accent { font-style: italic; color: var(--signal-500); }