@aexol/spectral 0.9.270 → 0.9.272

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

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

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

@@ -1,136 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>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

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

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