@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,270 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/vercel/tokens.css
+ *
+ * Structured token bindings for "Vercel" — the engineering-as-design
+ * thesis of frontend deployment: a near-white canvas, near-black text,
+ * one saturated blue accent, and a shadow-as-border philosophy that
+ * replaces the box-model edge with a layered box-shadow stack.
+ *
+ * This file pre-compiles the values described in `DESIGN.md` into the
+ * shared schema. Agents generating an artifact for Vercel should paste
+ * the `:root` block verbatim into the first `<style>` of the artifact,
+ * then reference everything via `var(--*)`.
+ *
+ * Brand-specific schema decisions (each one bends a schema convention
+ * to match Vercel's voice rather than the cross-brand default):
+ *
+ *   1. `--accent` is the Vercel/Console blue (#0070f3), not Vercel Black.
+ *      Black is already `--fg`; the brand expresses primary CTAs by
+ *      using `--fg` as the button background, not `--accent`. The
+ *      `--accent` slot is reserved for the chromatic moments — links,
+ *      focus rings, badge tints — exactly where Vercel's blue appears
+ *      in product. Treating black as both `--fg` and `--accent` would
+ *      collapse two distinct intents into one name and break the
+ *      lint's "≤2 accent uses per screen" semantic.
+ *
+ *   2. `--fg` is `#171717` (Vercel Black), not `#000000`. The micro-
+ *      warmth at the top of the gray ramp is part of the brand — pure
+ *      black against pure white reads as harsh, and the rest of the
+ *      neutral scale (gray-600 / 500 / 400 / 100 / 50) is calibrated
+ *      against `#171717` not `#000000`. Bind the full four-level
+ *      foreground ramp (#171717 → #4d4d4d → #666666 → #808080) so
+ *      cross-brand components targeting `--fg-2` and `--meta` resolve
+ *      to Vercel's actual gray-600 / gray-400 instead of collapsing.
+ *
+ *   3. `--border` is `rgba(0, 0, 0, 0.08)` — the literal Vercel
+ *      shadow-as-border alpha, NOT a solid hex. DESIGN.md §1 names
+ *      this single value as "the signature" that "replaces traditional
+ *      borders throughout". Binding `--border` to the alpha lets
+ *      `--elev-ring` (`0 0 0 1px var(--border)`) reproduce the Vercel
+ *      hairline by default, and lets components reach the same value
+ *      via `border: 1px solid var(--border)` when a real border is
+ *      structurally necessary (e.g. image cards). `--border-soft`
+ *      drops to `0.04` for inner-row separators that must not compete.
+ *
+ *   4. `--elev-raised` is the full multi-layer Vercel card stack
+ *      (`0 0 0 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.04),
+ *      0 8px 8px -8px rgba(0,0,0,0.04), 0 0 0 1px #fafafa`), not the
+ *      schema's single soft blur. The inner `#fafafa` ring at the
+ *      bottom of the stack is the "subtle inner glow" DESIGN.md §6
+ *      calls out — without it, Vercel cards lose the built-not-
+ *      floating quality. The fourth layer's `#fafafa` is the only
+ *      raw hex inside the `:root` block, justified because the value
+ *      is structural to the shadow layer, not a recolorable surface.
+ *
+ *   5. `--focus-ring` is a solid 2px ring at `var(--accent)`, not the
+ *      schema's 3px alpha glow. Vercel's `--ds-focus-color` focus
+ *      outline is `2px solid hsla(212, 100%, 48%, 1)` everywhere;
+ *      reproducing it as a sharp 2px box-shadow keeps keyboard focus
+ *      legible against the white canvas without the soft halo that
+ *      would dilute the engineered feel.
+ *
+ *   6. The type scale tops out at 48px (`--text-4xl`), not 64px+.
+ *      DESIGN.md §3 caps display at 48px Geist W600 with
+ *      `letter-spacing: -2.4px` (which expresses as `-0.05em` in
+ *      `--tracking-display`). Vercel reads HUGE because the tracking
+ *      compresses, not because the px count climbs. `--leading-tight`
+ *      drops to `1.1` to match — display lines run shorter than the
+ *      schema default's 1.2.
+ *
+ *   7. Section rhythm is generous: `96px` desktop, `64px` tablet,
+ *      `48px` phone (`--section-y-*`). DESIGN.md §5 describes the
+ *      "gallery emptiness" of 80–120px+ vertical padding between
+ *      sections — the whitespace is the design. Container caps at
+ *      `1200px` (Vercel's documented max content width).
+ *
+ * Source contracts:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *   - A2 fallback parity:   design-systems/_schema/defaults.css
+ *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
+ *
+ * Keep this file additive: never invent token names not also
+ * documented in DESIGN.md or the schema. The Geist family does not
+ * need a CDN reference here — the font stack lists OS fallbacks so
+ * that artifacts render acceptably even when Geist is not loaded,
+ * and any host that wants the real Geist face links it externally.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
+   * Vercel's canvas is famously achromatic: pure white page, pure
+   * white cards, no warm tier. `--surface-warm` aliases to surface
+   * because the brand explicitly forbids background-color variation
+   * between sections — depth comes from shadow layering, not from
+   * tinting one surface warmer than another. (DESIGN.md §5: "White
+   * sections alternate with white sections — there's no color
+   * variation between sections.") */
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-warm: var(--surface);     /* alias — Vercel has no warm tier */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * Gray 900 → 600 → 500 → 400, the documented neutral scale from
+   * DESIGN.md §2. `#171717` instead of `#000000` matters — the
+   * yellow-undertone warmth is what keeps the page from reading as
+   * harsh. `--fg-2` and `--meta` are independently bound (not aliased)
+   * because Vercel genuinely uses four distinct text tiers: heading
+   * black, body description gray, tertiary caption gray, and
+   * placeholder/disabled gray. */
+  --fg: #171717;                       /* Gray 900 — headings, primary text */
+  --fg-2: #4d4d4d;                     /* Gray 600 — body description */
+  --muted: #666666;                    /* Gray 500 — captions, tertiary text */
+  --meta: #808080;                     /* Gray 400 — placeholder, disabled */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Shadow-as-border is THE signature: `rgba(0, 0, 0, 0.08)` at 1px
+   * spread replaces traditional borders throughout. Binding `--border`
+   * to the alpha (not a solid hex) lets `--elev-ring` reproduce the
+   * Vercel hairline by default, and lets `border: 1px solid var(--border)`
+   * paint the same value when a real border is structurally required
+   * (e.g. image-card top edge per DESIGN.md §4). `--border-soft`
+   * drops to 0.04 alpha for inner row separators that should not
+   * visually compete with the card edge. */
+  --border: rgba(0, 0, 0, 0.08);       /* signature shadow-as-border alpha */
+  --border-soft: rgba(0, 0, 0, 0.04);  /* inner row separator */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * The single chromatic move: Vercel/Console Blue. Used in links,
+   * focus rings, pill-badge tints, and console syntax highlighting.
+   * Hard cap of ≤2 visible uses per screen — DESIGN.md §7 forbids
+   * decorative use ("Color is functional, never decorative — workflow
+   * colors (Red/Pink/Blue) mark pipeline stages only").
+   *
+   * Primary CTAs in Vercel are BLACK, not blue. components.html
+   * encodes that pattern via `background: var(--fg)` on the primary
+   * button, so `--accent` stays reserved for the chromatic moments
+   * where blue actually appears. */
+  --accent: #0070f3;                   /* Vercel Blue / Console Blue */
+  --accent-on: #ffffff;                /* white label on saturated blue */
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * Vercel's marketing surface rarely renders state. We inherit the
+   * schema defaults (no warm-shift) because the brand has no defined
+   * success/warn/danger palette of its own; the workflow accents
+   * (Ship Red, Preview Pink, Develop Blue from DESIGN.md §2) are
+   * pipeline labels, not status colors, and intentionally do NOT
+   * bind here. */
+  --success: #16a34a;
+  --warn: #eab308;
+  --danger: #dc2626;
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Geist Sans is Vercel's open-source typeface — `--font-display`
+   * and `--font-body` share the stack; size, weight, and tracking
+   * carry hierarchy, not face. The Arial/system fallbacks come from
+   * DESIGN.md §3 and ensure artifacts render legibly even when Geist
+   * is not loaded. Geist Mono for code and technical labels
+   * preserves the "developer console voice" that connects the
+   * marketing site to the product. */
+  --font-display: "Geist", "Geist Sans", -apple-system, "Segoe UI", Arial, sans-serif;
+  --font-body: "Geist", "Geist Sans", -apple-system, "Segoe UI", Arial, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
+
+  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
+   * The scale tops out at 48px (display hero); Vercel reads BIG
+   * because of -0.05em compression on display, not because of a
+   * larger px ceiling. */
+  --text-xs: 12px;                     /* caption, metadata, tags */
+  --text-sm: 14px;                     /* button, link, small UI */
+  --text-base: 16px;                   /* body small, navigation */
+  --text-lg: 20px;                     /* body large, introductions */
+  --text-xl: 24px;                     /* card title */
+  --text-2xl: 32px;                    /* sub-heading, large card */
+  --text-3xl: 40px;                    /* section heading */
+  --text-4xl: 48px;                    /* display hero */
+
+  /* `--leading-tight` is 1.1 (DESIGN.md says 1.00–1.17 at display),
+   * `--leading-body` is 1.5 (the documented 16px / 24px ratio).
+   * `--tracking-display` is `-0.05em`, the em-relative form of
+   * Vercel's `-2.4px at 48px` — letter-spacing in em scales
+   * proportionally with size, matching DESIGN.md §3's principle
+   * that "tracking scales with font size". */
+  --leading-body: 1.5;
+  --leading-tight: 1.1;
+  --tracking-display: -0.05em;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * 4px-grid base scale. Vercel's documented spacing (DESIGN.md §5)
+   * uses 1–6px sub-tier increments for micro-padding (button
+   * `0px 6px`, etc.); those are inlined per-component because they
+   * are too fine to belong in the shared schema. The 4/8/12/16/20/
+   * 24/32/48 tier covers the structural rhythm. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+
+  /* Section rhythm — DESIGN.md §5: 80–120px+ vertical padding between
+   * sections desktop, collapsing to 48px on mobile. We sit in the
+   * middle at 96px desktop, drop to 64px on tablet (still generous),
+   * and 48px on phone (the documented mobile floor). */
+  --section-y-desktop: 96px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * DESIGN.md §5 radius scale: 2/4/6/8/12/64/100/9999. We bind the
+   * four schema tiers to: 6 (button/input/functional), 8 (card),
+   * 12 (image/featured card), 9999 (badge/pill). The 64px and
+   * 100px "navigation pill" radii from DESIGN.md are component-
+   * specific and not part of the shared schema. */
+  --radius-sm: 6px;                    /* buttons, inputs, functional */
+  --radius-md: 8px;                    /* cards, modals */
+  --radius-lg: 12px;                   /* image cards, featured */
+  --radius-pill: 9999px;               /* badges, status pills */
+
+  /* ─── Elevation (3 levels) ───────────────────────────────────────
+   * Vercel's depth system is shadow-LED, not blur-led. Three levels:
+   *
+   *   --elev-flat    no shadow (page background, text blocks)
+   *   --elev-ring    the signature 1px shadow-as-border (most surfaces)
+   *   --elev-raised  the multi-layer Vercel card stack (featured cards)
+   *
+   * `--elev-raised` is reproduced VERBATIM from DESIGN.md §6 Level 3,
+   * including the inner `#fafafa` 1px ring that DESIGN.md calls out
+   * as "the glow that makes the system work" — never drop the last
+   * layer when overriding this token. The four layers compose:
+   *   ring  (1px shadow-as-border, sits on top)
+   *   close (2px 2px soft elevation, just below the surface)
+   *   far   (8px blur -8px spread, ambient depth at distance)
+   *   inner (1px #fafafa ring, the subtle highlight) */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    0 0 0 1px rgba(0, 0, 0, 0.08),
+    0 2px 2px rgba(0, 0, 0, 0.04),
+    0 8px 8px -8px rgba(0, 0, 0, 0.04),
+    0 0 0 1px #fafafa;
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * Vercel's `--ds-focus-color` is `hsla(212, 100%, 48%, 1)`; the
+   * outline is `2px solid` on every interactive element. We
+   * reproduce that as a sharp 2px box-shadow at `var(--accent)`,
+   * NOT the schema's 3px alpha glow — Vercel's focus is engineered,
+   * not atmospheric. */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * Two durations + one easing curve, per anti-ai-slop's "short,
+   * purposeful transitions (150–250ms) with stable easing". Vercel
+   * transitions are quick and unobtrusive — never a long-form
+   * choreographed entrance. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1200px max content width per DESIGN.md §5. Gutters narrow on
+   * mobile to preserve the line-length-as-craft feel — Vercel does
+   * NOT edge-bleed body copy on phones, only screenshots. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Vibrant
+
+> Category: Bold & Expressive
+> Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.
+
+## 1. Visual Theme & Atmosphere
+
+Lively, colorful design with bold playful typography, warm accents, and dynamic visual energy.
+
+- **Visual style:** modern, clean, bold, playful
+- **Color stance:** primary, secondary, neutral, success
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#7C61D4` — Token from style foundations.
+- **Secondary:** `#EAAE87` — 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:** `#2F281D` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#7C61D4) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#2F281D) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Noto Sans, display=Fascinate, mono=Fira Code
+- **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:** 2/4/8/12/16/24/32/48
+- 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 `#7C61D4`; 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 (#7C61D4) 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/vibrant/components.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vibrant - reference components</title>
+    <meta name="description" content="Reference fixture for design-systems/vibrant: vibrant visual system with saturated accents, warm surfaces, and optimistic product energy." />
+    <style>
+      :root {
+        --bg: #fff8d7;
+        --surface: #ffffff;
+        --surface-warm: #ffef9f;
+        --fg: #1d1836;
+        --fg-2: #4c426c;
+        --muted: #796f91;
+        --meta: #ff6b00;
+        --border: #eadfba;
+        --border-soft: #f5eccd;
+        --accent: #ff6b00;
+        --accent-on: #ffffff;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+        --success: #2e9d57;
+        --warn: #ffb020;
+        --danger: #e5484d;
+        --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 18px 44px rgba(29, 24, 54, 0.14);
+        --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26);
+        --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: linear-gradient(135deg, #fff8d7 0%, #ffef9f 52%, #ffffff 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: 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">Vibrant design system</p>
+            <h1>Vibrant brand launch</h1>
+            <p class="lead">Saturated sections, expressive controls, and colorful high-energy component states.</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="Vibrant 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>vibrant visual system with saturated accents, warm surfaces, and optimistic product energy.</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="vibrant-input">Reference input</label><input id="vibrant-input" value="Vibrant 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/vibrant/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/vibrant/tokens.css
+ * Structured token bindings for Vibrant.
+ * vibrant visual system with saturated accents, warm surfaces, and optimistic product energy.
+ */
+
+:root {
+  --bg: #fff8d7;
+  --surface: #ffffff;
+  --surface-warm: #ffef9f;
+  --fg: #1d1836;
+  --fg-2: #4c426c;
+  --muted: #796f91;
+  --meta: #ff6b00;
+  --border: #eadfba;
+  --border-soft: #f5eccd;
+  --accent: #ff6b00;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #2e9d57;
+  --warn: #ffb020;
+  --danger: #e5484d;
+  --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 18px 44px rgba(29, 24, 54, 0.14);
+  --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26);
+  --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/vintage/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Vintage
+
+> Category: Retro & Nostalgic
+> 1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.
+
+## 1. Visual Theme & Atmosphere
+
+1950s-1990s nostalgia with skeuomorphic touches, grainy textures, retro color palettes, and pixel-style typography.
+
+- **Visual style:** clean, vintage, retro
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#008080` — Token from style foundations.
+- **Secondary:** `#C0C0C0` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#C0C0C0` — Token from style foundations.
+- **Text:** `#000000` — Token from style foundations.
+- **Neutral:** `#C0C0C0` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#008080) for CTA emphasis.
+- Use Surface (#C0C0C0) for large backgrounds and cards.
+- Keep body copy on Text (#000000) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32
+- **Families:** primary=Silkscreen, display=Silkscreen, mono=JetBrains Mono
+- **Weights:** 400, 700
+- 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 `#008080`; 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 (#008080) 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.