elanous 0.2.0 → 0.2.4

package/docs/design/systems/shadcn/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Shadcn
+
+> Category: Modern & Minimal
+> Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.
+
+## 1. Visual Theme & Atmosphere
+
+Shadcn/ui-inspired design with minimal, clean components, monochrome palette, and utility-first patterns.
+
+- **Visual style:** minimal, clean
+- **Color stance:** primary, secondary
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#000000` — Token from style foundations.
+- **Secondary:** `#111111` — 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 (#000000) 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/20/24/32
+- **Families:** primary=Geist, display=Geist, mono=Fira Code
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 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 `#000000`; 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 (#000000) 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/docs/design/systems/shadcn/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "shadcn",
+  "name": "Shadcn",
+  "category": "Modern & Minimal",
+  "description": "Bundled OpenDesign package for Shadcn, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

package/docs/design/systems/shadcn/tokens.css

@@ -0,0 +1,255 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/shadcn/tokens.css
+ *
+ * Structured token bindings for "shadcn" — the open-source copy-paste
+ * React component library whose "brand" is the calm, neutral baseline
+ * that thousands of teams extend. shadcn is intentionally NOT a loud
+ * identity: zinc/slate neutrals, near-black primary, 8px default
+ * radius, restrained spacing, Inter/Geist body text, and accessibility
+ * non-negotiables (visible focus, AA contrast, semantic state colors).
+ *
+ * This file pre-compiles the values described in `DESIGN.md` into the
+ * shared schema. Agents generating an artifact for shadcn should paste
+ * the `:root` block verbatim into the first `<style>` of the artifact,
+ * then reference everything via `var(--*)`.
+ *
+ * Brand-specific schema decisions (each one bends a schema convention
+ * to match shadcn's voice rather than the cross-brand default):
+ *
+ *   1. `--accent` is `#000000` (DESIGN.md §2 Primary), NOT a chromatic
+ *      hue. shadcn's primary action button is pure black on white —
+ *      that IS the accent moment. Because pure black cannot darken
+ *      further visibly, `--accent-hover` and `--accent-active` mix
+ *      TOWARD WHITE (not toward black like the schema default). This
+ *      mirrors the shadcn convention of `bg-primary hover:bg-primary/90`
+ *      where the hover lifts the fill instead of pressing it deeper.
+ *
+ *   2. `--fg` is `#111827` (DESIGN.md §2 Text — Tailwind slate-900),
+ *      NOT `#000000`. Pure-black body copy against pure-white surface
+ *      reads as harsh; the slight cool slate undertone is part of the
+ *      shadcn neutral system. Keeping `--fg` distinct from `--accent`
+ *      preserves the "body text" vs "decisive CTA" semantic split.
+ *
+ *   3. `--fg-2`, `--meta`, `--surface-warm`, `--border-soft` collapse
+ *      to their schema siblings via `var()`. shadcn is a monochrome
+ *      baseline with one foreground tier, one canvas tier, one border
+ *      weight — brands extending shadcn (e.g. a Warm theme) rebind
+ *      these slots independently. The names still exist so shared
+ *      components targeting the full ramp resolve.
+ *
+ *   4. `--focus-ring` is the signature shadcn pattern: a 2px halo of
+ *      `var(--bg)` (the offset) wrapped by a 2px ring of `var(--accent)`
+ *      (the focus indicator). This is the `ring-2 ring-offset-2`
+ *      Tailwind utility every shadcn primitive inherits, expressed as
+ *      a layered box-shadow so it works on dark surfaces, glass
+ *      surfaces, and inside scrollers without the offset clipping.
+ *
+ *   5. `--radius-md` is `8px` — the canonical shadcn default
+ *      (`--radius: 0.5rem` in the components.json starter). `--radius-sm`
+ *      drops to `6px` so inputs and buttons feel one shade tighter
+ *      than cards, matching the `calc(var(--radius) - 2px)` formula
+ *      shadcn primitives use internally. The whole scale (6/8/12/9999)
+ *      is restrained — shadcn rejects oversized pill cards.
+ *
+ *   6. Type scale tops out at `48px` (`--text-4xl`). DESIGN.md §3
+ *      caps the documented scale at 32px; we extend to 40/48 for
+ *      marketing hero treatments while keeping `--tracking-display`
+ *      at a gentle `-0.02em` (not the aggressive `-0.05em` of brand-
+ *      voice systems like Vercel). shadcn whispers; it does not shout.
+ *
+ *   7. `--elev-raised` is a two-layer hairline shadow (1px + 3px
+ *      ambient), mirroring Tailwind's `shadow-sm` — shadcn cards lift
+ *      with a whisper, not a blur. No inner glow, no atmospheric
+ *      wash; the brand voice is functional surface, not theatre.
+ *
+ *   8. Section rhythm is generous (`96 / 64 / 48`) and `--container-max`
+ *      is `1280px` (`max-w-7xl`), the canonical shadcn marketing-page
+ *      width. Gutter narrows to `16px` on phone but never edge-bleeds
+ *      body copy — readability is non-negotiable.
+ *
+ *   9. `--font-mono` is "Fira Code" (DESIGN.md §3), kept distinct
+ *      from the body Geist so code blocks and `kbd` carry a visible
+ *      "this is technical content" signal. The system-mono fallback
+ *      stack guarantees code remains legible if Fira Code is missing.
+ *
+ * Source contracts:
+ *   - Standard token names: design-systems/_schema/tokens.schema.ts
+ *   - A2 fallback parity:   design-systems/_schema/defaults.css
+ *   - Lint enforcement:     apps/daemon/src/lint-artifact.ts
+ *
+ * Keep this file additive: never invent token names not also
+ * documented in DESIGN.md or the schema. Geist and Fira Code are
+ * referenced through OS-fallback stacks so artifacts render
+ * acceptably even when the faces are not loaded; any host that wants
+ * the real faces links them externally.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — schema slot) ─────────────────────────────
+   * Pure white canvas, pure white cards. shadcn intentionally rejects
+   * background-color variation between sections — depth comes from the
+   * border and the elevation hairline, not from tinting surfaces
+   * warmer or cooler. `--surface-warm` aliases to surface because the
+   * brand has no third tier; extending themes (e.g. a "Stone" preset)
+   * rebind independently. */
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-warm: var(--surface);     /* alias — shadcn has no warm tier */
+
+  /* ─── Foreground ramp (4 levels) ──────────────────────────────────
+   * shadcn differentiates two text levels in its base preset: primary
+   * (slate-900) and muted (slate-500). `--fg-2` aliases to `--fg` and
+   * `--meta` aliases to `--muted` so shared components targeting the
+   * richer ramp still resolve. `--fg` is `#111827` (slate-900) NOT
+   * `#000000` — the slight cool undertone is part of the neutral
+   * system. Pure black is reserved for `--accent` (the decisive CTA). */
+  --fg: #111827;                       /* slate-900 — body text (DESIGN.md §2 Text) */
+  --fg-2: var(--fg);                   /* alias — shadcn has no secondary fg tier */
+  --muted: #64748b;                    /* slate-500 — captions, subtext, descriptions */
+  --meta: var(--muted);                /* alias — shadcn has no metadata tier */
+
+  /* ─── Border (2 levels) ──────────────────────────────────────────
+   * Single hairline weight. shadcn uses real `border: 1px solid` (not
+   * shadow-as-border like Vercel) — the explicit edge is part of the
+   * copy-paste primitive's "you can see exactly what's drawn" voice.
+   * `--border-soft` aliases for brands that need a row-separator vs
+   * card-edge distinction; shadcn does not. */
+  --border: #e5e7eb;                   /* slate-200 — card edge, input edge, dividers */
+  --border-soft: var(--border);        /* alias — shadcn has no soft tier */
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * Pure black per DESIGN.md §2 ("Primary: #000000 — Favor Primary
+   * for CTA emphasis"). shadcn's primary button is `bg-primary` =
+   * near-black on white; that IS the accent moment. The hover and
+   * active states mix toward WHITE (not toward black) because pure
+   * black cannot darken further — this mirrors the shadcn idiom
+   * `bg-primary hover:bg-primary/90` where the fill lightens slightly
+   * on pointer-over to signal interactivity. */
+  --accent: #000000;                   /* DESIGN.md §2 Primary — CTA fill */
+  --accent-on: #ffffff;                /* white label on black */
+  --accent-hover: color-mix(in oklab, var(--accent), white 10%);   /* ~#1a1a1a — lift, don't press */
+  --accent-active: color-mix(in oklab, var(--accent), white 18%);  /* ~#2e2e2e — clear pressed delta */
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * Reserved for state, not decoration. Values come directly from
+   * DESIGN.md §2 — Tailwind green-600 / amber-600 / red-600. Keep
+   * total semantic-color pixels under 5% of any surface; shadcn
+   * primitives use them for badges and validation only, never as
+   * filler chrome. */
+  --success: #16a34a;
+  --warn: #d97706;                     /* DESIGN.md §2 Warning — amber-600, not the schema yellow */
+  --danger: #dc2626;
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Geist Sans for display and body per DESIGN.md §3 — modern, neutral,
+   * humanist sans that ships open-source. Geist scales cleanly from
+   * 12px UI to 48px hero without re-weighting. Fira Code for monospace
+   * (DESIGN.md §3 mono) lends code blocks the legible ligature-friendly
+   * face shadcn examples gravitate toward. OS-mono fallback covers
+   * environments without Fira Code installed. */
+  --font-display: "Geist", "Geist Sans", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
+  --font-body: "Geist", "Geist Sans", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;
+  --font-mono: "Fira Code", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale (px) — DESIGN.md §3 lists 12/14/16/20/24/32; we extend
+   * 40/48 for marketing hero treatments. The scale stays restrained
+   * (no 64+ display) because shadcn's voice is "build your own", not
+   * "look at this hero". Hierarchy comes from weight + spacing, not
+   * px excess. */
+  --text-xs: 12px;                     /* caption, meta, badge */
+  --text-sm: 14px;                     /* button, input, secondary body */
+  --text-base: 16px;                   /* body baseline */
+  --text-lg: 20px;                     /* lede, featured paragraph */
+  --text-xl: 24px;                     /* card title, H3 */
+  --text-2xl: 32px;                    /* section title, H2 */
+  --text-3xl: 40px;                    /* H1 */
+  --text-4xl: 48px;                    /* display hero (marketing only) */
+
+  /* Body leading at 1.5 (shadcn docs default), tight leading at 1.2
+   * for headings. Display tracking is a gentle `-0.02em` — shadcn
+   * whispers; the aggressive `-0.05em` compression of brand-voice
+   * systems would override the calm baseline that makes shadcn
+   * recognizable. */
+  --leading-body: 1.5;
+  --leading-tight: 1.2;
+  --tracking-display: -0.02em;
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * 4px-grid base scale. DESIGN.md §4 documents 4/8/12/16/24/32; the
+   * schema requires 8 tiers so we add 20 and 48 for breathing room
+   * between cards and inside marketing forms. Tailwind/shadcn users
+   * map these to `space-1` → `space-12` mentally without translation. */
+  --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 — generous but never gallery-empty. 96px desktop
+   * matches shadcn marketing pages (py-24 in Tailwind units), 64px
+   * tablet preserves the documented hierarchy, 48px phone collapses
+   * without losing the breathing room that distinguishes shadcn
+   * sections from dense dashboard layouts. */
+  --section-y-desktop: 96px;
+  --section-y-tablet: 64px;
+  --section-y-phone: 48px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * The canonical shadcn default is `--radius: 0.5rem` (8px) and the
+   * smaller variants compute as `calc(var(--radius) - Npx)`. We bind:
+   *   sm 6px → buttons, inputs (the `calc(--radius - 2px)` tier)
+   *   md 8px → cards, modals (the documented baseline)
+   *   lg 12px → featured containers (the `calc(--radius + 4px)` tier)
+   *   pill 9999px → badges, avatars, capsule chips */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation (3 levels) ───────────────────────────────────────
+   * Tailwind-`shadow-sm` philosophy: two whisper-soft layers, no
+   * atmospheric blur. shadcn rejects the multi-layer card stack
+   * because the brand voice is "you can read exactly what's drawn",
+   * not "look how lifted this is". `--elev-ring` carries hairline
+   * edges where a real border would shift layout; `--elev-raised`
+   * adds the 1px+3px ambient pair for dropdowns, popovers, and
+   * floating panels. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    0 1px 2px 0 color-mix(in oklab, var(--fg), transparent 92%),
+    0 1px 3px 0 color-mix(in oklab, var(--fg), transparent 88%);
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * The shadcn signature: 2px halo of canvas color (the "offset")
+   * wrapped by a 2px ring of accent. This is the `ring-2 ring-offset-2
+   * ring-ring` Tailwind utility every shadcn primitive inherits,
+   * expressed as a layered box-shadow so the offset reads cleanly on
+   * any surface (light, dark, glass) without the outline-offset
+   * caveats. DESIGN.md §6 explicitly requires "strong focus-visible
+   * states" — this is the rule, not a suggestion. */
+  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * Two durations + one easing curve, per DESIGN.md §7 "short,
+   * purposeful transitions (150–250ms) with stable easing". shadcn
+   * primitives are quick and unobtrusive — never a long-form
+   * choreographed entrance. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * 1280px max content width (`max-w-7xl`) — the canonical shadcn
+   * marketing-page width that keeps line lengths comfortable on
+   * wide displays without edge-bleeding into 1440px+ territory.
+   * Gutters narrow to 16px on phone but never collapse to 0; shadcn
+   * preserves the visible inset that frames the column. */
+  --container-max: 1280px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 16px;
+}

package/docs/design/systems/simple/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Simple
+
+> Category: Modern & Minimal
+> Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.
+
+## 1. Visual Theme & Atmosphere
+
+Straightforward, no-frills design with clean typography, neutral colors, and intuitive layouts that stay out of the way.
+
+- **Visual style:** minimal, clean
+- **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/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 `#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/docs/design/systems/simple/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "simple",
+  "name": "Simple",
+  "category": "Modern & Minimal",
+  "description": "Bundled OpenDesign package for Simple, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

package/docs/design/systems/simple/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/simple/tokens.css
+ * Structured token bindings for Simple.
+ * simple application system with neutral surfaces, clear action color, and dependable layout primitives.
+ */
+
+:root {
+  --bg: #f5f8ff;
+  --surface: #ffffff;
+  --surface-warm: #eaf1ff;
+  --fg: #101828;
+  --fg-2: #344054;
+  --muted: #667085;
+  --meta: #2563eb;
+  --border: #d7e0ef;
+  --border-soft: #edf2f8;
+  --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: #ef4444;
+  --font-display: Inter, system-ui, sans-serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 24px;
+  --text-2xl: 36px;
+  --text-3xl: 54px;
+  --text-4xl: 76px;
+  --leading-body: 1.52;
+  --leading-tight: 1.06;
+  --tracking-display: -0.025em;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --section-y-desktop: 96px;
+  --section-y-tablet: 68px;
+  --section-y-phone: 48px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 20px 52px rgba(16, 24, 40, 0.11);
+  --focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.22);
+  --motion-fast: 150ms;
+  --motion-base: 240ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1180px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

package/docs/design/systems/skeumorphism/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Skeumorphism
+
+> Category: Morphism & Effects
+> Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.
+
+## 1. Visual Theme & Atmosphere
+
+Real-world mimicry with textured surfaces, 3D effects, and familiar physical metaphors for intuitive digital interfaces.
+
+- **Visual style:** playful
+- **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:** `#FA3C00` — Token from style foundations.
+- **Secondary:** `#F08321` — 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 (#FA3C00) 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/20/24/32
+- **Families:** primary=Roboto, display=Germania One, 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 `#FA3C00`; 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 (#FA3C00) 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.