@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/hashicorp/tokens.css

@@ -0,0 +1,272 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/hashicorp/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by HashiCorp" —
+ * enterprise infrastructure-as-code made tangible: a dramatic near-black
+ * canvas, engineering-grade typography, whisper-level shadows, and one
+ * functional blue accent reserved for actionable signals.
+ *
+ * Brand identity in three sentences:
+ *   1. Dark-mode-native canvas (#15181e Dark Charcoal → #0d0e12 Near Black).
+ *      DESIGN.md §1 names these as the "dramatic dark-mode for hero areas
+ *      and product showcases" — we bind --bg/--surface to the iconic
+ *      pair because HashiCorp's brand-defining surfaces are dark.
+ *   2. HashiCorp Sans for headings (600–700 weight, kern enabled, 1.17
+ *      line-height at 82px display); system-ui for body, navigation, and
+ *      functional text. The brand font carries the weight; system-ui
+ *      carries the words.
+ *   3. Action Blue (#1060ff) as the lone functional accent on dark; the
+ *      multi-product palette (Terraform purple, Vault yellow, Waypoint
+ *      teal, Vagrant blue) lives in DESIGN.md §2 as product-scoped
+ *      colors and intentionally does NOT bind here — DESIGN.md §7 forbids
+ *      "product brand colors outside their product context".
+ *
+ * Brand-specific schema decisions (each one bends a schema convention
+ * to match HashiCorp's voice rather than the cross-brand default):
+ *
+ *   1. --bg is #15181e (Dark Charcoal), not white. DESIGN.md describes
+ *      the brand's "dual mode" — clean white informational sections AND
+ *      dramatic dark hero/product areas — but the dark surfaces are the
+ *      identity-defining ones; that is where HashiCorp Sans at 82px,
+ *      the multi-product accent colors, and the whisper shadows all
+ *      do their work. Binding --bg to the dark canvas honors the
+ *      iconic look and matches the "dark-friendly enterprise UI"
+ *      identity called out in the brand interpretation.
+ *
+ *   2. --fg ramp is independently bound across all four tiers
+ *      (Near White #efeff1 → Mid Gray #d5d7db → Cool Gray #b2b6bd →
+ *      Dark Gray #656a76). DESIGN.md §2 lists each as a named role —
+ *      "Primary text on dark / Button text on dark / Border accents /
+ *      Helper text" — and the brand genuinely walks the full ramp.
+ *      Collapsing --fg-2 or --muted to siblings would flatten the
+ *      ladder that gives HashiCorp content its enterprise density.
+ *
+ *   3. --border is rgba(178, 182, 189, 0.4) — the literal alpha used
+ *      on DESIGN.md §4's "Primary Dark" button border. Binding
+ *      --border to the alpha (not a solid hex) lets `--elev-ring`
+ *      reproduce the cool-gray hairline and lets components reach the
+ *      same value via `border: 1px solid var(--border)`.
+ *      --border-soft drops to 0.15 alpha for inner separators that
+ *      should not visually compete with the button edge.
+ *
+ *   4. --accent is Action Blue (#1060ff), NOT a product brand color.
+ *      DESIGN.md §2 explicitly classifies Terraform purple / Vault
+ *      yellow / Waypoint teal as product-scoped tokens; the corporate
+ *      brand's functional CTA color on dark is #1060ff. --accent-hover
+ *      LIFTS to #2b89ff (DESIGN.md "Bright Blue — Active links, hover
+ *      accent") instead of darkening — the schema's default black-mix
+ *      formula would lose contrast on the dark canvas. --accent-active
+ *      then darkens via the standard formula for the press state.
+ *
+ *   5. --warn is #bb5a00 (DESIGN.md Amber-200), not the schema default
+ *      #eab308. The brighter yellow would clash with HashiCorp's
+ *      muted enterprise palette and read as "Vault product color"
+ *      rather than "warning state". The burnt-amber sits warm but
+ *      restrained on the dark canvas.
+ *
+ *   6. --font-display loads HashiCorp Sans (the custom brand face
+ *      called out throughout DESIGN.md) with a substantive fallback
+ *      stack; --font-body uses system-ui per DESIGN.md §3's brand/
+ *      system split ("HashiCorp Sans for headings only (17px+),
+ *      system-ui for everything else"). Mixing the two is the
+ *      structural rule — never set body copy in HashiCorp Sans.
+ *
+ *   7. Type scale tops at 82px (--text-4xl) with 1.17 line-height
+ *      (--leading-tight). DESIGN.md §3 lists 82px / 52px / 42px / 34px
+ *      / 26px as the documented HashiCorp Sans tiers; the 8 schema
+ *      slots map onto five of those plus body sizes 20/16/14/13.
+ *      --tracking-display is `normal` because DESIGN.md §3 explicitly
+ *      sets the 82px hero to letter-spacing `normal` — the brand
+ *      relies on kerning, not tracking, for its monolithic feel.
+ *
+ *   8. --leading-body is 1.63 (DESIGN.md's relaxed 1.63–1.69 body
+ *      range) — generous reading rhythm BELOW the tight 1.17 headings
+ *      is the brand's "weight at the top of each section" rule.
+ *      --leading-tight is 1.17, the documented display line-height.
+ *
+ *   9. --radius scale is tight: 5px / 8px / 8px / 5px. DESIGN.md §5
+ *      caps radius at 8px ("nothing pill-shaped or circular") and
+ *      uses 5px for primary buttons, badges, and inputs. We bind
+ *      --radius-lg to the same 8px ceiling (HashiCorp does not have
+ *      a third tier above cards) and --radius-pill to 5px, matching
+ *      DESIGN.md §4's "Badges / Pills — Radius: 5px". The brand's
+ *      "no true pill" rule is structural, not stylistic.
+ *
+ *  10. --elev-raised is the whisper-shadow VERBATIM from DESIGN.md §6
+ *      Level 1: dual-layer at 5% opacity on a cool-gray base. The
+ *      doc says it explicitly: "If you can see the shadow, it's too
+ *      strong." We must not strengthen this in component CSS —
+ *      enterprise stability is communicated through restraint.
+ *
+ *  11. --focus-ring is 3px solid var(--accent) (sharp ring, no halo),
+ *      per DESIGN.md §6 ("Focus (Level 2) — 3px solid"). Sharp focus
+ *      is the engineered alternative to the schema's 3px alpha glow.
+ *
+ *  12. --section-y-desktop is 80px (DESIGN.md §5 "Enterprise breathing
+ *      room: Generous vertical spacing between sections (48px–80px+)").
+ *      --container-max is 1150px exactly — DESIGN.md §5 names ~1150px
+ *      as the documented xl breakpoint and max content width.
+ *
+ * Source contracts:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *   - A2 fallback parity:   design-systems/_schema/defaults.css
+ *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
+ *
+ * Keep this file additive: never invent token names not also documented
+ * in DESIGN.md or the schema. The HashiCorp Sans face is referenced by
+ * name only — the stack lists OS fallbacks so artifacts render
+ * acceptably even when the brand font is not loaded.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — dark-mode canvas) ───────────────────────
+   * DESIGN.md §1 names #15181e and #0d0e12 as the two dark-mode
+   * surfaces. --surface-warm aliases --surface because the brand is
+   * famously achromatic on dark — depth comes from luminance steps
+   * and whisper shadows, not from warm-tinting one surface against
+   * another. (DESIGN.md §7: "Don't use pure black (#000000) for dark
+   * backgrounds — use #15181e or #0d0e12.") */
+  --bg: #15181e;                       /* Dark Charcoal — hero canvas */
+  --surface: #0d0e12;                  /* Near Black — cards, inputs */
+  --surface-warm: var(--surface);      /* alias — no warm tier on dark */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * Near White → Mid Gray → Cool Gray → Dark Gray. All four are named
+   * in DESIGN.md §2 with distinct roles, so we bind each independently
+   * (no aliasing). #efeff1 instead of #ffffff matters — pure white
+   * against #15181e reads as harsh; the slight warmth keeps the
+   * enterprise tone from feeling clinical. */
+  --fg: #efeff1;                       /* Near White — primary text on dark */
+  --fg-2: #d5d7db;                     /* Mid Gray — body description, button text */
+  --muted: #b2b6bd;                    /* Cool Gray — captions, tertiary text */
+  --meta: #656a76;                     /* Dark Gray — helper text, disabled */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * DESIGN.md §4 names rgba(178, 182, 189, 0.4) as the primary dark
+   * button border — we lift that exact alpha into --border so
+   * --elev-ring and `border: 1px solid var(--border)` both reproduce
+   * the documented hairline. --border-soft drops to 0.15 for inner
+   * row separators that must not compete with the card edge. */
+  --border: rgba(178, 182, 189, 0.4);  /* Cool Gray @ 0.4 — primary button edge */
+  --border-soft: rgba(178, 182, 189, 0.15); /* inner separator — barely-there */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * Action Blue — the corporate brand's single functional CTA color
+   * on dark. Hard cap of ≤2 visible uses per screen aligns with
+   * DESIGN.md §7's restraint: the multi-product palette (Terraform
+   * purple, Vault yellow) is product-scoped and intentionally does
+   * NOT bind here. Hover LIFTS to Bright Blue rather than darkening
+   * (the schema default would lose contrast on dark). */
+  --accent: #1060ff;                   /* Action Blue — primary CTA on dark */
+  --accent-on: #ffffff;                /* white label on saturated blue */
+  --accent-hover: #2b89ff;             /* Bright Blue — DESIGN.md §2 active links */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * --warn overrides to DESIGN.md §2 Amber #bb5a00 (the schema's
+   * #eab308 would read as "Vault product color" on a HashiCorp
+   * surface). --success and --danger inherit the schema defaults —
+   * DESIGN.md does not define a brand-specific success color, and
+   * #731e25 (DESIGN.md's documented red) is a deep error-background
+   * tone, not the foreground signal a --danger token needs. */
+  --success: #16a34a;
+  --warn: #bb5a00;                     /* DESIGN.md Amber-200 — warning states */
+  --danger: #dc2626;
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Brand/system split per DESIGN.md §3. HashiCorp Sans is the
+   * heading face; system-ui handles body, navigation, and functional
+   * text. The fallback chains let artifacts render acceptably when
+   * the custom face is not loaded. */
+  --font-display: "HashiCorp Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale — DESIGN.md §3 Hierarchy table. The 8 schema slots
+   * map the HashiCorp Sans display tiers (82/52/42/26) plus the
+   * documented body/caption sizes (20/16/14/13). Sub-heading 34px
+   * and small-title 19px live inline in components when needed. */
+  --text-xs: 13px;                     /* caption / uppercase label */
+  --text-sm: 14px;                     /* small body */
+  --text-base: 16px;                   /* body / nav / button text */
+  --text-lg: 20px;                     /* body large / hero description */
+  --text-xl: 26px;                     /* card title */
+  --text-2xl: 42px;                    /* feature heading */
+  --text-3xl: 52px;                    /* section heading */
+  --text-4xl: 82px;                    /* display hero — "infrastructure-grade" */
+
+  /* DESIGN.md §3: tight headings (1.17–1.21) over relaxed body
+   * (1.50–1.69). We sit at the documented endpoints — 1.17 hero,
+   * 1.63 body. --tracking-display is `normal` because DESIGN.md §3
+   * lists the 82px hero at letter-spacing `normal` (kerning is on
+   * via font-feature-settings, not tracking). */
+  --leading-body: 1.63;
+  --leading-tight: 1.17;
+  --tracking-display: normal;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * 8px base unit (DESIGN.md §5). The 4/8/12/16/20/24/32/48 tier
+   * covers structural rhythm; sub-tier increments (2/3/6/7/9/11)
+   * live per-component because they are too fine for the shared
+   * schema. */
+  --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 rhythm — DESIGN.md §5 "Enterprise breathing room
+   * (48–80px+)". 80px desktop sits at the documented top end;
+   * we collapse to 56px on tablet and 40px on phone. */
+  --section-y-desktop: 80px;
+  --section-y-tablet: 56px;
+  --section-y-phone: 40px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * DESIGN.md §5 caps radius at 8px and uses 5px for buttons/inputs/
+   * badges. --radius-lg sits at the 8px ceiling (no third tier
+   * exists in the brand). --radius-pill binds to 5px because
+   * DESIGN.md §4 explicitly says "Badges / Pills — Radius: 5px" —
+   * HashiCorp does not have a true 9999px pill shape; the no-pill
+   * rule is structural. */
+  --radius-sm: 5px;                    /* DESIGN.md "Comfortable" — buttons, inputs */
+  --radius-md: 8px;                    /* DESIGN.md "Card" — cards, containers */
+  --radius-lg: 8px;                    /* same 8px ceiling — no third tier */
+  --radius-pill: 5px;                  /* DESIGN.md §4 — no true pills, 5px chips */
+
+  /* ─── Elevation (3 levels) ───────────────────────────────────────
+   * Whisper shadows VERBATIM from DESIGN.md §6 Level 1: dual-layer
+   * at 5% opacity on a cool-gray (97, 104, 117) base. The doc is
+   * emphatic: "If you can see the shadow, it's too strong." Never
+   * strengthen these values in component overrides. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    rgba(97, 104, 117, 0.05) 0px 1px 1px,
+    rgba(97, 104, 117, 0.05) 0px 2px 2px;
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * DESIGN.md §6 Level 2: "3px solid var(--mds-color-focus-action-
+   * external)". Sharp 3px ring at --accent, not the schema's alpha
+   * glow — HashiCorp's focus is engineered, not atmospheric. */
+  --focus-ring: 0 0 0 3px var(--accent);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * Standard durations — HashiCorp's enterprise tone leans on type
+   * and shadow restraint, not motion choreography. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1150px max content width per DESIGN.md §5 ("Max content width:
+   * ~1150px (xl breakpoint)"). Gutters narrow on mobile to preserve
+   * the line-length-as-craft feel. */
+  --container-max: 1150px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+}

package/dist/designer/data/systems/hud/DESIGN.md

@@ -0,0 +1,173 @@
+# HUD Design System
+
+> Category: Themed & Unique
+> Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.
+
+## 1. Visual Theme & Atmosphere
+
+A **combat pilot's glass cockpit** — everything readable in a split second, in any light condition, under any G-load. The HUD projects critical flight data directly into the pilot's line of sight so they never have to look down. Translucency and glow replace depth and shadow. Every element is functional or it doesn't exist.
+
+| Element | Hex | Role |
+|---------|-----|------|
+| Background | `#0A0A0A` | Near-black, primary canvas |
+| Surface | `#111316` | Elevated panels, card backgrounds |
+| Border | `#1E2328` | Subtle panel separation |
+| Primary | `#00FF41` | Active readouts, all data values |
+| Secondary | `#7FFF00` | Standby/dimmed values, inactive fields |
+| Tertiary | `#5A9A5A` | Grid lines, tick marks, reference arcs |
+| Warning | `#FFB800` | Caution, system advisories |
+| Alert | `#FF3B3B` | Critical warnings, fault indicators |
+
+*Readings must be unambiguous at 200 knots in Instrument Meteorological Conditions.*
+
+### Use Cases
+
+HUD is purpose-built for:
+- **Flight simulation UIs** — combat sims, civil aviation trainers, helicopter hoist operations
+- **Telemetry dashboards** — real-time velocity, altitude, heading overlays
+- **Command-and-control displays** — drone operator screens, ISR stations
+- **Any high-speed, zero-ambiguity data overlay**
+
+### Prior Art
+
+F-16 Fighting Falcon HUD, Apache AH-64 attack helicopter integrated display, F-35 helmet-mounted display system, Garmin G1000 flight deck. All share: phosphor green primary, decluttered minimalism, and information hierarchy driven by operational urgency.
+
+## 2. Color Palette & Roles
+
+### Surface Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#0A0A0A` | Page canvas, primary depth |
+| Surface | `#111316` | Panels, cards, elevated areas |
+| Border | `#1E2328` | Panel dividers, subtle structure |
+
+### Data Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Primary | `#00FF41` | Speed, altitude, heading readouts |
+| Secondary | `#7FFF00` | Standby/dimmed values, inactive fields |
+| Tertiary | `#5A9A5A` | Grid lines, tick marks, reference arcs |
+| Warning | `#FFB800` | Caution, system advisories |
+| Alert | `#FF3B3B` | Critical warnings, fault indicators |
+
+All data colors on `#0A0A0A` pass WCAG AA (minimum 4.5:1).
+
+### Dark Mode
+
+Dark mode is the native and only mode. A HUD is projected in low-light or high-glare cockpit conditions; there is no light mode by design.
+
+```css
+:root {
+  --color-bg: #0A0A0A;
+  --color-surface: #111316;
+  --color-border: #1E2328;
+  --data-primary: #00FF41;
+  --data-secondary: #7FFF00;
+  --data-tertiary: #5A9A5A;
+  --data-warning: #FFB800;
+  --data-alert: #FF3B3B;
+}
+```
+
+## 3. Typography Rules
+
+| Role | Size | Weight | Line Height | Font |
+|------|------|--------|-------------|------|
+| Display | 32px | 700 | 1.0 | JetBrains Mono |
+| Heading | 12px | 700 | 1.0 | Inter, uppercase |
+| Body | 14px | 400 | 1.2 | JetBrains Mono |
+| Label | 10px | 600 | 1.0 | Inter, uppercase |
+| Micro | 8px | 700 | 1.0 | Inter, uppercase |
+
+**Font labels for catalog extraction:**
+
+```
+Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Micro: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+```
+
+## 4. Component Stylings
+
+### Data Readout
+
+Displays a single data value with label. Always uses `--data-primary` color.
+
+```css
+.data-readout {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--data-primary);
+  letter-spacing: 0.05em;
+}
+.data-readout-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--data-tertiary);
+  letter-spacing: 0.1em;
+}
+```
+
+### Status Indicator
+
+Dot or bar that reflects system state. Colors map to operational states.
+
+```css
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--data-primary); /* active */
+}
+.status-dot.standby { background: var(--data-secondary); }
+.status-dot.warning { background: var(--data-warning); }
+.status-dot.alert   { background: var(--data-alert); }
+```
+
+### Grid Lines
+
+Reference marks for spatial orientation. Thin lines in `--data-tertiary`.
+
+## 5. Layout Principles
+
+HUDs are overlay systems — they display over a visual field. The layout is absolute-positioned overlays on a transparent or dark background. Information density is high; whitespace is used to separate data clusters, not for aesthetics.
+
+Key structural patterns:
+- Grid lines reference the center of the display (crosshair)
+- Data readouts cluster by update frequency (altitude updates slower than airspeed)
+- Warning states override all other information layers
+
+## 6. Depth & Elevation
+
+HUD overlays use opacity and glow rather than elevation shadows. Panels are distinguished by border color and subtle surface shifts, not drop shadows. The HUD exists in a single visual plane.
+
+## 7. Do's and Don'ts
+
+- Do not use tertiary `#5A9A5A` for body or readout text — only grid lines and reference marks
+- Do not animate elements that do not signal operational state
+- Do not provide a light mode — a HUD only exists in low-light or high-glare conditions
+- Do not use rounded corners greater than 50% (circle reticles only)
+- Do not use gradients — flat color fills only
+- Do not convey information by color alone — reinforce with position and label
+
+## 8. Responsive Behavior
+
+HUD overlays are viewport-relative. On smaller viewports, data clusters compress proportionally. Critical readouts (speed, altitude, heading) remain visible at all sizes; secondary indicators hide or minimize. The layout uses a 12-column grid with absolute-positioned data panels anchored to screen edges.
+
+## 9. Agent Prompt Guide
+
+When generating a HUD-style interface, prompt the model to:
+- Use JetBrains Mono for all data readouts; Inter (uppercase) for labels only
+- Set `--data-primary` to `#00FF41` for all active readouts
+- Apply 150ms ease-out for state transitions, 100ms linear for data value changes
+- Include a status indicator component with active/standby/warning/alert states
+- Ensure all text passes 4.5:1 contrast on `#0A0A0A`
+- Never add decorative animation or light mode variants

package/dist/designer/data/systems/hud/components.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>HUD - reference components</title>
+    <meta name="description" content="Reference fixture for design-systems/hud: HUD interface language with dark transparent panels, cyan telemetry, and compact status readouts." />
+    <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: "IBM Plex Mono", ui-monospace, monospace;
+        --font-body: "IBM Plex Mono", ui-monospace, monospace;
+        --font-mono: "IBM Plex Mono", ui-monospace, 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">HUD design system</p>
+            <h1>Heads-up display overlay</h1>
+            <p class="lead">Transparent tactical panels, scanning metrics, and high-contrast status overlays.</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="HUD 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>HUD interface language with dark transparent panels, cyan telemetry, and compact status readouts.</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="hud-input">Reference input</label><input id="hud-input" value="HUD 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/hud/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/hud/tokens.css
+ * Structured token bindings for HUD.
+ * HUD interface language with dark transparent panels, cyan telemetry, and compact status readouts.
+ */
+
+: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: "IBM Plex Mono", ui-monospace, monospace;
+  --font-body: "IBM Plex Mono", ui-monospace, monospace;
+  --font-mono: "IBM Plex Mono", ui-monospace, 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;
+}