@aexol/spectral 0.9.270 → 0.9.272

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

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

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

@@ -1,154 +0,0 @@
-<!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

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

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