@aexol/spectral 0.9.270 → 0.9.272

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

@@ -1,286 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────
- * design-systems/apple/tokens.css
- *
- * Structured token bindings for the Apple-inspired design system —
- * a precision editorial language built around white-space discipline,
- * SF Pro typography, and a single restrained blue accent. This file
- * is the *machine-readable* form of the values described in
- * `DESIGN.md`. Agents are expected to paste the `:root { … }` block
- * verbatim into the first `<style>` of every artifact they generate
- * against this design system, then reference everything via
- * var(--name) from then on.
- *
- * Why this file exists:
- *   DESIGN.md tells humans that Apple uses "Pale Apple Gray (#f5f5f7)
- *   as the main light surface" and "Apple Action Blue (#0071e3) as the
- *   primary accent", but agents have to translate those prose names
- *   into the standard token names the lint enforces (`--surface`,
- *   `--accent`). That translation step is where token misuse happens.
- *   This file pre-translates the brand once, so agents copy structure
- *   instead of inventing it.
- *
- * Brand-specific schema decisions (non-obvious bindings worth flagging
- * for reviewers and downstream brand authors):
- *   1. We bind --surface-warm to a real intermediate tier (#fbfbfd),
- *      NOT an alias of --surface. Apple's surface ladder genuinely has
- *      three light stops — pure white retail canvas, near-white
- *      brightness-shifted bands, and pale Apple gray feature fields —
- *      so collapsing surface-warm would erase a real brand feature.
- *   2. We bind --fg-2, --meta, and --border-soft to independent values
- *      rather than aliases. Apple's neutral text ramp is famously
- *      four-stop (Near-Black Ink → Utility Dark Gray → Secondary
- *      Neutral Gray → Mid Border Gray) and the schema's B-slots map
- *      onto it cleanly.
- *   3. --radius-pill is bound to 980px, not 9999px. Apple's signature
- *      capsule CTA literally uses 980px in published CSS, and the
- *      number is itself a brand-recognisable detail; we keep it.
- *   4. --accent-hover lifts (#0077ed) instead of darkening. Apple's
- *      live blue buttons brighten slightly on hover rather than mix
- *      toward black; the schema's default formula would fight that.
- *      --accent-active darkens to #0066cc — the documented Body Link
- *      Blue — so the active state aligns with Apple's read-link tone.
- *   5. --tracking-display is -0.015em. The DESIGN.md hierarchy lists
- *      -1.2px on 80px hero (-0.015em); tighter than that breaks at
- *      smaller display sizes, looser loses Apple's machined feel.
- *   6. --section-y-desktop is 100px. Apple's billboard chapters lean
- *      noticeably more generous than the schema default of 80px — the
- *      breathing room is what lets product imagery do the talking.
- *   7. --ease-standard is cubic-bezier(0.28, 0, 0.22, 1), an Apple-
- *      flavoured smooth-out instead of the schema default. Apple
- *      transitions decelerate hard then settle, never bounce.
- *
- * Contract sources:
- *   - Standard token names: design-systems/_schema/tokens.schema.ts
- *       (TOKEN_SCHEMA — every name below appears there or as an
- *        explicit B-slot alias.)
- *   - A2 fallback values: design-systems/_schema/defaults.css
- *       (We override --motion-base, --ease-standard, --elev-raised,
- *        --focus-ring, --radius-pill; the rest match defaults.)
- *   - Lint enforcement: apps/daemon/src/lint-artifact.ts
- *       (raw-hex >12 outside :root → P1; non-token accent → P0)
- *
- * Keep this file additive: never invent token names not also documented
- * in DESIGN.md or the shared schema. New Apple-derived sub-brands
- * cloning this template should overwrite values, not rename keys.
- * ─────────────────────────────────────────────────────────────────── */
-
-:root {
-  /* ─── Surface (3 levels) ──────────────────────────────────────────
-   * Apple's binary section rhythm alternates pure white retail/hero
-   * canvases with pale Apple gray feature fields. We bind --bg to
-   * the white canvas (the most common default Apple page background)
-   * and --surface to the pale gray that cards and feature bands lift
-   * onto. --surface-warm is bound to a real third tier (#fbfbfd) —
-   * the near-white brightness shift that appears between hero and
-   * pale-gray bands on apple.com. Collapsing it to var(--surface)
-   * would erase a real brand feature, so we keep it independent. */
-  --bg: #ffffff;
-  --surface: #f5f5f7;
-  --surface-warm: #fbfbfd;
-
-  /* ─── Foreground ramp (4 levels) ─────────────────────────────────
-   * Apple's text neutrals are explicitly named in DESIGN.md §2:
-   * Near-Black Ink (primary), Utility Dark Gray (secondary text /
-   * dark-neutral surfaces in store contexts), Secondary Neutral Gray
-   * (helper copy / tertiary metadata), Mid Border Gray (the strongest
-   * neutral, used for stronger field outlines and the most-restrained
-   * caption tier). We bind all four — Apple genuinely walks the full
-   * ramp, so collapsing --fg-2 or --meta to siblings would flatten
-   * the brand.
-   *
-   * Note that none of these are pure black (#000000). #000000 is
-   * reserved for hero canvases and dark chapters; for body type on
-   * white, #1d1d1f gives the slight warmth that reads as Apple. */
-  --fg: #1d1d1f;
-  --fg-2: #424245;
-  --muted: #6e6e73;
-  --meta: #86868b;
-
-  /* ─── Border (2 levels) ──────────────────────────────────────────
-   * Soft Border Gray (#d2d2d7) is Apple's default divider weight and
-   * card-edge color. --border-soft is bound to a lighter near-neutral
-   * (#e8e8ed) for inner row separators in dense retail tables and
-   * configurator option lists, where the d2d2d7 hairline would
-   * over-compete with the option labels. */
-  --border: #d2d2d7;
-  --border-soft: #e8e8ed;
-
-  /* ─── Accent ──────────────────────────────────────────────────────
-   * Apple Action Blue — the system's only persistent chromatic move.
-   * DESIGN.md §7 ("Don't introduce broad secondary accent palettes
-   * that compete with Apple blue") makes this a one-color brand for
-   * action and link semantics; the schema's hard cap of ≤2 visible
-   * accent uses per screen aligns naturally. */
-  --accent: #0071e3;
-  --accent-on: #ffffff; /* white label on the blue fill */
-
-  /* ─── Accent states ───────────────────────────────────────────────
-   * Apple's live primary buttons LIGHTEN on hover (the blue gains
-   * luminance) and darken on press. The schema's default black-mix
-   * formula would fight that motion, so we hand-pick both values:
-   *   - hover: #0077ed (≈ 4% brighter than --accent)
-   *   - active: #0066cc (the documented Body Link Blue from DESIGN.md
-   *             §2, which doubles cleanly as the press tone)
-   *
-   * Schema rule: every brand provides --accent-hover and
-   * --accent-active. The binding strategy (formula / hand-picked /
-   * identity) is brand-decided. Default uses formulas; kami uses
-   * identity + hand-picked; Apple uses hand-picked in both
-   * directions. */
-  --accent-hover: #0077ed;
-  --accent-active: #0066cc;
-
-  /* ─── Semantic ────────────────────────────────────────────────────
-   * Apple's DESIGN.md §2 explicitly notes "no distinct semantic
-   * palette was consistently visible in the extracted surface set" —
-   * so we inherit the schema defaults verbatim. Apple artifacts
-   * almost never need success / warn / danger; when they do, the
-   * defaults are restrained enough not to fight the blue accent.
-   * Reserve under 5% of any surface area regardless. */
-  --success: #16a34a;
-  --warn:    #eab308;
-  --danger:  #dc2626;
-
-  /* ─── Typography ──────────────────────────────────────────────────
-   * Apple's documented split is two SF Pro families: SF Pro Display
-   * for hero / merchandising headings, SF Pro Text for navigation,
-   * controls, and dense commerce copy. We mirror the exact published
-   * fallback chain (SF Pro Icons → Helvetica Neue → Helvetica → Arial
-   * → sans-serif) so artifacts rendered on non-macOS clients land on
-   * the closest practical substitute.
-   *
-   * SF Mono leads the monospace stack — Apple's brand mono — with
-   * the schema fallbacks behind it for portability. */
-  --font-display:
-    "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-body:
-    "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-mono:
-    "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
-
-  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
-   * Apple's body baseline is 17px (NOT the 16px web norm) because
-   * SF Pro Text was metrically tuned at 17 for Retina; rebinding
-   * --text-base to anything else collapses the brand's reading
-   * texture. The display ceiling is the 80px Hero Display XL. */
-  --text-xs:   12px;   /* Micro UI — fine print, micro labels */
-  --text-sm:   14px;   /* Control Label — buttons, helper labels */
-  --text-base: 17px;   /* Body Primary — Apple's reading baseline */
-  --text-lg:   21px;   /* Link/Action Heading — large promo links */
-  --text-xl:   28px;   /* Card/Product Title — tile-level naming */
-  --text-2xl:  40px;   /* Product Heading — campaign section titles */
-  --text-3xl:  56px;   /* Hero Display L — homepage hero moments */
-  --text-4xl:  80px;   /* Hero Display XL — Environment / store hero */
-
-  /* Apple's leading envelope is unusually tight at the top of the
-   * scale (display sizes ride at 1.00–1.10) and unusually airy in
-   * the body (1.47, well above the web 1.4 default). Both numbers
-   * come straight from DESIGN.md §3. */
-  --leading-body:  1.47;   /* SF Pro Text body, 17px */
-  --leading-tight: 1.05;   /* Hero Display XL ceiling */
-
-  /* Display tracking compresses to -0.015em — the famous Apple
-   * machined-headline feel. DESIGN.md §3 lists -1.2px on 80px
-   * (≈ -0.015em); we bind a single em-value so the same rule applies
-   * across the display tiers. Body type runs at 0 / -0.374px and is
-   * left to component-level rules so as not to hurt readability. */
-  --tracking-display: -0.015em;
-
-  /* ─── Spacing ─────────────────────────────────────────────────────
-   * Apple's underlying grid is 8px (DESIGN.md §5), with utility
-   * micro-steps (2/4/6/7/8/9/10) for precision alignment. The shared
-   * schema's 4-8-12-16-20-24-32-48 scale fits cleanly — we inherit
-   * the defaults. Component-internal values that don't match a token
-   * (Apple's 14px or 17px utility intervals) stay inline at the
-   * call site rather than spawning extra spacing 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 ──────────────────────────────────────────────
-   * Apple's billboard chapters lean noticeably more generous than the
-   * schema default of 80px — broad top/bottom breathing room is what
-   * lets product imagery dominate the page. We bind 100/64/40, a
-   * slightly wider envelope than default's 80/48/32. */
-  --section-y-desktop: 100px;
-  --section-y-tablet:  64px;
-  --section-y-phone:   40px;
-
-  /* ─── Radius ──────────────────────────────────────────────────────
-   * Apple uses purposeful radius tiers (DESIGN.md §5 §7 — "don't
-   * flatten all corners to a single radius"). The mapping:
-   *   --radius-sm   → 8px   compact controls and fields
-   *   --radius-md   → 12px  standard buttons, configurator chips
-   *   --radius-lg   → 18px  cards, module frames, commerce panels
-   *   --radius-pill → 980px Apple's signature capsule CTA — we keep
-   *                          the literal value rather than collapse
-   *                          to 9999px because the number itself is
-   *                          a brand-recognisable detail in Apple's
-   *                          published CSS.
-   *
-   * The 28-36px spotlight tier and the 56px capsule sub-tier are
-   * component-internal one-offs and stay inline — they do not earn
-   * their own tokens until a second use appears. */
-  --radius-sm:   8px;
-  --radius-md:   12px;
-  --radius-lg:   18px;
-  --radius-pill: 980px;
-
-  /* ─── Elevation (3 levels) ────────────────────────────────────────
-   * Apple uses depth sparingly (DESIGN.md §6 — "depth is intentionally
-   * restrained"). Three sanctioned levels:
-   *   - flat   → none (the default; tonal contrast does the work)
-   *   - ring   → 0 0 0 1px var(--border) (border-led containment in
-   *              dense retail contexts)
-   *   - raised → 0 12px 32px rgba(0,0,0,0.08) (the soft Apple card
-   *              shadow; rgba 0.08 is the lower bound from DESIGN.md
-   *              §6's "0.08 → 0.22" range, which keeps cards from
-   *              feeling Material-flavoured)
-   *
-   * No fourth level — that would be the Material/neumorphism stack
-   * Apple consciously avoids. */
-  --elev-flat:   none;
-  --elev-ring:   0 0 0 1px var(--border);
-  --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08);
-
-  /* ─── Focus ring ──────────────────────────────────────────────────
-   * Apple's keyboard-focus signal is a soft blue glow at the action
-   * accent (DESIGN.md §6 — "Blue focus signal (#0071e3) for keyboard
-   * and selection emphasis"). We use a 4px ring at ~35% accent
-   * opacity, slightly larger than the schema's 3px default so it
-   * reads as the deliberate Apple halo rather than a generic outline.
-   * Implemented as a box-shadow so it layers outside the element
-   * without affecting layout. */
-  --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);
-
-  /* ─── Motion ──────────────────────────────────────────────────────
-   * Apple transitions decelerate hard and settle — never bounce,
-   * never spring past the target. We override the schema default
-   * easing with cubic-bezier(0.28, 0, 0.22, 1), the curve Apple
-   * uses on apple.com for hover and section reveals; --motion-base
-   * is bumped from 200ms → 220ms because Apple's micro-interactions
-   * carry slightly more cinematic weight than the web default.
-   * --motion-fast stays at 150ms for true micro-states (hover tints,
-   * focus, kbd press feedback). */
-  --motion-fast:   150ms;
-  --motion-base:   220ms;
-  --ease-standard: cubic-bezier(0.28, 0, 0.22, 1);
-
-  /* ─── Layout ──────────────────────────────────────────────────────
-   * Apple's marketing core is a constrained readable column with
-   * generous outer margins (DESIGN.md §5). 1024px max keeps lines
-   * inside the SF Pro Text comfortable-measure ceiling (~80ch at
-   * 17px) while leaving the chapter band full-bleed. Gutters step
-   * 22 → 18 → 16 across desktop / tablet / phone — slightly tighter
-   * than default to honor Apple's "broad horizontal breathing room
-   * but column-disciplined content" balance. */
-  --container-max:            1024px;
-  --container-gutter-desktop: 22px;
-  --container-gutter-tablet:  18px;
-  --container-gutter-phone:   16px;
-}

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

@@ -1,71 +0,0 @@
-# Design System Inspired by Application
-
-> Category: Professional & Corporate
-> App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.
-
-## 1. Visual Theme & Atmosphere
-
-App dashboard with purple-themed aesthetic, top-bar navigation, card-based layouts, and developer-first workflows.
-
-- **Visual style:** modern, clean, high-contrast, glass-like panels, soft shadows, rounded components
-- **Color stance:** primary (purple), neutral, success, warning, danger
-- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
-
-## 2. Color
-
-- **Primary:** `#9333EA` — Token from style foundations.
-- **Secondary:** `#A855F7` — Token from style foundations.
-- **Success:** `#10B981` — Token from style foundations.
-- **Warning:** `#F59E0B` — Token from style foundations.
-- **Danger:** `#EF4444` — Token from style foundations.
-- **Surface:** `#FFFFFF` — Token from style foundations.
-- **Text:** `#09090B` — Token from style foundations.
-- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
-
-- Favor Primary (#9333EA) for CTA emphasis.
-- Use Surface (#FFFFFF) for large backgrounds and cards.
-- Keep body copy on Text (#09090B) for legibility.
-
-## 3. Typography
-
-- **Scale:** 12/14/16/20/24/32
-- **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 `#9333EA`; 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 (#9333EA) 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/application/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>Application - reference components</title>
-    <meta name="description" content="Reference fixture for design-systems/application: neutral app chrome, practical hierarchy, restrained blue action, and predictable product layout." />
-    <style>
-      :root {
-        --bg: #f6f7f9;
-        --surface: #ffffff;
-        --surface-warm: #eef4ff;
-        --fg: #172033;
-        --fg-2: #3b4658;
-        --muted: #6b7689;
-        --meta: #2563eb;
-        --border: #d8dee8;
-        --border-soft: #edf1f6;
-        --accent: #2563eb;
-        --accent-on: #ffffff;
-        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-        --accent-active: color-mix(in oklab, var(--accent), black 14%);
-        --success: #16a34a;
-        --warn: #f59e0b;
-        --danger: #dc2626;
-        --font-display: Inter, system-ui, sans-serif;
-        --font-body: Inter, system-ui, sans-serif;
-        --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-        --text-xs: 12px;
-        --text-sm: 14px;
-        --text-base: 16px;
-        --text-lg: 18px;
-        --text-xl: 22px;
-        --text-2xl: 30px;
-        --text-3xl: 42px;
-        --text-4xl: 58px;
-        --leading-body: 1.5;
-        --leading-tight: 1.12;
-        --tracking-display: -0.015em;
-        --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: 88px;
-        --section-y-tablet: 64px;
-        --section-y-phone: 44px;
-        --radius-sm: 8px;
-        --radius-md: 12px;
-        --radius-lg: 18px;
-        --radius-pill: 9999px;
-        --elev-flat: none;
-        --elev-ring: 0 0 0 1px var(--border);
-        --elev-raised: 0 16px 40px rgba(23, 32, 51, 0.10);
-        --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
-        --motion-fast: 140ms;
-        --motion-base: 220ms;
-        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-        --container-max: 1200px;
-        --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, #f6f7f9 0%, #eef4ff 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">Application design system</p>
-            <h1>Product app shell</h1>
-            <p class="lead">A pragmatic application system for forms, lists, navigation, and content density.</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="Application 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>neutral app chrome, practical hierarchy, restrained blue action, and predictable product layout.</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="application-input">Reference input</label><input id="application-input" value="Application 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/application/tokens.css

@@ -1,63 +0,0 @@
-/* design-systems/application/tokens.css
- * Structured token bindings for Application.
- * neutral app chrome, practical hierarchy, restrained blue action, and predictable product layout.
- */
-
-:root {
-  --bg: #f6f7f9;
-  --surface: #ffffff;
-  --surface-warm: #eef4ff;
-  --fg: #172033;
-  --fg-2: #3b4658;
-  --muted: #6b7689;
-  --meta: #2563eb;
-  --border: #d8dee8;
-  --border-soft: #edf1f6;
-  --accent: #2563eb;
-  --accent-on: #ffffff;
-  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
-  --accent-active: color-mix(in oklab, var(--accent), black 14%);
-  --success: #16a34a;
-  --warn: #f59e0b;
-  --danger: #dc2626;
-  --font-display: Inter, system-ui, sans-serif;
-  --font-body: Inter, system-ui, sans-serif;
-  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 22px;
-  --text-2xl: 30px;
-  --text-3xl: 42px;
-  --text-4xl: 58px;
-  --leading-body: 1.5;
-  --leading-tight: 1.12;
-  --tracking-display: -0.015em;
-  --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: 88px;
-  --section-y-tablet: 64px;
-  --section-y-phone: 44px;
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 18px;
-  --radius-pill: 9999px;
-  --elev-flat: none;
-  --elev-ring: 0 0 0 1px var(--border);
-  --elev-raised: 0 16px 40px rgba(23, 32, 51, 0.10);
-  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
-  --motion-fast: 140ms;
-  --motion-base: 220ms;
-  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
-  --container-max: 1200px;
-  --container-gutter-desktop: 36px;
-  --container-gutter-tablet: 24px;
-  --container-gutter-phone: 16px;
-}