@aexol/spectral 0.7.0 → 0.7.1

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

@@ -0,0 +1,272 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/posthog/tokens.css
+ *
+ * Structured token bindings for the PostHog design system — the
+ * open-source product analytics brand whose marketing surface reads
+ * like a startup's internal wiki that escaped into the wild. Warm
+ * sage-cream surfaces, olive-tinted text, IBM Plex Sans at bold
+ * weights for headings, and a single PostHog Orange (#F54E00) that
+ * lives almost entirely on hover — a hidden brand signature that
+ * surprises on interaction rather than shouting at rest.
+ *
+ * This file pre-compiles the values described in `DESIGN.md` into the
+ * shared schema. Agents should paste the `:root { … }` block verbatim
+ * into the first `<style>` of any artifact, then resolve every value
+ * via `var(--*)` from that point on.
+ *
+ * Schema notes (brand-specific bindings worth flagging — section
+ * references point into `DESIGN.md`):
+ *
+ *   #Bind 1  — --bg is Warm Parchment (#fdfdf8), never pure white.
+ *              DESIGN.md §7 forbids #ffffff outright; the warm
+ *              yellow-green undertone is foundational and the
+ *              "don't use pure white" rule is in the Don'ts list.
+ *              --surface steps once to Sage Cream (#eeefe9) for
+ *              input fields and secondary containers, then
+ *              --surface-warm steps once more to Light Sage
+ *              (#e5e7e0) for button surfaces and tertiary tiers
+ *              (§2 Surface & Background).
+ *
+ *   #Bind 2  — --fg ramp is olive, not neutral gray. Olive Ink
+ *              (#4d4f46) carries body text; Deep Olive (#23251d)
+ *              steps darker for headings and high-emphasis links;
+ *              Muted Olive (#65675e) is the standard subtext tier;
+ *              Sage Placeholder (#9ea096) is the disabled / meta
+ *              tier. DESIGN.md §7 mandates the olive family — pure
+ *              black or neutral gray reads as the wrong brand.
+ *
+ *   #Bind 3  — --accent is PostHog Orange (#F54E00) — a hidden
+ *              signature. DESIGN.md §1 describes it as "a vibrant
+ *              orange that surprises on hover" — the marketing
+ *              surface uses it almost exclusively as TEXT color on
+ *              hover, not as a CTA fill. The token still binds the
+ *              brand color so components can opt into orange fills
+ *              when truly appropriate; primary CTAs render dark
+ *              (--fg-2) per §4 Buttons. Accent-on/hover/active use
+ *              the schema's color-mix defaults — DESIGN.md does not
+ *              publish orange pressed-state hex values.
+ *
+ *   #Bind 4  — --warn binds to Amber Gold (#F7A501) — DESIGN.md §2
+ *              names this as the dark-button hover accent and the
+ *              warmth-signal sibling to PostHog Orange. Mapping it
+ *              to the warn slot keeps the gold reachable to
+ *              components without inventing a brand-specific token.
+ *              --success and --danger stay on schema defaults since
+ *              DESIGN.md publishes no greens or reds.
+ *
+ *   #Bind 5  — Radius scale stays deliberately tight per DESIGN.md
+ *              §5 / §7 — 4px is the workhorse for buttons and
+ *              inputs, 6px for cards (DESIGN.md §4 Cards), 8px
+ *              caps the lg tier. The Don'ts list explicitly
+ *              forbids 12px+ on cards; the system reads as
+ *              functional-scrappy, never plush. Pill stays 9999px
+ *              for badges and status dots.
+ *
+ *   #Bind 6  — --elev-raised is THE single sanctioned shadow per
+ *              DESIGN.md §6 ("only one shadow definition exists in
+ *              the entire system"). Reserved for floating elements
+ *              — modals, dropdowns, mega-menus. Every other depth
+ *              cue comes from sage borders and surface-color
+ *              shifts. Cards must not reach for this shadow.
+ *
+ *   #Bind 7  — --focus-ring is Focus Blue (#3b82f6) at 50% opacity,
+ *              the one cool color in the system. DESIGN.md §2 and
+ *              §4 mandate this Tailwind-derived ring as an
+ *              accessibility-only color; reserving it to focus
+ *              keeps the warm sage/olive identity uncompromised
+ *              while still passing keyboard-navigation contrast.
+ *
+ *   #Bind 8  — Type scale tops out modestly. DESIGN.md §3 publishes
+ *              30px as the display hero ceiling (--text-2xl) and
+ *              36px as the section heading (--text-3xl); --text-4xl
+ *              extrapolates to 44px for fixture-scale hero copy.
+ *              Tracking compresses on display sizes (-0.025em
+ *              normalizes -0.75px at 30px) and relaxes to 0 on
+ *              body. Leading is generous everywhere — 1.50 body,
+ *              1.20 tight — because the marketing surface is
+ *              content-heavy and optimized for long reading
+ *              sessions (§3 Principles).
+ *
+ *   #Bind 9  — --container-max is 1280px per DESIGN.md §5 ("content
+ *              containers likely 1200px–1280px"). Gutters tighten
+ *              progressively: 24/16/12 desktop/tablet/phone — tight
+ *              but not cramped, matching PostHog's content-dense
+ *              editorial pacing.
+ *
+ * Brand-specific extensions: none in this revision. The Warm Tan
+ * (#d4c9b8) featured-button background and Hover White (#f4f4f4)
+ * universal hover state stay inline at the components that need
+ * them; neither earns a shared slot.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels) ────────────────────────────────────────
+   * Warm Parchment is the page; Sage Cream is the secondary
+   * container (input backgrounds, hover/feature sections); Light
+   * Sage is the tertiary tier for button surfaces and quiet card
+   * fills. Three steps create depth WITHOUT shadows — DESIGN.md §6
+   * notes that "moving from #fdfdf8 to #eeefe9 to #e5e7e0 creates
+   * layered depth without shadows", and the whole brand depends on
+   * that surface-color rhythm rather than blur. */
+  --bg: #fdfdf8;
+  --surface: #eeefe9;
+  --surface-warm: #e5e7e0;
+
+  /* ─── Foreground ramp (4 levels) ────────────────────────────────
+   * Olive Ink anchors roughly every body paragraph, every nav
+   * label, every button text token on light surfaces. Deep Olive
+   * steps darker for headings and high-emphasis links — the
+   * near-black with green undertone that signals "click me". Muted
+   * Olive is the secondary subtext tier. Sage Placeholder is the
+   * disabled / meta tier and pulls double duty as input
+   * placeholder color. */
+  --fg: #4d4f46;
+  --fg-2: #23251d;
+  --muted: #65675e;
+  --meta: #9ea096;
+
+  /* ─── Border (2 levels) ─────────────────────────────────────────
+   * Sage Border (#bfc1b7) is the workhorse — every card edge,
+   * every input outline, every divider rule. The soft tier is a
+   * lighter sage tint used for inner row separators that should
+   * not visually compete with the primary card edge; derived as a
+   * 50% mix back toward --bg so it stays in the same warm-green
+   * family without inventing a new hex. */
+  --border: #bfc1b7;
+  --border-soft: color-mix(in oklab, var(--border), var(--bg) 50%);
+
+  /* ─── Accent ────────────────────────────────────────────────────
+   * PostHog Orange — the single signature color. Per DESIGN.md §1
+   * it lives almost exclusively on hover as text color, not as a
+   * CTA fill, but the token still binds the brand color so any
+   * component opting into orange surfaces can do so consistently.
+   * Primary CTAs render dark (#1e1f23 ≈ --fg-2 territory) with
+   * opacity-based hover states; that treatment lives inline at
+   * the button component, not as a shared accent. */
+  --accent: #F54E00;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ──────────────────────────────────────────────────
+   * --warn binds to Amber Gold (DESIGN.md §2's "warmth signal")
+   * because the brand publishes that exact value as the secondary
+   * hover accent. --success and --danger stay on schema defaults
+   * — DESIGN.md does not specify brand greens or reds and the
+   * marketing surface almost never renders status. Keep semantic
+   * pixels well under 5% of any page. */
+  --success: #16a34a;
+  --warn: #F7A501;
+  --danger: #dc2626;
+
+  /* ─── Typography — fonts ────────────────────────────────────────
+   * IBM Plex Sans Variable is the single voice — display and body
+   * share the family (DESIGN.md §3). The fallback chain matches
+   * the brand's documented order: IBM Plex Sans static, then the
+   * platform fallbacks, then the broad sans-serif catch-all. Mono
+   * is Source Code Pro with the standard system fallbacks per
+   * DESIGN.md §3 Font Family. */
+  --font-display: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
+  --font-body: "IBM Plex Sans Variable", "IBM Plex Sans", -apple-system, system-ui, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, Arial, sans-serif;
+  --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* ─── Typography — type scale (px) ──────────────────────────────
+   * Derived from DESIGN.md §3 Hierarchy table. The scale tops out
+   * modestly — 30px for the display hero, 36px for section
+   * headings — because PostHog's editorial pacing favors confident
+   * mid-weight headings over giant ones. --text-4xl extrapolates
+   * to 44px for fixture-scale hero copy; the production site
+   * rarely goes that big. */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 30px;
+  --text-3xl: 36px;
+  --text-4xl: 44px;
+
+  /* ─── Typography — leading & tracking ───────────────────────────
+   * Body leads 1.50 (DESIGN.md §3 — body sizes 1.50–1.71 for the
+   * content-heavy editorial layout); display compresses to 1.20
+   * for the 30px hero per the same table. Tracking compresses
+   * negatively on display sizes (-0.025em normalizes the brand's
+   * -0.75px at 30px) and relaxes to 0 on body. */
+  --leading-body: 1.5;
+  --leading-tight: 1.2;
+  --tracking-display: -0.025em;
+
+  /* ─── Spacing — base scale ──────────────────────────────────────
+   * 8px base unit per DESIGN.md §5. PostHog's published scale
+   * includes off-grid values (2, 6, 10, 18, 34) for fine-grained
+   * icon and padding adjustments; the shared scale stays on the
+   * standard 4px grid — off-grid spacing belongs inline at the
+   * component level, not in shared tokens. */
+  --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 ────────────────────────────────────────────
+   * Section padding 32–48px desktop per DESIGN.md §5 ("compact for
+   * a content-heavy site"). We bind the upper bound on desktop so
+   * the rhythm reads as deliberate spacing rather than crowding;
+   * tablet and phone step down to keep small screens tight. */
+  --section-y-desktop: 48px;
+  --section-y-tablet: 32px;
+  --section-y-phone: 24px;
+
+  /* ─── Radius ────────────────────────────────────────────────────
+   * Deliberately tight — DESIGN.md §7's Don'ts forbid 12px+ on
+   * cards. 4px is the workhorse (buttons, inputs, dropdowns,
+   * menus); 6px is the card tier (§4 Cards "4px–6px radius");
+   * 8px caps the lg tier for slightly larger containers; pill
+   * stays 9999px for badges and status dots. */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ─────────────────────────────────────────────────
+   * THE single sanctioned shadow per DESIGN.md §6 — "only one
+   * shadow definition exists in the entire system". Reserved for
+   * floating elements (modals, dropdowns, mega-menus, popovers).
+   * Every other depth cue comes from sage borders and surface
+   * color shifts. Cards must NOT reach for this shadow — DESIGN.md
+   * §7 specifically forbids adding heavy shadows beyond this one. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* ─── Focus ring ────────────────────────────────────────────────
+   * Focus Blue (#3b82f6) at 50% opacity — the lone cool color in
+   * the system, reserved for accessibility per DESIGN.md §2 / §4.
+   * Implementing as a 3px box-shadow keeps focus indication
+   * outside the layout box; the warm sage/olive identity stays
+   * uncompromised at rest. */
+  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
+
+  /* ─── Motion ────────────────────────────────────────────────────
+   * Default schema timings. DESIGN.md does not publish transition
+   * specs (static extraction scope); we bind defaults consistent
+   * with the brand's tactile feel — 150ms for micro-states (the
+   * famous opacity flash on dark buttons) and 200ms for general
+   * state changes. Standard easing curve, no overshoot. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ────────────────────────────────────────────────────
+   * Container caps at 1280px per DESIGN.md §5 ("content containers
+   * likely 1200px–1280px"). Gutters tighten progressively: 24px
+   * desktop, 16px tablet, 12px phone — tight but not cramped,
+   * matching PostHog's content-dense editorial pacing. */
+  --container-max: 1280px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Premium
+
+> Category: Professional & Corporate
+> Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.
+
+## 1. Visual Theme & Atmosphere
+
+Apple-inspired premium aesthetic with precise spacing, modern typography, and a refined, polished visual language.
+
+- **Visual style:** modern
+- **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:** 12/14/16/18/24/30/36
+- **Families:** primary=Inter, display=Inter, 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/premium/components.html

@@ -0,0 +1,154 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Premium - reference components</title>
+    <meta name="description" content="Reference fixture for design-systems/premium: premium marketing system with warm white canvas, graphite type, and muted bronze signal." />
+    <style>
+      :root {
+        --bg: #faf8f4;
+        --surface: #ffffff;
+        --surface-warm: #f0e7d8;
+        --fg: #1c1b19;
+        --fg-2: #4b4740;
+        --muted: #746d63;
+        --meta: #a06a3b;
+        --border: #ded6c9;
+        --border-soft: #eee7dc;
+        --accent: #a06a3b;
+        --accent-on: #ffffff;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+        --success: #3f8f5f;
+        --warn: #c4872c;
+        --danger: #b84a4a;
+        --font-display: "Canela", Georgia, serif;
+        --font-body: Inter, system-ui, sans-serif;
+        --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+        --text-xs: 12px;
+        --text-sm: 14px;
+        --text-base: 16px;
+        --text-lg: 19px;
+        --text-xl: 26px;
+        --text-2xl: 40px;
+        --text-3xl: 60px;
+        --text-4xl: 84px;
+        --leading-body: 1.58;
+        --leading-tight: 1.02;
+        --tracking-display: -0.02em;
+        --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: 112px;
+        --section-y-tablet: 80px;
+        --section-y-phone: 56px;
+        --radius-sm: 10px;
+        --radius-md: 16px;
+        --radius-lg: 28px;
+        --radius-pill: 9999px;
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 0 24px 64px rgba(28, 27, 25, 0.12);
+        --focus-ring: 0 0 0 4px rgba(160, 106, 59, 0.24);
+        --motion-fast: 170ms;
+        --motion-base: 280ms;
+        --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+        --container-max: 1160px;
+        --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, #faf8f4 0%, #ffffff 56%, #f0e7d8 100%); }
+      .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter-desktop); }
+      section { padding-block: var(--section-y-desktop); }
+      @media (max-width: 1023px) { .container { padding-inline: var(--container-gutter-tablet); } section { padding-block: var(--section-y-tablet); } }
+      @media (max-width: 639px) { .container { padding-inline: var(--container-gutter-phone); } section { padding-block: var(--section-y-phone); } }
+      h1, h2, h3, p { margin: 0; }
+      h1, h2, h3 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
+      h1 { max-width: 820px; font-size: var(--text-4xl); font-weight: 760; }
+      h2 { font-size: var(--text-3xl); font-weight: 700; }
+      h3 { font-size: var(--text-xl); font-weight: 700; }
+      .eyebrow { color: var(--meta); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
+      .lead { max-width: 640px; color: var(--fg-2); font-size: var(--text-lg); }
+      .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: var(--space-8); align-items: center; }
+      .stack > * + * { margin-block-start: var(--space-4); }
+      .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-6); }
+      .btn {
+        display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--space-5);
+        border: 1px solid transparent; border-radius: var(--radius-md); font: 700 var(--text-sm) / 1 var(--font-body);
+        color: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn-primary { background: var(--accent); color: var(--accent-on); }
+      .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
+      .btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border); box-shadow: var(--elev-ring); }
+      .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
+      .panel { background: color-mix(in oklab, var(--surface), transparent 4%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--elev-raised); overflow: hidden; }
+      .panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--border-soft); }
+      .status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--meta); font: 700 var(--text-xs) / 1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
+      .status::before { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--success); content: ""; }
+      .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border-soft); }
+      .metric { padding: var(--space-5); border-right: 1px solid var(--border-soft); }
+      .metric:last-child { border-right: 0; }
+      .metric strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--leading-tight); }
+      .metric span { color: var(--muted); font-size: var(--text-sm); }
+      .card-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-5); }
+      .mini-card { min-height: 148px; padding: var(--space-5); border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-warm); }
+      .mini-card p, .tile p { color: var(--muted); font-size: var(--text-sm); margin-block-start: var(--space-3); }
+      .swatches { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
+      .swatch { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
+      .swatch.accent { background: var(--accent); } .swatch.surface { background: var(--surface); } .swatch.warm { background: var(--surface-warm); } .swatch.fg { background: var(--fg); }
+      .field { display: grid; gap: var(--space-2); margin-block-start: var(--space-5); }
+      label { color: var(--fg-2); font-size: var(--text-sm); font-weight: 700; }
+      input { width: 100%; min-height: 46px; padding: 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; }
+      input:focus { outline: none; box-shadow: var(--focus-ring); border-color: var(--accent); }
+      .lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
+      .tile { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
+      @media (max-width: 860px) { .hero, .lower { grid-template-columns: 1fr; } .metric-grid, .card-row { grid-template-columns: 1fr; } .metric { border-right: 0; border-bottom: 1px solid var(--border-soft); } .metric:last-child { border-bottom: 0; } }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <section>
+        <div class="container hero">
+          <div class="stack">
+            <p class="eyebrow">Premium design system</p>
+            <h1>Premium product showcase</h1>
+            <p class="lead">Elegant commerce and product presentation with soft contrast and confident spacing.</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="Premium 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>premium marketing system with warm white canvas, graphite type, and muted bronze signal.</p><div class="swatches" aria-label="Token swatches"><span class="swatch accent"></span><span class="swatch surface"></span><span class="swatch warm"></span><span class="swatch fg"></span></div></div>
+              <div class="mini-card"><h3>Control</h3><p>Focus, hover, and status states share the same brand signal.</p><div class="field"><label for="premium-input">Reference input</label><input id="premium-input" value="Premium system token" /></div></div>
+            </div>
+          </article>
+        </div>
+      </section>
+      <section><div class="container lower"><article class="tile"><p class="eyebrow">Typography</p><h2>Display rhythm</h2><p>Headlines use the display stack with the declared scale and leading.</p></article><article class="tile"><p class="eyebrow">Surface</p><h2>Layer system</h2><p>Cards, warm panels, borders, and raised states resolve through shared tokens.</p></article><article class="tile"><p class="eyebrow">Interaction</p><h2>Motion states</h2><p>Buttons, inputs, and panels use brand-specific focus rings and easing.</p></article></div></section>
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,63 @@
+/* design-systems/premium/tokens.css
+ * Structured token bindings for Premium.
+ * premium marketing system with warm white canvas, graphite type, and muted bronze signal.
+ */
+
+:root {
+  --bg: #faf8f4;
+  --surface: #ffffff;
+  --surface-warm: #f0e7d8;
+  --fg: #1c1b19;
+  --fg-2: #4b4740;
+  --muted: #746d63;
+  --meta: #a06a3b;
+  --border: #ded6c9;
+  --border-soft: #eee7dc;
+  --accent: #a06a3b;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #3f8f5f;
+  --warn: #c4872c;
+  --danger: #b84a4a;
+  --font-display: "Canela", Georgia, serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 19px;
+  --text-xl: 26px;
+  --text-2xl: 40px;
+  --text-3xl: 60px;
+  --text-4xl: 84px;
+  --leading-body: 1.58;
+  --leading-tight: 1.02;
+  --tracking-display: -0.02em;
+  --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: 112px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 56px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 28px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 24px 64px rgba(28, 27, 25, 0.12);
+  --focus-ring: 0 0 0 4px rgba(160, 106, 59, 0.24);
+  --motion-fast: 170ms;
+  --motion-base: 280ms;
+  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+  --container-max: 1160px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Professional
+
+> Category: Professional & Corporate
+> Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.
+
+## 1. Visual Theme & Atmosphere
+
+Polished, business-ready design with modern typography, structured layouts, and a trustworthy visual identity.
+
+- **Visual style:** modern
+- **Color stance:** primary, secondary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#FECE14` — Token from style foundations.
+- **Secondary:** `#000000` — 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 (#FECE14) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** mobile-first compact scale
+- **Families:** primary=Poppins, display=Poppins, mono=IBM Plex 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 `#FECE14`; 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 (#FECE14) 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.