@aexol/spectral 0.9.269 → 0.9.271

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

@@ -1,218 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/cursor/tokens.css
- *
- * Structured token bindings for the "Cursor" brand — the AI-first code
- * editor's marketing voice translated into the shared schema. Like
- * `default/tokens.css` and `kami/tokens.css`, agents are expected to
- * paste the `:root { … }` block verbatim into the first `<style>` of
- * every artifact, then reference values via `var(--name)`.
- *
- * Why this file exists:
- *   DESIGN.md describes Cursor in prose ("warm cream `#f2f1ed`, warm
- *   near-black `#26251e` text, oklab borders") — agents have to translate
- *   that prose into shared token names without inventing brand variants
- *   like `--cursor-cream`. This file pre-translates once.
- *
- * Brand identity in three sentences:
- *   1. Warm-shifted everything — cream surfaces, near-black-with-yellow
- *      text, oklab-space borders. Pure white / pure black are reserved
- *      for code-editor panels and nowhere else.
- *   2. Three typographic voices — CursorGothic at display sizes with
- *      aggressive negative letter-spacing (signature), jjannon serif for
- *      editorial body, berkeleyMono for code/kbd.
- *   3. Hover semantic is text→crimson (`--danger`), not bg-darken.
- *      Component CSS reading `--accent-hover` still gets the schema's
- *      darken formula because some artifacts (CTA pills with accent bg)
- *      do need it; the brand-signature crimson hover is component-level
- *      not token-level.
- *
- * Schema decisions specific to Cursor:
- *   - --surface-warm binds to a real warmer tier (#ebeae5 — the
- *     "Surface 300" button-default), not aliased to surface. Cursor's
- *     surface scale 100→500 is a hallmark; the schema slot maps to the
- *     middle tier that buttons rest on.
- *   - --fg-2, --meta, --border-soft bind to oklab-fallback rgba values
- *     at distinct alpha levels (0.9 / 0.4 / 0.06) rather than aliasing,
- *     because Cursor genuinely has the richer ramp.
- *   - --tracking-display is set to -0.03em (the 72px hero value
- *     normalized to em). Smaller display sizes in components should
- *     scale tracking proportionally; the schema only carries one slot.
- *   - --elev-raised binds to Cursor's signature 28px/70px diffused
- *     shadow rather than the schema fallback. This is the depth move
- *     that makes Cursor feel like a print publication.
- *   - --focus-ring is depth-only (0 4px 12px), not the halo formula.
- *     Cursor never paints cool-blue rings.
- *   - --ease-standard: ease (per DESIGN.md §Interaction & Motion), not
- *     the schema's cubic-bezier. Brand authenticity over micro-control.
- *
- * Tokens NOT lifted (intentional):
- *   - The fine-grained sub-8px spacing scale (1.5px, 2px, 2.5px, 3px,
- *     5px, 6px) used for icon/text micro-alignment is component-internal
- *     in this fixture. Promote to C-extension via BRAND_EXTENSIONS only
- *     if cross-component reuse demands it.
- *   - The named surface scale 100/200/300/400/500 is encoded via the
- *     three schema slots (--bg / --surface / --surface-warm). The
- *     extreme tiers (100 lightest, 500 deepest) live as inline
- *     declarations in components.html where needed.
- *   - The timeline state colors (Thinking peach, Grep sage, Read blue,
- *     Edit lavender) are decorative state markers, not brand surface
- *     tokens. They belong in component CSS for the AI timeline element,
- *     not in :root.
- * ─────────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface (3 levels) ──────────────────────────────────────────
-   * Cream canvas that defines the entire warm system. Default's
-   * `#fafafa → #ffffff` ladder gets replaced by `#f2f1ed → #e6e5e0`,
-   * with the warmer surface tier (#ebeae5) bound to --surface-warm
-   * for buttons that rest on the page background. */
-  --bg: #f2f1ed;                    /* Surface 200 — warm off-white */
-  --surface: #e6e5e0;               /* Surface 400 — card / lifted */
-  --surface-warm: #ebeae5;          /* Surface 300 — button default */
-
-  /* ─── Foreground ramp (4 levels) ────────────────────────────────
-   * Cursor genuinely has a 4-tier ramp: solid for headings/body,
-   * 90% for "light surface" button labels, 55% for secondary text,
-   * 40% for link underlines and metadata. All bind to the same
-   * oklab-fallback rgba (warm brown) at different alphas. */
-  --fg: #26251e;                              /* warm near-black */
-  --fg-2: rgba(38, 37, 30, 0.9);              /* solid headings on light surfaces */
-  --muted: rgba(38, 37, 30, 0.55);            /* secondary text */
-  --meta: rgba(38, 37, 30, 0.4);              /* metadata, link decoration */
-
-  /* ─── Border (2 levels) ─────────────────────────────────────────
-   * DESIGN.md §Color Palette specifies oklab-space borders as the
-   * brand signature. The CSS-compatible fallback (rgba) is what
-   * actually ships per DESIGN.md §Agent Prompt Guide rule 3. */
-  --border: rgba(38, 37, 30, 0.1);            /* primary border, 10% warm brown */
-  --border-soft: rgba(38, 37, 30, 0.06);      /* row separators, ghost-button bg */
-
-  /* ─── Accent ──────────────────────────────────────────────────────
-   * Cursor Orange — primary CTAs, link color, ONE hero accent per
-   * screen. Hard cap of 2 visible uses per screen still applies via
-   * lint. Note: the signature hover semantic in DESIGN.md is text
-   * shifting to --danger (crimson) on buttons; the schema's
-   * --accent-hover is reserved for the bg-darken case (when accent
-   * IS the bg, e.g. accent-pill CTA). */
-  --accent: #f54e00;
-  --accent-on: #ffffff;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-
-  /* ─── Semantic ────────────────────────────────────────────────────
-   * --danger is Cursor's signature interaction color (hover crimson
-   * on buttons), so it gets the brand-specific warm value rather
-   * than the schema fallback's pure red. --success is a muted
-   * teal-green (warm-shifted). --warn keeps the schema fallback;
-   * Cursor's marketing site has no native warn token. */
-  --success: #1f8a65;                         /* muted teal-green */
-  --warn: #eab308;
-  --danger: #cf2d56;                          /* warm crimson — hover signature */
-
-  /* ─── Typography ──────────────────────────────────────────────────
-   * Three voices, three roles:
-   *   --font-display: CursorGothic for headings + UI labels
-   *   --font-body: jjannon serif for editorial body (literary warmth)
-   *   --font-mono: berkeleyMono for code, kbd, terminal text
-   * The three-voice system is the typographic signature; component
-   * CSS should never substitute fewer voices for "simplicity". */
-  --font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-  /* Type scale — distilled from DESIGN.md §Typography Hierarchy.
-   * Cursor has more than 8 sizes in production (caption 11, body
-   * sans 16, body serif sm 17.28, body serif 19.2, title small 22,
-   * sub-heading 26, section 36, hero 72); the schema's 8 slots
-   * cover the spine. 17.28px / 19.2px live inline in components.html
-   * where the body-serif distinction matters. */
-  --text-xs: 11px;                  /* caption, system micro */
-  --text-sm: 14px;                  /* button label, system caption */
-  --text-base: 16px;                /* body sans, ui body */
-  --text-lg: 19.2px;                /* body serif (1.20rem) */
-  --text-xl: 22px;                  /* title small */
-  --text-2xl: 26px;                 /* sub-heading */
-  --text-3xl: 36px;                 /* section heading */
-  --text-4xl: 72px;                 /* display hero */
-
-  /* Leading + tracking — DESIGN.md §Typography Hierarchy.
-   * --leading-tight=1.10 is Cursor's hero rhythm (matches the
-   * 72px display); brands with relaxed display rhythms set 1.20.
-   * --tracking-display=-0.03em is the 72px-normalized hero tracking
-   * (-2.16px / 72px). Smaller display sizes in components.html
-   * use proportional inline overrides. */
-  --leading-body: 1.5;
-  --leading-tight: 1.10;
-  --tracking-display: -0.03em;
-
-  /* ─── Spacing ─────────────────────────────────────────────────────
-   * 8px-rooted scale from DESIGN.md §Layout Principles (with the
-   * --space-1=4px tier kept for icon/dot rhythm). Cursor's
-   * sub-8px micro-scale (1.5/2/2.5/3/5/6) is component-internal —
-   * see the elev-ring / icon-rule decisions in components.html. */
-  --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 §Responsive Behavior collapsing
-   * strategy: "Section spacing: 80px+ → 48px → 32px on mobile". */
-  --section-y-desktop: 80px;
-  --section-y-tablet: 48px;
-  --section-y-phone: 32px;
-
-  /* ─── Radius ──────────────────────────────────────────────────────
-   * DESIGN.md §Border Radius Scale: comfortable 8px (primary
-   * buttons/cards/menus), featured 10px (larger containers), full
-   * pill 9999px (tags/filters). Schema's --radius-md gets 10px
-   * rather than 12px to honor the cursor-specific featured tier;
-   * --radius-lg keeps 12px because no Cursor surface uses 16px+. */
-  --radius-sm: 8px;
-  --radius-md: 10px;
-  --radius-lg: 12px;
-  --radius-pill: 9999px;
-
-  /* ─── Elevation ───────────────────────────────────────────────────
-   * Cursor's depth signature (DESIGN.md §Depth & Elevation): no
-   * crisp drop shadows. Border ring + diffused atmospheric lift.
-   *   --elev-flat: pages, text blocks
-   *   --elev-ring: standard card edge (1px warm-brown ring)
-   *   --elev-raised: signature heavy-blur shadow with oklab ring,
-   *                  used for elevated cards / popovers / modals. */
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised:
-    0 28px 70px rgba(0, 0, 0, 0.14),
-    0 14px 32px rgba(0, 0, 0, 0.1),
-    0 0 0 1px var(--border);
-
-  /* ─── Focus ───────────────────────────────────────────────────────
-   * DESIGN.md §Interaction & Motion: "Shadow-based focus:
-   * rgba(0,0,0,0.1) 0px 4px 12px for depth-based focus indication.
-   * Consistent warm tone in all focus states — no cold blue focus
-   * rings." Implemented as box-shadow so it layers without
-   * affecting layout. */
-  --focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
-
-  /* ─── Motion ──────────────────────────────────────────────────────
-   * DESIGN.md §Interaction & Motion specifies 150ms color / 200ms
-   * shadow with `ease` easing. Cursor uses the keyword `ease`
-   * rather than a custom cubic-bezier; component authors should
-   * not rebind to a more aggressive curve. */
-  --motion-fast: 150ms;
-  --motion-base: 200ms;
-  --ease-standard: ease;
-
-  /* ─── Layout ──────────────────────────────────────────────────────
-   * DESIGN.md §Grid & Container: "Max content width: approximately
-   * 1200px". Gutters not explicitly specified; using cross-brand
-   * defaults that match default. */
-  --container-max: 1200px;
-  --container-gutter-desktop: 24px;
-  --container-gutter-tablet: 16px;
-  --container-gutter-phone: 12px;
-}

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

@@ -1,71 +0,0 @@
-# Design System Inspired by Dashboard
-
-> Category: Professional & Corporate
-> Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
-
-## 1. Visual Theme & Atmosphere
-
-Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
-
-- **Visual style:** modern, clean, cloud-platform aesthetic (Heroku/Vercel/GitHub inspired), dark theme, subtle gradients, soft shadows, glass-like panels, rounded components
-- **Color stance:** primary, neutral, success, warning, danger
-- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
-
-## 2. Color
-
-- **Primary:** `#0C5CAB` — Token from style foundations.
-- **Secondary:** `#0A4A8A` — Token from style foundations.
-- **Success:** `#10B981` — Token from style foundations.
-- **Warning:** `#F59E0B` — Token from style foundations.
-- **Danger:** `#EF4444` — Token from style foundations.
-- **Surface:** `#09090B` — Token from style foundations.
-- **Text:** `#FAFAFA` — Token from style foundations.
-- **Neutral:** `#09090B` — Derived from the surface token for official format compatibility.
-
-- Favor Primary (#0C5CAB) for CTA emphasis.
-- Use Surface (#09090B) for large backgrounds and cards.
-- Keep body copy on Text (#FAFAFA) for legibility.
-
-## 3. Typography
-
-- **Scale:** 12/14/16/20/24/32
-- **Families:** primary=IBM Plex Sans, display=IBM Plex Sans, mono=IBM Plex Sans
-- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
-- Headings should carry the style personality; body text should optimize scanability and contrast.
-
-## 4. Spacing & Grid
-
-- **Spacing scale:** 8pt baseline grid
-- Keep vertical rhythm consistent across sections and components.
-- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
-
-## 5. Layout & Composition
-
-- Prefer clear content blocks with consistent internal padding.
-- Keep hierarchy obvious: headline → support text → primary action.
-- Use whitespace to separate concerns before adding borders or shadows.
-
-## 6. Components
-
-- Buttons: primary action uses `#0C5CAB`; secondary actions stay neutral.
-- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
-- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
-
-## 7. Motion & Interaction
-
-- Use subtle transitions that emphasize Primary (#0C5CAB) as the interaction signal.
-- Default to short, purposeful transitions (150–250ms) with stable easing.
-- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
-
-## 8. Voice & Brand
-
-- Tone should reflect the visual style: concise, confident, and product-specific.
-- Keep microcopy action-oriented and avoid generic filler language.
-- Preserve the style identity in headlines while keeping UI labels literal and clear.
-
-## 9. Anti-patterns
-
-- Do not introduce off-palette colors when an existing token can solve the problem.
-- Do not flatten hierarchy by using the same type size/weight for all text.
-- Do not add decorative effects that reduce readability or accessibility.
-- Do not mix unrelated visual metaphors in the same interface.

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

@@ -1,154 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Dashboard - reference components</title>
-    <meta name="description" content="Reference fixture for design-systems/dashboard: analytics dashboard with compact cards, cool surfaces, and status-first information design." />
-    <style>
-      :root {
-        --bg: #f4f7fb;
-        --surface: #ffffff;
-        --surface-warm: #eef6ff;
-        --fg: #111827;
-        --fg-2: #334155;
-        --muted: #64748b;
-        --meta: #0ea5e9;
-        --border: #d8e2ee;
-        --border-soft: #edf3f8;
-        --accent: #0ea5e9;
-        --accent-on: #04131d;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #10b981;
-        --warn: #f59e0b;
-        --danger: #ef4444;
-        --font-display: Inter, system-ui, sans-serif;
-        --font-body: Inter, system-ui, sans-serif;
-        --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
-        --text-xs: 11px;
-        --text-sm: 13px;
-        --text-base: 15px;
-        --text-lg: 17px;
-        --text-xl: 22px;
-        --text-2xl: 30px;
-        --text-3xl: 42px;
-        --text-4xl: 56px;
-        --leading-body: 1.48;
-        --leading-tight: 1.1;
-        --tracking-display: -0.015em;
-        --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: 84px;
-        --section-y-tablet: 60px;
-        --section-y-phone: 42px;
-        --radius-sm: 8px;
-        --radius-md: 12px;
-        --radius-lg: 18px;
-        --radius-pill: 9999px;
-        --elev-flat: none;
-        --elev-ring: 0 0 0 1px var(--border);
-        --elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10);
-        --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
-        --motion-fast: 120ms;
-        --motion-base: 200ms;
-        --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: linear-gradient(135deg, #f4f7fb 0%, #eef6ff 100%); }
-      .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: 820px; 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">Dashboard design system</p>
-            <h1>Operational metrics wall</h1>
-            <p class="lead">Dense analytics cards, status chips, and quick scanning for repeated use.</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="Dashboard 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>analytics dashboard with compact cards, cool surfaces, and status-first information design.</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 brand signal.</p><div class="field"><label for="dashboard-input">Reference input</label><input id="dashboard-input" value="Dashboard 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 brand-specific focus rings and easing.</p></article></div></section>
-    </main>
-  </body>
-</html>

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

@@ -1,63 +0,0 @@
-/* design-systems/dashboard/tokens.css
- * Structured token bindings for Dashboard.
- * analytics dashboard with compact cards, cool surfaces, and status-first information design.
- */
-
-:root {
-  --bg: #f4f7fb;
-  --surface: #ffffff;
-  --surface-warm: #eef6ff;
-  --fg: #111827;
-  --fg-2: #334155;
-  --muted: #64748b;
-  --meta: #0ea5e9;
-  --border: #d8e2ee;
-  --border-soft: #edf3f8;
-  --accent: #0ea5e9;
-  --accent-on: #04131d;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #10b981;
-  --warn: #f59e0b;
-  --danger: #ef4444;
-  --font-display: Inter, system-ui, sans-serif;
-  --font-body: Inter, system-ui, sans-serif;
-  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
-  --text-xs: 11px;
-  --text-sm: 13px;
-  --text-base: 15px;
-  --text-lg: 17px;
-  --text-xl: 22px;
-  --text-2xl: 30px;
-  --text-3xl: 42px;
-  --text-4xl: 56px;
-  --leading-body: 1.48;
-  --leading-tight: 1.1;
-  --tracking-display: -0.015em;
-  --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: 84px;
-  --section-y-tablet: 60px;
-  --section-y-phone: 42px;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 18px;
-  --radius-pill: 9999px;
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 18px 46px rgba(15, 23, 42, 0.10);
-  --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
-  --motion-fast: 120ms;
-  --motion-base: 200ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --container-max: 1280px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}

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

@@ -1,62 +0,0 @@
-# Neutral Modern
-
-> Category: Starter
-> A clean, product-oriented default. Use when the brief doesn't call for a
-> specific mood — good for B2B tools, dashboards, and utility pages.
-
-## Visual Theme & Atmosphere
-Calm, functional, quietly confident. No ornament. Content-first, chrome-second.
-
-## Color Palette & Roles
-- **Background:** `#FAFAFA`
-- **Foreground:** `#111111`
-- **Accent:** `#2F6FEB` (cobalt) — primary CTAs, links, one hero element per screen
-- **Muted:** `#6B6B6B` — secondary text, captions
-- **Border:** `#E5E5E5`
-- **Surface:** `#FFFFFF` — cards, modals
-- **Success:** `#17A34A`, **Warn:** `#EAB308`, **Danger:** `#DC2626`
-Never pure black; never pure white for backgrounds.
-
-## Typography Rules
-- **Display / headings:** `'Inter', -apple-system, system-ui, sans-serif`, weight 600
-- **Body:** `'Inter', -apple-system, system-ui, sans-serif`, weight 400
-- **Mono:** `ui-monospace, 'JetBrains Mono', monospace`
-- Scale (px): 12 · 14 · 16 · 20 · 24 · 32 · 48 · 64
-- Line-height: 1.5 for body, 1.2 for headings
-- Letter-spacing: -0.01em on display sizes ≥32px
-
-## Component Stylings
-- **Buttons:** 8px radius, 10px padding-block, 16px padding-inline. Primary = cobalt fill, white label. Secondary = 1px border, transparent fill.
-- **Cards:** white, 1px border, 12px radius, 20px internal padding, no shadow by default.
-- **Inputs:** 1px border, 8px radius, 10px vertical padding, cobalt border on focus.
-- **Links:** cobalt, no underline, underline on hover.
-
-## Layout Principles
-- 12-column grid, 1200px max-width, 24px gutters.
-- Hero: 40–60vh. Content top-biased, never centered vertically.
-- Sections: 80px top+bottom spacing desktop, 48px tablet, 32px phone.
-- Use whitespace as the main separator. Dividers only between unrelated top-level sections.
-
-## Depth & Elevation
-Two levels only:
-- **Flat (0):** default.
-- **Raised (1):** dropdowns, modals, floating buttons. 2px y-offset, 8px blur, foreground at 8% opacity.
-No neumorphism, no glassmorphism.
-
-## Do's and Don'ts
-- ✅ Let whitespace do the work.
-- ✅ One accent element per screen.
-- ✅ Sentence-case headings by default; title case only for brand names.
-- ❌ No gradients (except the accent → accent-at-80% on a hero, sparingly).
-- ❌ No drop shadows on inputs.
-- ❌ No more than three type sizes on one screen.
-
-## Responsive Behavior
-- **Desktop ≥ 1024px:** 12-col grid.
-- **Tablet 640–1023px:** 8-col grid, 16px gutters.
-- **Phone < 640px:** 4-col grid, 12px gutters; hero drops to 40vh.
-
-## Agent Prompt Guide
-- When in doubt, subtract. Fewer boxes, less chrome, more space.
-- Use the accent color sparingly — at most one hero accent and one CTA accent per screen.
-- Do not invent hex values outside this palette. If the request needs one, surface a warning comment in the artifact and use the closest existing token.