@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,218 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * 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

@@ -0,0 +1,71 @@
+# 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

@@ -0,0 +1,154 @@
+<!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

@@ -0,0 +1,63 @@
+/* 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

@@ -0,0 +1,62 @@
+# 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.