@aexol/spectral 0.9.269 → 0.9.271

package/dist/designer/data/systems/mission-control/DESIGN.md

@@ -1,474 +0,0 @@
-# Mission Control Design System
-
-> Category: Developer Tools
-> Space/aerospace mission monitoring. Dark command center, amber telemetry, monospace precision. Functional clarity above all else.
-
-## 1. Visual Theme & Atmosphere
-
-A **deep space command center** — dark, information-dense, unambiguous. Every pixel earns its place. The aesthetic draws from NASA mission control rooms, SpaceX launch consoles, and ISRO's mission operations complex. Amber data on navy is the core contrast pair; everything else is subdued.
-
-| Element | Hex | Role |
-|---------|-----|------|
-| Background | `#0B1120` | Deep space navy, primary canvas |
-| Surface | `#111827` | Elevated panels, cards |
-| Surface Hover | `#1A2535` | Interactive surface hover |
-| Border | `#1E3A5F` | Panel dividers, subtle structure |
-| Primary Data | `#FFB800` | Telemetry values, key metrics |
-| Accent | `#00D4FF` | Active/healthy indicators |
-| Alert | `#FF4757` | Critical warnings, errors |
-| Text Primary | `#E8F0FE` | High-contrast readable text |
-| Text Secondary | `#8BA3C7` | Labels, secondary information |
-| Text Tertiary | `#4A6080` | Timestamps, metadata |
-
-*Every readout must be readable at 3 meters in low light by someone who hasn't slept in 18 hours.*
-
-### Use Cases
-
-Mission Control is purpose-built for:
-- **Operations dashboards** — real-time system health, infrastructure monitoring, on-call status boards
-- **Build and deploy status screens** — CI/CD pipelines, release coordination, incident response
-- **Real-time monitoring UIs** — telemetry aggregation, sensor networks, financial data feeds
-- **Any information-dense, low-light, high-stakes display**
-
-### Prior Art
-
-NASA Mission Control (Houston), ISRO ISTRAC, SpaceX Falcon/Dragon consoles, ESA ESOC — all share amber-on-navy telemetry, monospace data fields, and hierarchical alert systems. The shared constraints (low light, fatigue, split-second decisions) drive convergent design.
-
-## 2. Color
-
-### Surface Palette
-
-| Token | Hex | Usage |
-|-------|-----|-------|
-| Background | `#0B1120` | Page canvas, primary depth |
-| Surface | `#111827` | Panels, cards, elevated areas |
-| Surface Hover | `#1A2535` | Interactive surface state |
-| Surface Active | `#1E3A5F` | Selected, active panel |
-| Border | `#1E3A5F` | Panel dividers, grid lines |
-| Border Subtle | `#162035` | Inner dividers, minor separation |
-
-### Data Palette (telemetry values)
-
-| Token | Hex | Usage |
-|-------|-----|-------|
-| Primary | `#FFB800` | Primary telemetry values, key metrics |
-| Secondary | `#00D4FF` | Healthy/active indicators, links |
-| Alert Critical | `#FF4757` | Errors, critical alerts, abort states |
-| Alert Warning | `#FF9F43` | Warnings, degraded performance |
-| Success | `#26DE81` | Nominal status, completed actions |
-
-All data colors on `#111827` pass WCAG AA (minimum 4.5:1).
-
-### Text Palette
-
-| Token | Hex | Usage |
-|-------|-----|-------|
-| Primary | `#E8F0FE` | Readable at distance, primary content |
-| Secondary | `#8BA3C7` | Labels, descriptors |
-| Tertiary | `#4A6080` | Timestamps, metadata, grid labels |
-
-### Dark Mode
-
-Dark mode is the native mode. No light mode variant by design — mission control environments are always low-light (ISRO ISTRAC, NASA FDO, SpaceX launch consoles all run dark). daytime operations centers with high ambient light are outside scope for v1; a light mode adaptation would require rethinking the full semantic color layer.
-
-```css
-:root {
-  --bg-default: #0B1120;
-  --bg-surface: #111827;
-  --bg-surface-hover: #1A2535;
-  --bg-surface-active: #1E3A5F;
-  --border-default: #1E3A5F;
-  --border-subtle: #162035;
-  --data-primary: #FFB800;
-  --data-secondary: #00D4FF;
-  --data-alert-critical: #FF4757;
-  --data-alert-warning: #FF9F43;
-  --data-success: #26DE81;
-  --fg-primary: #E8F0FE;
-  --fg-secondary: #8BA3C7;
-  --fg-tertiary: #4A6080;
-}
-```
-
-## 3. Typography
-
-### Font Stack
-
-```css
-/* Monospace for all data readouts — consistency at speed */
---font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-
-/* Sans-serif for labels, navigation, prose */
---font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-```
-
-### Type Scale
-
-| Role | Size | Weight | Line Height | Font |
-|------|------|--------|-------------|------|
-| Display | 48px | 700 | 1.0 | JetBrains Mono |
-| H1 | 18px | 600 | 1.2 | Inter |
-| H2 | 13px | 600 | 1.2 | Inter, uppercase, tracked |
-| Body | 14px | 400 | 1.5 | Inter |
-| Caption | 12px | 400 | 1.4 | Inter |
-| Micro | 10px | 600 | 1.0 | Inter, uppercase |
-
-**Font labels for catalog extraction:**
-
-```
-Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
-Body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
-Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
-```
-
-## 4. Spacing
-
-4px baseline grid for dense telemetry layouts. 8px for outer padding, 16px+ for section gaps.
-
-```css
---space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
---space-5: 20px;  --space-6: 24px;  --space-8: 32px;   --space-12: 48px;
---space-16: 64px; --space-20: 80px;
-```
-
-## 5. Layout & Composition
-
-### Grid System
-
-12-column grid, 4px gutters. Dense information layout — no wasted whitespace, but clear visual grouping.
-
-```css
-/* Standard panel: spans 3, 4, or 6 columns */
-.panel {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  border-radius: 4px;
-  padding: var(--space-4);
-}
-
-/* Full-width telemetry strip */
-.telemetry-strip {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-  gap: var(--space-2);
-}
-```
-
-### Panel Structure
-
-```css
-/* .panel base styles are defined in the Grid System section above. */
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-3);
-  padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.panel-title {
-  font-size: 13px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--fg-secondary);
-}
-```
-
-## 6. Components
-
-### Status Badge
-
-```css
-/* Nominal — green, all clear */
-.badge-nominal {
-  background: rgba(38, 222, 129, 0.15);
-  color: #26DE81;
-  border: 1px solid rgba(38, 222, 129, 0.3);
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 2px 8px;
-  border-radius: 2px;
-}
-
-/* Warning — amber, attention needed */
-.badge-warning {
-  background: rgba(255, 159, 67, 0.15);
-  color: #FF9F43;
-  border: 1px solid rgba(255, 159, 67, 0.3);
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 2px 8px;
-  border-radius: 2px;
-}
-
-/* Critical — red, immediate action */
-.badge-critical {
-  background: rgba(255, 71, 87, 0.15);
-  color: #FF4757;
-  border: 1px solid rgba(255, 71, 87, 0.3);
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 2px 8px;
-  border-radius: 2px;
-}
-```
-
-### Data Tile
-
-```css
-/* Single metric display */
-.data-tile {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-default);
-  border-radius: 4px;
-  padding: var(--space-3);
-}
-
-.data-tile-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--fg-secondary);
-  margin-bottom: var(--space-1);
-}
-
-.data-tile-value {
-  font-family: var(--font-mono);
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--data-primary);
-  line-height: 1.0;
-}
-
-.data-tile-unit {
-  font-family: var(--font-mono);
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--fg-tertiary);
-  margin-left: 4px;
-}
-```
-
-### Countdown Timer
-
-```css
-/* T-minus / T-plus display */
-.countdown {
-  font-family: var(--font-mono);
-  font-size: 48px;
-  font-weight: 700;
-  color: var(--data-primary);
-  line-height: 1.0;
-  letter-spacing: -0.02em;
-}
-
-.countdown-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  color: var(--fg-tertiary);
-}
-
-/* Positive delta (T+) — time after event */
-.countdown.positive { color: var(--data-success); }
-
-/* At T-0 */
-.countdown.zero { color: var(--data-secondary); animation: pulse-glow 2s ease-in-out infinite; }
-
-@keyframes pulse-glow {
-  0%, 100% { text-shadow: 0 0 8px currentColor; }
-  50% { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
-}
-```
-
-### Signal Strength Indicator
-
-```css
-/* Vertical bar signal meter */
-.signal-bars {
-  display: flex;
-  align-items: flex-end;
-  gap: 2px;
-  height: 20px;
-}
-
-.signal-bar {
-  width: 4px;
-  background: var(--border-default);
-  border-radius: 1px;
-}
-
-.signal-bar.active.weak    { background: var(--data-alert-warning); }
-.signal-bar.active.moderate { background: var(--data-primary); }
-.signal-bar.active.strong  { background: var(--data-secondary); }
-
-.signal-bar:nth-child(1) { height: 5px; }
-.signal-bar:nth-child(2) { height: 8px; }
-.signal-bar:nth-child(3) { height: 12px; }
-.signal-bar:nth-child(4) { height: 16px; }
-```
-
-### Alert Banner
-
-```css
-/* Full-width critical alert */
-.alert-banner {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  background: rgba(255, 71, 87, 0.1);
-  border: 1px solid rgba(255, 71, 87, 0.4);
-  border-left: 4px solid #FF4757;
-  border-radius: 4px;
-  padding: var(--space-3) var(--space-4);
-}
-
-.alert-banner-icon {
-  color: #FF4757;
-  flex-shrink: 0;
-}
-
-.alert-banner-text {
-  font-size: 14px;
-  font-weight: 500;
-  color: #FF4757;
-}
-
-.alert-banner-time {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  color: var(--fg-tertiary);
-  margin-left: auto;
-  flex-shrink: 0;
-}
-```
-
-### Coordinate Display
-
-```css
-/* Latitude / Longitude / Altitude readout */
-.coordinate {
-  font-family: var(--font-mono);
-  font-size: 14px;
-  color: var(--data-secondary);
-}
-
-.coordinate-label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--fg-tertiary);
-  margin-bottom: 2px;
-}
-```
-
-### Progress Bar
-
-```css
-/* Mission phase / upload / loading progress */
-.progress-bar {
-  height: 4px;
-  background: var(--border-default);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.progress-bar-fill {
-  height: 100%;
-  background: var(--data-secondary);
-  border-radius: 2px;
-  transition: width 300ms ease-out;
-}
-
-.progress-bar-fill.warning { background: var(--data-alert-warning); }
-.progress-bar-fill.critical { background: var(--data-alert-critical); }
-```
-
-### Telemetry Chart Line
-
-```css
-/* Sparkline chart for data over time */
-.telemetry-chart {
-  height: 40px;
-  display: flex;
-  align-items: flex-end;
-  gap: 1px;
-}
-
-.telemetry-chart-bar {
-  flex: 1;
-  background: var(--data-primary);
-  border-radius: 1px 1px 0 0;
-  min-width: 2px;
-}
-
-.telemetry-chart-bar.alert { background: var(--data-alert-critical); }
-.telemetry-chart-bar.warning { background: var(--data-alert-warning); }
-```
-
-## 7. Motion & Interaction
-
-| Interaction | Duration | Easing | Effect |
-|-------------|----------|--------|--------|
-| Alert pulse | 2s | ease-in-out | Glow intensity oscillation (loop) |
-| Panel appear | 200ms | ease-out | Opacity 0→1 |
-| Value change | 150ms | ease-out | Background flash on new data |
-| Progress fill | 300ms | ease-out | Width transition |
-| Hover state | 100ms | ease-in | Border color brightens |
-
-```css
---transition-fast: 100ms ease-in;
---transition-base: 150ms ease-out;
---transition-slow: 300ms ease-out;
-```
-
-### prefers-reduced-motion
-
-Static environments are common in mission control. Replace all animations with instant state changes.
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-```
-
-## 8. Voice & Brand
-
-### Iconography
-
-Minimal, functional iconography — Lucide icons (stroke weight 1.5px, 16px default). No decorative icons. Every icon must communicate operational state.
-
-### Tone
-
-- **Precise**: Data-first, no marketing language
-- **Sparse**: The UI speaks through values and color, not prose
-- **Hierarchical**: Visual urgency maps directly to operational urgency
-
-### Visual Signals
-
-Color is the primary signal carrier. Every color choice must communicate operational state — never decorative.
-
-## 9. Anti-patterns
-
-- Do not use decorative colors in data displays — every hue must convey operational meaning
-- Do not use rounded corners > 4px — mission control is functional, not friendly
-- Do not use proportional fonts for telemetry values — use monospace exclusively for data
-- Do not animate non-alert elements — motion is reserved for signals that matter
-- Do not use light mode — low-light environments are the only context
-- Do not use low-contrast text on dark backgrounds — tertiary `#4A6080` is only for non-critical metadata (timestamps, grid labels)

package/dist/designer/data/systems/mission-control/components.html

@@ -1,136 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Mission Control - reference components</title>
-    <meta name="description" content="Reference fixture for design-systems/mission-control: mission control interface with dark command panels, status color, and dense operational modules." />
-    <style>
-      :root {
-        --bg: #090b12;
-        --surface: #121722;
-        --surface-warm: #1b2233;
-        --fg: #f8fafc;
-        --fg-2: #cbd5e1;
-        --muted: #94a3b8;
-        --meta: #60a5fa;
-        --border: #2a3447;
-        --border-soft: #1d2636;
-        --accent: #60a5fa;
-        --accent-on: #06101d;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #22c55e;
-        --warn: #fbbf24;
-        --danger: #fb7185;
-        --font-display: Inter, system-ui, sans-serif;
-        --font-body: Inter, system-ui, sans-serif;
-        --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-        --text-xs: 11px;
-        --text-sm: 12px;
-        --text-base: 14px;
-        --text-lg: 16px;
-        --text-xl: 20px;
-        --text-2xl: 28px;
-        --text-3xl: 40px;
-        --text-4xl: 56px;
-        --leading-body: 1.45;
-        --leading-tight: 1.06;
-        --tracking-display: -0.025em;
-        --space-1: 4px;
-        --space-2: 8px;
-        --space-3: 12px;
-        --space-4: 16px;
-        --space-5: 20px;
-        --space-6: 24px;
-        --space-8: 32px;
-        --space-12: 48px;
-        --section-y-desktop: 80px;
-        --section-y-tablet: 60px;
-        --section-y-phone: 42px;
-        --radius-sm: 10px;
-        --radius-md: 16px;
-        --radius-lg: 24px;
-        --radius-pill: 9999px;
-        --elev-flat: none;
-        --elev-ring: 0 0 0 1px var(--border);
-        --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42);
-        --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28);
-        --motion-fast: 100ms;
-        --motion-base: 180ms;
-        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-        --container-max: 1280px;
-        --container-gutter-desktop: 36px;
-        --container-gutter-tablet: 24px;
-        --container-gutter-phone: 16px;
-      }
-
-      *, *::before, *::after { box-sizing: border-box; }
-      html, body { margin: 0; padding: 0; }
-      body { min-height: 100vh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
-      .page { min-height: 100vh; background: radial-gradient(circle at 80% 8%, rgba(96, 165, 250, 0.24), transparent 34%), #090b12; }
-      .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
-      section { padding-block: var(--section-y-desktop); }
-      @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
-      @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
-      h1, h2, h3, p { margin: 0; }
-      h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
-      h1 { max-width: 840px; font-size: var(--text-4xl); font-weight: 760; }
-      h2 { font-size: var(--text-3xl); font-weight: 700; }
-      h3 { font-size: var(--text-xl); font-weight: 700; }
-      .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
-      .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
-      .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
-      .stack > * + * { margin-block-start: var(--space-4); }
-      .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
-      .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body); color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
-      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
-      .btn-primary { background: var(--accent); color: var(--accent-on); }
-      .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
-      .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
-      .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
-      .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
-      .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
-      .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
-      .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
-      .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
-      .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
-      .metric:last-child { border-right: 0; }
-      .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
-      .metric span { color: var(--muted); font-size: var(--text-sm); }
-      .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
-      .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
-      .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
-      .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
-      .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
-      .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
-      .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
-      label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
-      input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
-      input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
-      .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
-      .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
-      @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
-    </style>
-  </head>
-  <body>
-    <main class="page">
-      <section>
-        <div class="container hero">
-          <div class="stack">
-            <p class="eyebrow">Mission Control design system</p>
-            <h1>Mission operations room</h1>
-            <p class="lead">Command surfaces, status boards, and operational telemetry for complex systems.</p>
-            <div class="actions" aria-label="Reference actions"><a class="btn btn-primary" href="#">Primary action</a><a class="btn btn-secondary" href="#">Secondary action</a></div>
-          </div>
-          <article class="panel" aria-label="Mission Control component preview">
-            <div class="panel-head"><div><p class="eyebrow">Live module</p><h3>Reference component</h3></div><span class="status">online</span></div>
-            <div class="metric-grid"><div class="metric"><strong>98%</strong><span>Signal quality</span></div><div class="metric"><strong>24</strong><span>Active flows</span></div><div class="metric"><strong>3.2s</strong><span>Response time</span></div></div>
-            <div class="card-row"><div class="mini-card"><h3>Palette</h3><p>mission control interface with dark command panels, status color, and dense operational modules.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div><div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same system signal.</p><div class="field"><label for="mission-control-input">Reference input</label><input id="mission-control-input" value="Mission Control system token" /></div></div></div>
-          </article>
-        </div>
-      </section>
-      <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use system-specific focus rings and easing.</p></article></div></section>
-    </main>
-  </body>
-</html>

package/dist/designer/data/systems/mission-control/tokens.css

@@ -1,63 +0,0 @@
-/* design-systems/mission-control/tokens.css
- * Structured token bindings for Mission Control.
- * mission control interface with dark command panels, status color, and dense operational modules.
- */
-
-:root {
-  --bg: #090b12;
-  --surface: #121722;
-  --surface-warm: #1b2233;
-  --fg: #f8fafc;
-  --fg-2: #cbd5e1;
-  --muted: #94a3b8;
-  --meta: #60a5fa;
-  --border: #2a3447;
-  --border-soft: #1d2636;
-  --accent: #60a5fa;
-  --accent-on: #06101d;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #22c55e;
-  --warn: #fbbf24;
-  --danger: #fb7185;
-  --font-display: Inter, system-ui, sans-serif;
-  --font-body: Inter, system-ui, sans-serif;
-  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-  --text-xs: 11px;
-  --text-sm: 12px;
-  --text-base: 14px;
-  --text-lg: 16px;
-  --text-xl: 20px;
-  --text-2xl: 28px;
-  --text-3xl: 40px;
-  --text-4xl: 56px;
-  --leading-body: 1.45;
-  --leading-tight: 1.06;
-  --tracking-display: -0.025em;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-12: 48px;
-  --section-y-desktop: 80px;
-  --section-y-tablet: 60px;
-  --section-y-phone: 42px;
-  --radius-sm: 10px;
-  --radius-md: 16px;
-  --radius-lg: 24px;
-  --radius-pill: 9999px;
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42);
-  --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28);
-  --motion-fast: 100ms;
-  --motion-base: 180ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --container-max: 1280px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}