@aexol/spectral 0.9.270 → 0.9.272

package/dist/designer/data/systems/totality-festival/DESIGN.md

@@ -1,206 +0,0 @@
----
-name: Totality Festival Design System
-colors:
-  surface: "#121318"
-  surface-dim: "#121318"
-  surface-bright: "#38393f"
-  surface-container-lowest: "#0d0e13"
-  surface-container-low: "#1a1b21"
-  surface-container: "#1e1f25"
-  surface-container-high: "#292a2f"
-  surface-container-highest: "#34343a"
-  on-surface: "#e3e1e9"
-  on-surface-variant: "#d0c6ab"
-  inverse-surface: "#e3e1e9"
-  inverse-on-surface: "#2f3036"
-  outline: "#999077"
-  outline-variant: "#4d4732"
-  surface-tint: "#e9c400"
-  primary: "#fff6df"
-  on-primary: "#3a3000"
-  primary-container: "#ffd700"
-  on-primary-container: "#705e00"
-  inverse-primary: "#705d00"
-  secondary: "#bdf4ff"
-  on-secondary: "#00363d"
-  secondary-container: "#00e3fd"
-  on-secondary-container: "#00616d"
-  tertiary: "#fcf3ff"
-  on-tertiary: "#3b2754"
-  tertiary-container: "#e7d1ff"
-  on-tertiary-container: "#6b5586"
-  error: "#ffb4ab"
-  on-error: "#690005"
-  error-container: "#93000a"
-  on-error-container: "#ffdad6"
-  background: "#121318"
-  on-background: "#e3e1e9"
-  surface-variant: "#34343a"
-typography:
-  headline-xl:
-    fontFamily: Space Grotesk
-    fontSize: 72px
-    fontWeight: "700"
-    lineHeight: 80px
-    letterSpacing: -0.04em
-  headline-lg:
-    fontFamily: Space Grotesk
-    fontSize: 48px
-    fontWeight: "600"
-    lineHeight: 56px
-    letterSpacing: -0.02em
-  headline-md:
-    fontFamily: Space Grotesk
-    fontSize: 32px
-    fontWeight: "600"
-    lineHeight: 40px
-  body-lg:
-    fontFamily: Inter
-    fontSize: 18px
-    fontWeight: "400"
-    lineHeight: 28px
-  body-md:
-    fontFamily: Inter
-    fontSize: 16px
-    fontWeight: "400"
-    lineHeight: 24px
-  label-md:
-    fontFamily: Space Grotesk
-    fontSize: 14px
-    fontWeight: "500"
-    lineHeight: 20px
-    letterSpacing: 0.1em
-rounded:
-  sm: 0.125rem
-  DEFAULT: 0.25rem
-  md: 0.375rem
-  lg: 0.5rem
-  xl: 0.75rem
-  full: 9999px
-spacing:
-  unit: 8px
-  container-max: 1280px
-  gutter: 24px
-  margin-mobile: 16px
-  margin-desktop: 64px
-components:
-  button-primary:
-    backgroundColor: "{colors.primary}"
-    textColor: "{colors.on-primary}"
-    typography: "{typography.label-md}"
-    rounded: "{rounded.lg}"
-    padding: 12px
-    height: 48px
-  button-primary-hover:
-    backgroundColor: "{colors.primary-fixed}"
-  button-secondary:
-    backgroundColor: transparent
-    textColor: "{colors.secondary}"
-    typography: "{typography.label-md}"
-    rounded: "{rounded.lg}"
-    padding: 12px
-    height: 48px
-  card-glass-level-2:
-    backgroundColor: rgba(52, 52, 58, 0.2)
-    rounded: "{rounded.xl}"
-    padding: "{spacing.gutter}"
-  input-field:
-    backgroundColor: "{colors.surface-container-lowest}"
-    textColor: "{colors.on-surface}"
-    typography: "{typography.body-md}"
-    rounded: "{rounded.lg}"
-    padding: 12px
-  hero-headline:
-    textColor: "{colors.primary}"
-    typography: "{typography.headline-xl}"
-  badge-celestial:
-    backgroundColor: "{colors.tertiary-container}"
-    textColor: "{colors.on-tertiary-container}"
-    typography: "{typography.label-md}"
-    rounded: "{rounded.full}"
-    padding: 4px
----
-
-# Design System Inspired by Totality Festival
-
-> Category: Themed & Unique
-> Surface: web
-> A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.
-
-## 1. Visual Theme & Atmosphere
-
-"Cosmic Premium" — the visceral tension and awe of a solar eclipse. The aesthetic blends the stark mystery of deep space with the explosive brilliance of the solar corona. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients. High-energy amber accents represent the "diamond ring" flash — they make the interface feel luminous and alive rather than heavy or muted.
-
-- **Visual style:** dark, glassmorphic, cinematic
-- **Color stance:** obsidian neutral, amber corona accent, cyan atmospheric
-- **Design intent:** Keep outputs recognizable as a premium festival / creator product; use radial gradients for backgrounds to simulate the circular nature of the eclipse.
-
-## 2. Color
-
-- **Primary:** `#fff6df` — Amber / white-gold, the solar corona and "diamond ring" flash. Used for critical CTAs and high-importance highlights.
-- **Primary Container:** `#ffd700` — Pure corona gold. Reserved for the single most important highlight on a screen.
-- **Secondary:** `#bdf4ff` — Soft cyan, the atmospheric thinning and ethereal glow of the sky during totality. Used for interactive states and secondary emphasis.
-- **Secondary Container:** `#00e3fd` — Vivid cyan for interactive ambient glow rims.
-- **Tertiary:** `#fcf3ff` — Faint lavender-white for subtle tinted highlights.
-- **Tertiary Container:** `#e7d1ff` — Deep indigo haze, celestial badges.
-- **Surface:** `#121318` — Obsidian / near-black foundation.
-- **Surface Container:** `#1e1f25` — Slightly elevated obsidian for cards.
-- **Surface Container High:** `#292a2f` — Elevated panels, active states.
-- **Text:** `#e3e1e9` — Warm off-white for primary body copy and headlines.
-- **Text Muted:** `#d0c6ab` — Warm parchment tone for metadata and labels.
-- **Outline:** `#999077` — Low-contrast warm gray for hairline borders.
-
-- Favor Primary (#fff6df) and Primary Container (#ffd700) for the "corona flash" moments — max 3 per screen.
-- Use Secondary (#bdf4ff / #00e3fd) for interactive states, never for decorative flourishes.
-- Surfaces stack as semi-transparent glass: `rgba(255, 255, 255, 0.05-0.1)` with `backdrop-filter: blur(20px)` and a 1px `rgba(255, 255, 255, 0.1)` inner border to simulate light refraction.
-
-## 3. Typography
-
-A dual-font strategy to balance cinematic impact with utility.
-
-- **Display / Headings:** Space Grotesk — geometric, technical, futuristic-astronomical tone. Tight letter spacing (`-0.02em` to `-0.04em`) on large headings to feel "locked" and monumental.
-- **Body / Long-form:** Inter — neutral, highly legible in low-light environments.
-- **Labels:** Space Grotesk with wide tracking (`0.1em`) and uppercase, to read as "coordinates" or "readouts" rather than UI chrome.
-
-Apply a subtle text-shadow or low-opacity primary-colored glow to `headline-xl` elements on the darkest backgrounds for a truly cinematic feel — radiant, not static.
-
-## 4. Layout & Spacing
-
-- **Grid:** 12-column fixed grid on desktop with generous outer margins (64–80px) to simulate the isolation of a celestial body in the void. Fluid model on mobile with 16px margins.
-- **Rhythm:** 8px base unit. Internal component spacing tight (8 / 16px); external section margins wide (64 / 80px) to create distinct "islands" of content.
-- **Max width:** 1280px for content containers.
-- **Negative space is a feature, not a cost.** Prefer breathing room over density.
-
-## 5. Elevation & Depth
-
-Depth is achieved through **glassmorphism** and light-based layering — not traditional drop shadows.
-
-- **Level 1 (Base):** Deep obsidian surface with an optional radial gradient vignette in `#1a1b21` → `#121318`.
-- **Level 2 (Panels):** Semi-transparent surfaces at `rgba(52, 52, 58, 0.2)` with `backdrop-filter: blur(20px)` and a 1px inner stroke at `rgba(255, 255, 255, 0.1)` to simulate refraction on a glass edge.
-- **Level 3 (Interactive / Active):** An **ambient glow** — a soft, diffused shadow tinted with Secondary (`#00e3fd`) or Primary Container (`#ffd700`), creating the impression of light bleeding from behind the object.
-
-## 6. Shapes
-
-Shape language is **soft-technical**. Geometric overall, but small corner radii soften aggression.
-
-- **Buttons, inputs:** `rounded-lg` (8px).
-- **Cards, featured containers:** `rounded-xl` (12px).
-- **Badges, pills:** `rounded-full`.
-- **Decorative elements:** circles and perfect arcs are encouraged to mirror the orbital / eclipse theme.
-
-## 7. Components
-
-- **Primary button:** Amber fill on obsidian, with a luminous amber glow on hover (mimics the diamond-ring flash). Space Grotesk label, uppercase, `0.1em` tracking.
-- **Secondary button:** Transparent fill, cyan outline and label — suggests the sky's transition during totality.
-- **Glass card (level 2):** `rgba(52,52,58,0.2)` + 20px blur + 1px inner white stroke + generous internal padding.
-- **Input field:** Anchored in the deepest surface (`#0d0e13`) for maximum contrast; cyan border on focus.
-- **Badges:** Pill-shaped with the tertiary container color; reserved for "celestial" metadata (status, live indicators).
-
-## 8. Do's & Don'ts
-
-- **Do** use Primary Container (`#ffd700`) no more than 3 times per screen — it's the flash, not the background.
-- **Do** pair large Space Grotesk headlines with a subtle primary-colored glow on dark surfaces.
-- **Do** tint shadows and glows with Primary or Secondary — never use pure gray shadows.
-- **Don't** use solid opaque fills for cards — break the glass illusion.
-- **Don't** combine amber and cyan glows on the same element — choose one depending on state (amber = highlight / CTA; cyan = interactive / focus).
-- **Don't** use sharp 0-radius corners except for data tables where structure outweighs warmth.

package/dist/designer/data/systems/totality-festival/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>Totality Festival - reference components</title>
-    <meta name="description" content="Reference fixture for design-systems/totality-festival: festival identity with cosmic dark surfaces, warm highlights, and event-program cards." />
-    <style>
-      :root {
-        --bg: #070711;
-        --surface: #111126;
-        --surface-warm: #1e1540;
-        --fg: #f8f7ff;
-        --fg-2: #d6ccff;
-        --muted: #9d8ad4;
-        --meta: #c084fc;
-        --border: #34265e;
-        --border-soft: #241c42;
-        --accent: #c084fc;
-        --accent-on: #13051f;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #39ff88;
-        --warn: #fff34d;
-        --danger: #ff4d8d;
-        --font-display: Inter, system-ui, sans-serif;
-        --font-body: Inter, system-ui, sans-serif;
-        --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-        --text-xs: 12px;
-        --text-sm: 14px;
-        --text-base: 16px;
-        --text-lg: 18px;
-        --text-xl: 24px;
-        --text-2xl: 36px;
-        --text-3xl: 54px;
-        --text-4xl: 76px;
-        --leading-body: 1.52;
-        --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: 96px;
-        --section-y-tablet: 68px;
-        --section-y-phone: 48px;
-        --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 80px rgba(192, 132, 252, 0.22);
-        --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32);
-        --motion-fast: 150ms;
-        --motion-base: 240ms;
-        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-        --container-max: 1180px;
-        --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 78% 10%, rgba(192, 132, 252, 0.35), transparent 34%), radial-gradient(circle at 20% 20%, rgba(45, 212, 191, 0.22), transparent 32%), #070711; }
-      .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">Totality Festival design system</p>
-            <h1>Festival experience guide</h1>
-            <p class="lead">Event programming, celestial dark sections, and energetic schedule cards.</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="Totality Festival 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>festival identity with cosmic dark surfaces, warm highlights, and event-program cards.</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="totality-festival-input">Reference input</label><input id="totality-festival-input" value="Totality Festival 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/totality-festival/tokens.css

@@ -1,63 +0,0 @@
-/* design-systems/totality-festival/tokens.css
- * Structured token bindings for Totality Festival.
- * festival identity with cosmic dark surfaces, warm highlights, and event-program cards.
- */
-
-:root {
-  --bg: #070711;
-  --surface: #111126;
-  --surface-warm: #1e1540;
-  --fg: #f8f7ff;
-  --fg-2: #d6ccff;
-  --muted: #9d8ad4;
-  --meta: #c084fc;
-  --border: #34265e;
-  --border-soft: #241c42;
-  --accent: #c084fc;
-  --accent-on: #13051f;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #39ff88;
-  --warn: #fff34d;
-  --danger: #ff4d8d;
-  --font-display: Inter, system-ui, sans-serif;
-  --font-body: Inter, system-ui, sans-serif;
-  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 24px;
-  --text-2xl: 36px;
-  --text-3xl: 54px;
-  --text-4xl: 76px;
-  --leading-body: 1.52;
-  --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: 96px;
-  --section-y-tablet: 68px;
-  --section-y-phone: 48px;
-  --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 80px rgba(192, 132, 252, 0.22);
-  --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32);
-  --motion-fast: 150ms;
-  --motion-base: 240ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --container-max: 1180px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}

package/dist/designer/data/systems/trading-terminal/DESIGN.md

@@ -1,178 +0,0 @@
-# Trading Terminal Design System
-
-> Category: Themed & Unique
-> Bloomberg-style financial trading terminal. Dark-only, data-dense, cyan/coral buy/sell signals. Everything readable at a glance from two meters away.
-
-## 1. Visual Theme & Atmosphere
-
-A professional-grade financial data terminal. Dense, information-rich layouts designed for traders who need to monitor multiple markets simultaneously. Dark surfaces reduce eye strain during long sessions. Cyan accent (#00D4AA) signals positive/buy, coral (#FF4757) signals negative/sell. Everything readable at a glance from two meters away.
-
-- **Visual style:** dense, data-first, professional
-- **Color stance:** dark surfaces with high-contrast data colors
-- **Design intent:** keep outputs recognizable to this style family while preserving usability and readability
-
-### Prior Art
-
-Bloomberg Terminal, Refinitiv Eikon, FactSet, TradingView Pro. All share: dark-only surfaces, monospace data fonts, tabular layouts with no decorative spacing, and color-coded buy/sell signals.
-
-## 2. Color Palette & Roles
-
-### Surface Palette
-
-| Token | Hex | Usage |
-|-------|-----|-------|
-| Background | `#0D0D0D` | Primary canvas |
-| Surface | `#141414` | Elevated panels, cards |
-| Surface Hover | `#1A1A1A` | Hover state for panels |
-| Border | `#2A2A2A` | Panel separation |
-
-### Data Palette
-
-| Token | Hex | Usage |
-|-------|-----|-------|
-| Primary | `#00D4AA` | Positive values, buy signals, success |
-| Gain | `#00D4AA` | Positive price movement |
-| Loss | `#FF4757` | Negative price movement |
-| Warning | `#FFB800` | Caution alerts, margin warnings |
-| Neutral | `#808086` | Unchanged, secondary data |
-| Text Primary | `#FFFFFF` | High-contrast primary text |
-| Text Secondary | `#AAAAAA` | Labels, metadata |
-| Text Tertiary | `#828282` | Timestamps, grid labels |
-
-### Dark Mode
-
-Default and only mode. Trading terminals operate in dim environments for focus.
-
-```css
-:root {
-  --color-bg: #0D0D0D;
-  --color-surface: #141414;
-  --color-surface-hover: #1A1A1A;
-  --color-border: #2A2A2A;
-  --color-primary: #00D4AA;
-  --color-gain: #00D4AA;
-  --color-loss: #FF4757;
-  --color-warning: #FFB800;
-  --color-text: #FFFFFF;
-  --color-text-secondary: #AAAAAA;
-  --color-text-tertiary: #828282;
-  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
-  --space-6: 24px; --space-8: 32px; --space-12: 48px;
-}
-```
-
-## 3. Typography Rules
-
-| Role | Size | Weight | Line Height | Font |
-|------|------|--------|-------------|------|
-| Display | 28px | 600 | 1.0 | JetBrains Mono |
-| Heading | 16px | 600 | 1.2 | Inter |
-| Body | 14px | 400 | 1.3 | JetBrains Mono |
-| Label | 12px | 500 | 1.0 | Inter, uppercase |
-| Micro | 10px | 400 | 1.0 | JetBrains Mono |
-
-**Font labels for catalog extraction:**
-
-```
-Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
-Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
-Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
-Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
-Micro: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
-Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
-```
-
-## 4. Component Stylings
-
-### Order Book Row
-
-```css
-.order-book-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  padding: var(--space-1) 0;
-  border-bottom: 1px solid var(--color-border);
-}
-.order-book-size { color: var(--color-text-secondary); text-align: right; }
-.order-book-bid  { color: var(--color-gain); text-align: right; }
-.order-book-ask  { color: var(--color-loss); text-align: right; }
-```
-
-### Price Card
-
-```css
-.price-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-}
-.price-card-label {
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: uppercase;
-  color: var(--color-text-secondary);
-  letter-spacing: 0.05em;
-}
-.price-card-value {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 28px;
-  font-weight: 600;
-  color: var(--color-text);
-  line-height: 1.0;
-}
-.price-card-change {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 14px;
-}
-.price-card-change.positive { color: var(--color-gain); }
-.price-card-change.negative { color: var(--color-loss); }
-```
-
-### Ticker Bar
-
-Horizontal scrolling single-line ticker for market overview.
-
-```css
-.ticker-bar {
-  display: flex;
-  gap: var(--space-6);
-  overflow-x: auto;
-  padding: var(--space-2) 0;
-  border-bottom: 1px solid var(--color-border);
-}
-```
-
-## 5. Layout Principles
-
-Grid-based dense layout. Multiple data columns visible simultaneously. Panels share borders, not gaps. No rounded corners — sharp edges communicate precision. The layout is tabular: rows of data, columns of similar data.
-
-## 6. Depth & Elevation
-
-Trading terminals use flat design with border-based separation — no shadows. Surface shifts (#141414 vs #0D0D0D) convey elevation. Thin borders (#2A2A2A) define panel boundaries without decorative elements.
-
-## 7. Do's and Don'ts
-
-- Do not use color alone to signal buy/sell — always pair with a directional icon or label
-- Do not animate data values decoratively — traders need instant, stable reads
-- Do not use rounded corners — sharp precision aesthetic only
-- Do not use light mode — trading terminals operate in dim environments
-- Do not show more than 5 price points in a column — cognitive overload reduces decision speed
-- Do not use gradients — flat fills only
-
-## 8. Responsive Behavior
-
-Terminal layouts target desktop-first (1280px+). On narrower viewports, columns collapse from rightmost to leftmost, prioritizing price and change data. Below 768px, single-column stack with horizontal scroll for overflow data. No breakpoints alter the dark-only constraint.
-
-## 9. Agent Prompt Guide
-
-When generating a trading terminal interface, prompt the model to:
-- Use JetBrains Mono for all numeric data; Inter for labels and headings
-- Always show gain/loss values in monospace with color coding (#00D4AA green, #FF4757 red)
-- No rounded corners on any element
-- Use 100ms transitions for price updates, 150ms for hover states
-- Never use light mode or bright backgrounds
-- Include a horizontal ticker bar with scrolling price updates
-- All data changes retain old value briefly before swapping to prevent flash blindness