@aexol/spectral 0.7.0 → 0.7.1

package/dist/designer/data/systems/opencode-ai/tokens.css

@@ -0,0 +1,126 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/opencode-ai/tokens.css
+ *
+ * Structured token bindings for "Design System Inspired by OpenCode".
+ * Terminal-native dark theme: warm near-black canvas, Berkeley Mono as
+ * the sole typeface, flat depth (no shadows), Apple HIG semantic colors.
+ *
+ * Key brand decisions encoded here:
+ *   - Dark-on-dark: #201d1d (warm near-black) as page bg, #302c2c for surface
+ *   - #fdfcfc (barely-warm off-white) as primary text — never pure white
+ *   - Berkeley Mono ONLY — no second typeface, no typographic variation
+ *   - FLAT depth system — zero shadows; depth via borders and bg shifts
+ *   - Warm borders: rgba(15,0,0,0.12) — subtle red tint ties to warm palette
+ *   - Apple HIG semantic colors (#007aff, #ff3b30, #30d158, #ff9f0a)
+ *   - Narrow reading column (~880px) — single-column, text-centric
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (dark theme) ────────────────────────────────────────
+   * Warm near-black → slightly lighter dark surface.
+   * The reddish warmth (rgb(32,29,29)) is subtle but essential. */
+  --bg: #201d1d;             /* OpenCode Dark — warm near-black with reddish undertone */
+  --surface: #302c2c;        /* Dark Surface — elevated containers, slight differentiation */
+  --surface-warm: var(--surface); /* alias — no separate warm tier needed */
+
+  /* ─── Foreground (on dark) ────────────────────────────────────────
+   * Warm off-white text — never clinical pure white. */
+  --fg: #fdfcfc;             /* OpenCode Light — barely-warm off-white primary text */
+  --fg-2: #c8c6c4;           /* Warm light gray — secondary on dark */
+  --muted: #9a9898;          /* Mid Gray — secondary text, muted links */
+  --meta: #6e6e73;           /* Text Muted — disabled text, placeholders */
+
+  /* ─── Border (warm transparent) ──────────────────────────────────
+   * The warm red tint (rgba(15,0,0,...)) in borders ties them to the
+   * overall warm dark palette. Use #646262 for visible outlines. */
+  --border: #464343;         /* Warm dark border — visible against bg */
+  --border-soft: #302c2c;    /* Same as surface — barely-visible inner separator */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Apple system blue — #007aff. Familiar, trustworthy, high-contrast
+   * on the warm dark canvas. The full three-stage hover sequence:
+   * #007aff → #0056b3 (hover) → #004085 (active). */
+  --accent: #007aff;
+  --accent-on: #ffffff;
+  --accent-hover: #0056b3;   /* Accent Blue Hover — explicitly defined */
+  --accent-active: #004085;  /* Accent Blue Active — deeply pressed */
+
+  /* ─── Semantic (Apple HIG palette) ────────────────────────────────
+   * Familiar trustworthy signals on a dark terminal canvas. */
+  --success: #30d158;        /* Apple system green */
+  --warn: #ff9f0a;           /* Apple system orange */
+  --danger: #ff3b30;         /* Apple system red */
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Berkeley Mono is the ONLY font. No typographic variation — no
+   * display face, no body face — "everything is code" philosophy.
+   * Hierarchy via size and weight alone (400 / 500 / 700). */
+  --font-display: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --font-body: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --font-mono: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+
+  /* Type scale — DESIGN.md §3. Heading 1 at 38px, rest at 16px variants.
+   * The system is intentionally compressed — terminal scale. */
+  --text-xs: 12px;
+  --text-sm: 14px;           /* Caption — footnotes, metadata (lh 2.0) */
+  --text-base: 16px;         /* Body — standard text (weight 400 or 500) */
+  --text-lg: 18px;
+  --text-xl: 22px;
+  --text-2xl: 28px;
+  --text-3xl: 38px;          /* Heading 1 — hero headlines (weight 700, lh 1.5) */
+  --text-4xl: 48px;          /* Extended display if needed */
+
+  --leading-body: 1.5;       /* Monospace grid breathes at 1.5 */
+  --leading-tight: 1.0;      /* Compact labels, tab items */
+  --tracking-display: 0em;   /* Monospace doesn't need letter-spacing manipulation */
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 8px base unit. Generous extended scale (up to 96px) for sections.
+   * Sections separated by spacing alone — no decorative dividers. */
+  --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; /* Terminal-like generous spacing between sections */
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Minimal: 4px everywhere, 6px for form inputs (the roundest element).
+   * "Terminals don't have rounded corners" — utilitarian aesthetic. */
+  --radius-sm: 4px;          /* Default for all elements */
+  --radius-md: 6px;          /* Form inputs — slightly more approachable */
+  --radius-lg: 8px;          /* Rare — largest container radius */
+  --radius-pill: 9999px;     /* Declared but not part of the OpenCode aesthetic */
+
+  /* ─── Elevation (FLAT) ────────────────────────────────────────────
+   * Zero shadows — consistent with the terminal aesthetic.
+   * Depth via border treatments and background color shifts ONLY.
+   * All three levels use rings/outlines, never blur shadows. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 0 0 2px var(--border); /* Slightly more prominent ring — no blur */
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * Accent blue focus ring — no shadow-based ring (flat system). */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Terminal-inspired: instant state changes. 100ms for snappy feedback. */
+  --motion-fast: 100ms;
+  --motion-base: 150ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * Narrow reading column (880px) — single-column, text-centric.
+   * Generous side margins focus attention on the content. */
+  --container-max: 880px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 20px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Pacman
+
+> Category: Themed & Unique
+> Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
+
+## 1. Visual Theme & Atmosphere
+
+Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
+
+- **Visual style:** high-contrast, playful, dotted borders
+- **Color stance:** primary, secondary, success, warning, danger, info, surface/subtle layers
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#2A3FE5` — Token from style foundations.
+- **Secondary:** `#F4B9B0` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#000000` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#000000` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#2A3FE5) for CTA emphasis.
+- Use Surface (#000000) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Press Start 2P, display=Press Start 2P, mono=Space Mono
+- **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 `#2A3FE5`; 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 (#2A3FE5) 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/pacman/components.html

@@ -0,0 +1,342 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Pac-Man - reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/pacman: classic arcade maze language with black board, yellow signal, and rounded score capsules."
+    />
+    <style>
+      :root {
+        --bg: #050505;
+        --surface: #101014;
+        --surface-warm: #1f1b08;
+        --fg: #fff7d6;
+        --fg-2: #f6e79c;
+        --muted: #b9a85d;
+        --meta: #ffcc00;
+        --border: #2338ff;
+        --border-soft: #17218a;
+        --accent: #ffcc00;
+        --accent-on: #050505;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+        --success: #00ff66;
+        --warn: #ff9900;
+        --danger: #ff3b3b;
+        --font-display: "Press Start 2P", "Arial Black", system-ui, sans-serif;
+        --font-body: "Inter", system-ui, sans-serif;
+        --font-mono: "Press Start 2P", ui-monospace, monospace;
+        --text-xs: 10px;
+        --text-sm: 12px;
+        --text-base: 14px;
+        --text-lg: 16px;
+        --text-xl: 20px;
+        --text-2xl: 30px;
+        --text-3xl: 44px;
+        --text-4xl: 64px;
+        --leading-body: 1.6;
+        --leading-tight: 1.08;
+        --tracking-display: 0;
+        --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: 44px;
+        --radius-sm: 10px;
+        --radius-md: 18px;
+        --radius-lg: 9999px;
+        --radius-pill: 9999px;
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 0 0 0 2px #2338ff, 0 22px 60px rgba(0, 0, 0, 0.46);
+        --focus-ring: 0 0 0 4px rgba(255, 204, 0, 0.34);
+        --motion-fast: 90ms;
+        --motion-base: 160ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+        --container-max: 1080px;
+        --container-gutter-desktop: 32px;
+        --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 16% 28%, #ffcc00 0 10%, transparent 11%), linear-gradient(135deg, #050505 0%, #101014 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: 700; }
+      h2 { font-size: var(--text-3xl); font-weight: 650; }
+      h3 { font-size: var(--text-xl); font-weight: 650; }
+      .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: 620px;
+        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);
+        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;
+        align-items: center;
+        justify-content: space-between;
+        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 { 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);
+      }
+      .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
+      @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">Pac-Man design system</p>
+            <h1>Maze chase cabinet</h1>
+            <p class="lead">Black arcade board, yellow hero action, and playful maze modules.</p>
+            <div class="actions" aria-label="Reference actions">
+              <a class="btn btn-primary" href="#">Primary yellow arcade pill</a>
+              <a class="btn btn-secondary" href="#">Secondary action</a>
+            </div>
+          </div>
+          <article class="panel" aria-label="Pac-Man component preview">
+            <div class="panel-head">
+              <div>
+                <p class="eyebrow">Live module</p>
+                <h3>blue maze panel</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>classic arcade maze language with black board, yellow signal, and rounded score capsules.</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="pacman-input">Reference input</label>
+                  <input id="pacman-input" value="Pac-Man 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 brand 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/pacman/tokens.css

@@ -0,0 +1,64 @@
+/* design-systems/pacman/tokens.css
+ *
+ * Structured token bindings for Pac-Man.
+ * classic arcade maze language with black board, yellow signal, and rounded score capsules.
+ */
+
+:root {
+  --bg: #050505;
+  --surface: #101014;
+  --surface-warm: #1f1b08;
+  --fg: #fff7d6;
+  --fg-2: #f6e79c;
+  --muted: #b9a85d;
+  --meta: #ffcc00;
+  --border: #2338ff;
+  --border-soft: #17218a;
+  --accent: #ffcc00;
+  --accent-on: #050505;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #00ff66;
+  --warn: #ff9900;
+  --danger: #ff3b3b;
+  --font-display: "Press Start 2P", "Arial Black", system-ui, sans-serif;
+  --font-body: "Inter", system-ui, sans-serif;
+  --font-mono: "Press Start 2P", ui-monospace, monospace;
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-base: 14px;
+  --text-lg: 16px;
+  --text-xl: 20px;
+  --text-2xl: 30px;
+  --text-3xl: 44px;
+  --text-4xl: 64px;
+  --leading-body: 1.6;
+  --leading-tight: 1.08;
+  --tracking-display: 0;
+  --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: 44px;
+  --radius-sm: 10px;
+  --radius-md: 18px;
+  --radius-lg: 9999px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 0 0 2px #2338ff, 0 22px 60px rgba(0, 0, 0, 0.46);
+  --focus-ring: 0 0 0 4px rgba(255, 204, 0, 0.34);
+  --motion-fast: 90ms;
+  --motion-base: 160ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1080px;
+  --container-gutter-desktop: 32px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Paper
+
+> Category: Retro & Nostalgic
+> Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
+
+## 1. Visual Theme & Atmosphere
+
+Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
+
+- **Visual style:** minimal, clean
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#111111` — Token from style foundations.
+- **Secondary:** `#8B5CF6` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#111111) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Roboto, display=Montserrat, mono=PT Mono
+- **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:** 4/8/12/16/24/32
+- 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 `#111111`; 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 (#111111) 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.