@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,353 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/resend/tokens.css
+ *
+ * Structured token bindings for "Resend" — the developer-first email
+ * API whose marketing surface treats a pure-black canvas like a
+ * gallery wall and lights every container with a single, icy blue-
+ * tinted hairline.
+ *
+ * Brand identity in three sentences:
+ *   1. Void-black (#000000) canvas with near-white (#f0f0f0) ink —
+ *      theatrical darkness; the page is the stage and content
+ *      performs on it without competing chrome.
+ *   2. Frost borders (rgba(214, 235, 253, 0.19)) replace gray borders
+ *      everywhere — every divider, button, card, and tab is a thin
+ *      icy line on the void; depth is by border luminance, not by
+ *      blur shadows that cannot cast against pure black.
+ *   3. ABC Favorit (geometric sans) for display headings with
+ *      aggressive negative tracking, Inter for body and UI, Commit
+ *      Mono for code — one accent at a time (here: Resend Orange
+ *      #ff801f) so the chromatic moment lands hard against the gray.
+ *
+ * Brand-specific schema decisions (each one bends a schema convention
+ * to match Resend's voice rather than the cross-brand default):
+ *
+ *   1. `--bg` and `--surface` both bind to `#000000`. DESIGN.md §7 is
+ *      explicit: "Don't lighten the background above #000000 — the
+ *      pure black void is non-negotiable." Cards on Resend do not
+ *      lift via fill; they read by their frost border alone. Setting
+ *      `--surface` to the same void as `--bg` honors that rule and
+ *      forces every card-like component to express elevation through
+ *      `--border` / `--elev-ring`, not through tinted backgrounds.
+ *      `--surface-warm` aliases to `--surface` because the brand has
+ *      no warm tier — there is no second background color anywhere.
+ *
+ *   2. `--border` is `rgba(214, 235, 253, 0.19)` — the literal
+ *      "frost border" alpha named in DESIGN.md §1 as "the signature"
+ *      of the entire system. Binding the slot to the alpha (not a
+ *      solid hex) lets `--elev-ring` (`0 0 0 1px var(--border)`)
+ *      reproduce the icy line by default, and lets every component
+ *      reach the same value via `border: 1px solid var(--border)`.
+ *      `--border-soft` drops to `rgba(217, 237, 254, 0.145)` for
+ *      inner row separators that should not compete with the
+ *      container's outer frost edge.
+ *
+ *   3. `--fg` is `#f0f0f0`, not `#ffffff`. DESIGN.md §2 names this
+ *      the "Near White" — a deliberately softened text tier that
+ *      lets pure white (`#ffffff`) stay reserved for the maximum-
+ *      emphasis moments DESIGN.md describes as "link highlights"
+ *      and the white-pill CTA. The four-level foreground ramp
+ *      (`#f0f0f0 → #a1a4a5 → #5c5c5c → #464a4d`) maps directly onto
+ *      DESIGN.md §2's documented neutral scale (Near White, Silver,
+ *      Mid Gray, Dark Gray) so `--fg-2` and `--meta` are
+ *      independently bound rather than aliased.
+ *
+ *   4. `--accent` is Resend Orange (`#ff801f`, "Orange 10" in
+ *      DESIGN.md §2). Resend's product surface uses a multi-color
+ *      accent system (orange/green/blue/yellow/red), but the shared
+ *      schema slot must pick one — and Orange 10 is the only entry
+ *      DESIGN.md prefixes with "primary orange accent". The blue
+ *      and green variants live as semantic / inline values in
+ *      components.html; promoting any of them to a second accent
+ *      slot would require a C-extension, which the brand contract
+ *      defers until ≥2 brands need the same name. `--accent-on` is
+ *      `#000000` because saturated orange against black reads best
+ *      with black labels (DESIGN.md §4 confirms the white-pill
+ *      pattern is for `#ffffff` solid backgrounds, not for the
+ *      orange accent fill).
+ *
+ *   5. `--accent-hover` brightens toward white (10%) and
+ *      `--accent-active` darkens toward black (12%) — the inverse
+ *      of the schema's default mid-luminance pattern. On Resend's
+ *      void canvas, a "pressed" state reads as a small recession
+ *      into the dark, while a "lifted" hover reads as a luminance
+ *      step up. This matches the Linear / dark-system convention
+ *      and avoids the schema default's all-darken pattern that
+ *      would make the orange disappear into the void on hover.
+ *
+ *   6. Semantic colors come straight from DESIGN.md §2's multi-
+ *      color accent scale — `--success: #11ff99` (Green 4),
+ *      `--warn: #ffc53d` (Yellow 9), `--danger: #ff2047` (Red 5).
+ *      These are the saturated source values; components that want
+ *      the documented "12–42% opacity" tints reach them via
+ *      `color-mix(in oklab, var(--success), transparent 80%)` in
+ *      situ, keeping the alpha-blend decision at the component
+ *      layer rather than in the token slot.
+ *
+ *   7. Type scale is documented in DESIGN.md §3: 96px display,
+ *      56px section, 24px feature title, 20px sub-heading, 18px
+ *      body-large, 16px body, 14px caption, 12px small. The schema
+ *      has 8 slots; `--text-2xl` is bound to `36px` as the
+ *      intermediate that bridges 24px (feature title) to 56px
+ *      (section heading) — DESIGN.md does not enumerate this stop,
+ *      but a 24 → 56 jump without a mid-tier would force every H2
+ *      to either undershoot or overshoot. `--leading-tight: 1.0`
+ *      matches the documented Display Hero rhythm; `--leading-body:
+ *      1.5` matches the documented Body / Body Large / Feature
+ *      Title leading.
+ *
+ *   8. `--tracking-display` is `-0.05em`, derived from DESIGN.md
+ *      §3 Section Heading (`-2.8px at 56px = -0.05em`). ABC Favorit
+ *      compresses harder than Domaine Display (`-0.01em` at 96px),
+ *      so binding the slot to the ABC Favorit characteristic value
+ *      gives every display-tier element the brand's "engineered
+ *      masthead" feel. The hero in components.html can opt back
+ *      into the gentler Domaine tracking inline if needed.
+ *
+ *   9. `--font-display` lists ABC Favorit first, with Inter as the
+ *      structural fallback. Inter is documented in DESIGN.md §3 as
+ *      the body / UI font, but it shares the geometric voice well
+ *      enough to carry display weight when ABC Favorit is not
+ *      loaded — far better than falling through to a generic system
+ *      sans. Domaine Display (the editorial serif hero font) is
+ *      deliberately not in the stack: it is a paid Klim Type
+ *      Foundry face whose absence would surface as a jarring serif
+ *      drop. Heroes that want Domaine layer it in via
+ *      `font-family: "Domaine Display", var(--font-display)` at the
+ *      component level.
+ *
+ *  10. Section rhythm is generous: 120px desktop, 80px tablet, 48px
+ *      phone. DESIGN.md §5 names "Cinematic black space" with "80–
+ *      120px+ vertical spacing between sections" as a defining
+ *      property — "the black background IS the whitespace". 120px
+ *      desktop sits at the top of that documented range.
+ *
+ *  11. `--radius-sm` is `4px` (DESIGN.md "Sharp": buttons-ghost,
+ *      inputs); `--radius-md` is `8px` (tabs / content blocks);
+ *      `--radius-lg` is `16px` (feature cards / images / main
+ *      buttons); `--radius-pill` is `9999px` (primary CTAs / tags
+ *      / badges). The 24px "Section" radius from DESIGN.md is
+ *      component-specific (large panels) and reached inline rather
+ *      than via the shared schema.
+ *
+ *  12. `--elev-raised` layers the documented `rgba(176, 199, 217,
+ *      0.145) 0 0 0 1px` ring shadow with the subtle drop from
+ *      DESIGN.md §6 Level 2. On pure black, opaque blur shadows
+ *      vanish — the ring carries the edge, and the soft drop adds
+ *      just enough atmospheric tint to read as "lifted" against
+ *      the void. Never strip the ring when overriding this token.
+ *
+ *  13. `--focus-ring` is a sharp 2px ring at `var(--accent)`, not
+ *      the schema's 3px alpha glow. DESIGN.md §6 Level 3 documents
+ *      a heavy 8px black focus ring that works in product context
+ *      (against non-black surroundings); on this brand fixture the
+ *      black canvas would swallow that ring, so we substitute the
+ *      orange accent at 2px — sharp, engineered, legible against
+ *      both the void and any card surface.
+ *
+ *  14. `--container-max` caps at `1200px` with generous 32px
+ *      desktop gutters — Resend's marketing pages center contained
+ *      content in vast dark space, treating the gutter as part of
+ *      the gallery margin rather than as edge-bleed.
+ *
+ * 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. ABC Favorit, Domaine
+ * Display, and Commit Mono are paid faces — the stacks list
+ * defensible OS fallbacks so artifacts render legibly even when
+ * the brand faces are not loaded.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
+   * The void is the canvas. DESIGN.md §7: "Don't lighten the
+   * background above #000000 — the pure black void is non-
+   * negotiable." `--surface` matches `--bg` because cards on Resend
+   * read by their frost border alone, not by a tinted fill.
+   * `--surface-warm` aliases to surface — the brand has no second
+   * background color anywhere. */
+  --bg: #000000;
+  --surface: #000000;
+  --surface-warm: var(--surface);          /* alias — Resend has no warm tier */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * Near White → Silver → Mid Gray → Dark Gray, the documented
+   * neutral scale from DESIGN.md §2. `#f0f0f0` instead of `#ffffff`
+   * matters — pure white is reserved for the white-pill CTA and link
+   * highlights; the softened near-white keeps body type calm against
+   * the void. All four tiers are independently bound (not aliased)
+   * because DESIGN.md names four distinct neutral roles: primary
+   * text, secondary / link-muted, hover / caption, tertiary /
+   * quaternary timestamp. */
+  --fg: #f0f0f0;                           /* Near White — primary text, button labels */
+  --fg-2: #a1a4a5;                         /* Silver — secondary text, muted links */
+  --muted: #5c5c5c;                        /* Mid Gray — captions, hover, subtle emphasis */
+  --meta: #464a4d;                         /* Dark Gray — tertiary text, timestamps */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Frost-as-border is THE signature: `rgba(214, 235, 253, 0.19)`
+   * at 1px replaces every gray border in the system. Binding
+   * `--border` to the alpha (not a solid hex) lets `--elev-ring`
+   * reproduce the icy line by default, and lets
+   * `border: 1px solid var(--border)` paint the same value when a
+   * real CSS border is structurally required (e.g. the bottom edge
+   * of the sticky nav per DESIGN.md §4). `--border-soft` drops to
+   * `0.145` alpha for inner row separators that must not compete
+   * with the container's outer frost edge. */
+  --border: rgba(214, 235, 253, 0.19);     /* signature frost border alpha */
+  --border-soft: rgba(217, 237, 254, 0.145); /* inner row separator — lighter frost */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * Resend Orange (Orange 10 from DESIGN.md §2). Hard cap of ≤2
+   * visible uses per screen — DESIGN.md §7 forbids cross-mixing
+   * accent colors within a single component. The multi-color
+   * scale (green/blue/yellow/red) lives at the semantic / inline
+   * layer; only the orange slot rides on `--accent`.
+   *
+   * `--accent-on` is BLACK, not white — saturated #ff801f against
+   * black reads cleanest with black labels (the white-pill CTA in
+   * DESIGN.md §4 uses #ffffff fill with #000000 text, not the
+   * orange accent). Hover brightens 10% toward white, active
+   * darkens 12% toward black — the inverse of the schema's all-
+   * darken default, matching the dark-theme convention where
+   * "pressed" reads as recession into the void. */
+  --accent: #ff801f;                       /* Resend Orange — primary chromatic accent */
+  --accent-on: #000000;                    /* black label on saturated orange fill */
+  --accent-hover: color-mix(in oklab, var(--accent), white 10%);
+  --accent-active: color-mix(in oklab, var(--accent), black 12%);
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * Saturated source values from DESIGN.md §2's multi-color accent
+   * scale. Components reach the documented 12–42% opacity tints
+   * via `color-mix(in oklab, var(--success), transparent 80%)` in
+   * situ, keeping the alpha-blend decision at the component layer. */
+  --success: #11ff99;                      /* Green 4 — emerald success indicator */
+  --warn: #ffc53d;                         /* Yellow 9 — warm gold warning */
+  --danger: #ff2047;                       /* Red 5 — error / destructive */
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Three-font editorial hierarchy from DESIGN.md §3. ABC Favorit
+   * carries display; Inter carries body and UI; Commit Mono
+   * carries code and technical labels. Domaine Display (the
+   * editorial serif hero face) is intentionally not in the
+   * `--font-display` stack — it is a paid Klim Type Foundry face
+   * whose absence would surface as a jarring serif drop. Heroes
+   * that want Domaine layer it in via `font-family: "Domaine
+   * Display", var(--font-display)` at the component level. */
+  --font-display: "ABC Favorit", "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
+   * 12 / 14 / 16 / 18 / 20 / 24 / 56 / 96 are all documented; the
+   * 36px `--text-2xl` is the synthesized intermediate that bridges
+   * 24px feature-title to 56px section-heading. Without it, every
+   * H2 would have to undershoot at 24 or overshoot at 56 and the
+   * type rhythm would jump. */
+  --text-xs: 12px;                         /* Small — tags, meta, fine print */
+  --text-sm: 14px;                         /* Caption, button, nav link */
+  --text-base: 16px;                       /* Body — standard reading */
+  --text-lg: 20px;                         /* Sub-heading — ABC Favorit */
+  --text-xl: 24px;                         /* Feature Title — Inter weight 500 */
+  --text-2xl: 36px;                        /* Synthesized H2 — bridges 24 → 56 */
+  --text-3xl: 56px;                        /* Section Heading — ABC Favorit */
+  --text-4xl: 96px;                        /* Display Hero — Domaine / ABC Favorit */
+
+  /* Leading + tracking.
+   * --leading-body 1.5: DESIGN.md body / feature-title / body-large.
+   * --leading-tight 1.0: DESIGN.md Display Hero (96px).
+   * --tracking-display -0.05em: ABC Favorit Section Heading
+   *   (-2.8px / 56px). Harder compression than Domaine's -0.01em;
+   *   binding the slot to the ABC Favorit value gives display tiers
+   *   the brand's "engineered masthead" feel. */
+  --leading-body: 1.5;
+  --leading-tight: 1.0;
+  --tracking-display: -0.05em;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * Standard 4px-grid base scale. DESIGN.md §5 also documents 5px,
+   * 6px, 7px, 10px, 30px, 40px micro-tiers — those are too fine to
+   * belong in the shared schema and are inlined per-component when
+   * needed (button padding `5px 12px`, etc.). 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: "Cinematic black space" with
+   * 80–120px+ vertical padding between sections. 120px desktop sits
+   * at the top of the documented range, dropping to 80px tablet
+   * (still generous) and 48px phone (the documented mobile floor). */
+  --section-y-desktop: 120px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * DESIGN.md §5 radius scale: 4 / 6 / 8 / 10 / 12 / 16 / 24 / 9999.
+   * We bind the four schema tiers to: 4 (sharp — ghost button,
+   * inputs), 8 (standard — tabs, content), 16 (large — feature
+   * cards, images, main buttons), 9999 (pill — primary CTAs, tags,
+   * badges). The 24px "Section" radius is component-specific (large
+   * panels) and reached inline. */
+  --radius-sm: 4px;                        /* Sharp — ghost button, input */
+  --radius-md: 8px;                        /* Standard — tab, content block */
+  --radius-lg: 16px;                       /* Large — feature card, image, main button */
+  --radius-pill: 9999px;                   /* Pill — primary CTA, tag, badge */
+
+  /* ─── Elevation (3 levels) ───────────────────────────────────────
+   * Resend barely uses shadows — DESIGN.md §6: "On a pure black
+   * background, traditional shadows are invisible — you can't cast
+   * a shadow into the void. Instead, Resend creates depth through
+   * its signature frost borders."
+   *
+   *   --elev-flat    no shadow (page background, text blocks)
+   *   --elev-ring    the signature frost hairline (most surfaces)
+   *   --elev-raised  ring + subtle drop for true "lifted" feel
+   *
+   * `--elev-raised` layers the documented `rgba(176, 199, 217, 0.145)
+   * 0 0 0 1px` ring with the §6 Level 2 subtle drop. Never strip
+   * the ring when overriding — it is the edge mechanism that lets
+   * a card read against the void at all. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    0 0 0 1px rgba(176, 199, 217, 0.145),
+    0 1px 3px rgba(0, 0, 0, 0.4),
+    0 1px 2px -1px rgba(0, 0, 0, 0.4);
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * Sharp 2px ring at `var(--accent)`, NOT the schema's 3px alpha
+   * glow. DESIGN.md §6 documents an 8px black ring that works in
+   * product context (against non-black surroundings); on this
+   * brand fixture the black canvas would swallow that ring, so we
+   * substitute the orange accent at 2px — sharp, engineered,
+   * legible against both the void and any card surface. */
+  --focus-ring: 0 0 0 2px var(--accent);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * Two durations + one easing curve. Resend's micro-states are
+   * quick and unobtrusive — pill buttons crossfade to white glass,
+   * frost borders intensify on focus, no choreographed entrances. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1200px max content width — DESIGN.md §5 "Centered content with
+   * generous max-width". Gutters stay wide on desktop (32px) so
+   * the gallery margin around the void canvas reads as intentional
+   * framing; mobile narrows to 16px to preserve readable measure. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 32px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Retro
+
+> Category: Retro & Nostalgic
+> Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
+
+## 1. Visual Theme & Atmosphere
+
+Throwback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.
+
+- **Visual style:** high-contrast, 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:** `#3B82F6` — 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 (#3B82F6) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Macondo, display=Macondo, mono=JetBrains 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 `#3B82F6`; 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 (#3B82F6) 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/retro/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>Retro - reference components</title>
+    <meta name="description" content="Reference fixture for design-systems/retro: retro interface with warm colors, chunky controls, and nostalgic product cards." />
+    <style>
+      :root {
+        --bg: #fff4cf;
+        --surface: #fffaf0;
+        --surface-warm: #ffdca8;
+        --fg: #2a1810;
+        --fg-2: #593625;
+        --muted: #8a6652;
+        --meta: #d24b1f;
+        --border: #d9aa7a;
+        --border-soft: #efd0ab;
+        --accent: #d24b1f;
+        --accent-on: #ffffff;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+        --success: #3d8f4f;
+        --warn: #f2a93b;
+        --danger: #b83a2f;
+        --font-display: "Courier New", ui-monospace, monospace;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: "Courier New", ui-monospace, 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;
+        --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: 4px;
+        --radius-md: 8px;
+        --radius-lg: 12px;
+        --radius-pill: 9999px;
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26);
+        --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28);
+        --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, #fff4cf 0%, #ffdca8 58%, #fffaf0 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">Retro design system</p>
+            <h1>Retro computing dashboard</h1>
+            <p class="lead">Vintage color, chunky geometry, and nostalgic controls for playful products.</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="Retro 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>retro interface with warm colors, chunky controls, and nostalgic product cards.</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="retro-input">Reference input</label><input id="retro-input" value="Retro 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/retro/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/retro/tokens.css
+ * Structured token bindings for Retro.
+ * retro interface with warm colors, chunky controls, and nostalgic product cards.
+ */
+
+:root {
+  --bg: #fff4cf;
+  --surface: #fffaf0;
+  --surface-warm: #ffdca8;
+  --fg: #2a1810;
+  --fg-2: #593625;
+  --muted: #8a6652;
+  --meta: #d24b1f;
+  --border: #d9aa7a;
+  --border-soft: #efd0ab;
+  --accent: #d24b1f;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #3d8f4f;
+  --warn: #f2a93b;
+  --danger: #b83a2f;
+  --font-display: "Courier New", ui-monospace, monospace;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "Courier New", ui-monospace, 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;
+  --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: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 6px 6px 0 rgba(42, 24, 16, 0.26);
+  --focus-ring: 0 0 0 4px rgba(210, 75, 31, 0.28);
+  --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;
+}