elanous 0.2.0 → 0.2.5

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

@@ -0,0 +1,71 @@
+# Design System Inspired by Cosmic
+
+> Category: Creative & Artistic
+> Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
+
+## 1. Visual Theme & Atmosphere
+
+Futuristic sci-fi aesthetic with dark themes, vibrant neon accents, and immersive spatial elements.
+
+- **Visual style:** playful, premium
+- **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=Audiowide, display=Audiowide, mono=JetBrains Mono
+- **Weights:** 400
+- 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/cosmic/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "cosmic",
+  "name": "Cosmic",
+  "category": "Creative & Artistic",
+  "description": "Bundled OpenDesign package for Cosmic, 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/cosmic/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/cosmic/tokens.css
+ * Structured token bindings for Cosmic.
+ * cosmic dark interface with star-field depth, luminous violet-blue accents, and spacious modules.
+ */
+
+:root {
+  --bg: #070711;
+  --surface: #111126;
+  --surface-warm: #1e1540;
+  --fg: #f8f7ff;
+  --fg-2: #d6ccff;
+  --muted: #9d8ad4;
+  --meta: #c084fc;
+  --border: #34265e;
+  --border-soft: #241c42;
+  --accent: #c084fc;
+  --accent-on: #13051f;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #39ff88;
+  --warn: #fff34d;
+  --danger: #ff4d8d;
+  --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 24px 80px rgba(192, 132, 252, 0.22);
+  --focus-ring: 0 0 0 4px rgba(192, 132, 252, 0.32);
+  --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/creative/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Creative
+
+> Category: Creative & Artistic
+> Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
+
+## 1. Visual Theme & Atmosphere
+
+Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.
+
+- **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:** `#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=Bangers, display=Bangers, 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 `#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/creative/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "creative",
+  "name": "Creative",
+  "category": "Creative & Artistic",
+  "description": "Bundled OpenDesign package for Creative, 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/creative/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/creative/tokens.css
+ * Structured token bindings for Creative.
+ * creative workspace language with warm bright panels, rounded controls, and energetic accent states.
+ */
+
+:root {
+  --bg: #fff8d7;
+  --surface: #ffffff;
+  --surface-warm: #ffef9f;
+  --fg: #1d1836;
+  --fg-2: #4c426c;
+  --muted: #796f91;
+  --meta: #ff6b00;
+  --border: #eadfba;
+  --border-soft: #f5eccd;
+  --accent: #ff6b00;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #2e9d57;
+  --warn: #ffb020;
+  --danger: #e5484d;
+  --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 18px 44px rgba(29, 24, 54, 0.14);
+  --focus-ring: 0 0 0 4px rgba(255, 107, 0, 0.26);
+  --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/dashboard/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Dashboard
+
+> Category: Professional & Corporate
+> Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
+
+## 1. Visual Theme & Atmosphere
+
+Dark-themed cloud-platform aesthetic with modular grids, glass-like panels, and strong data hierarchy for productivity dashboards.
+
+- **Visual style:** modern, clean, cloud-platform aesthetic (Heroku/Vercel/GitHub inspired), dark theme, subtle gradients, soft shadows, glass-like panels, rounded components
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#0C5CAB` — Token from style foundations.
+- **Secondary:** `#0A4A8A` — Token from style foundations.
+- **Success:** `#10B981` — Token from style foundations.
+- **Warning:** `#F59E0B` — Token from style foundations.
+- **Danger:** `#EF4444` — Token from style foundations.
+- **Surface:** `#09090B` — Token from style foundations.
+- **Text:** `#FAFAFA` — Token from style foundations.
+- **Neutral:** `#09090B` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#0C5CAB) for CTA emphasis.
+- Use Surface (#09090B) for large backgrounds and cards.
+- Keep body copy on Text (#FAFAFA) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32
+- **Families:** primary=IBM Plex Sans, display=IBM Plex Sans, mono=IBM Plex Sans
+- **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:** 8pt baseline grid
+- 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 `#0C5CAB`; 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 (#0C5CAB) 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/dashboard/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "dashboard",
+  "name": "Dashboard",
+  "category": "Professional & Corporate",
+  "description": "Bundled OpenDesign package for Dashboard, 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/dashboard/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/dashboard/tokens.css
+ * Structured token bindings for Dashboard.
+ * analytics dashboard with compact cards, cool surfaces, and status-first information design.
+ */
+
+:root {
+  --bg: #f4f7fb;
+  --surface: #ffffff;
+  --surface-warm: #eef6ff;
+  --fg: #111827;
+  --fg-2: #334155;
+  --muted: #64748b;
+  --meta: #0ea5e9;
+  --border: #d8e2ee;
+  --border-soft: #edf3f8;
+  --accent: #0ea5e9;
+  --accent-on: #04131d;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #10b981;
+  --warn: #f59e0b;
+  --danger: #ef4444;
+  --font-display: Inter, system-ui, sans-serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 11px;
+  --text-sm: 13px;
+  --text-base: 15px;
+  --text-lg: 17px;
+  --text-xl: 22px;
+  --text-2xl: 30px;
+  --text-3xl: 42px;
+  --text-4xl: 56px;
+  --leading-body: 1.48;
+  --leading-tight: 1.1;
+  --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: 84px;
+  --section-y-tablet: 60px;
+  --section-y-phone: 42px;
+  --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 18px 46px rgba(15, 23, 42, 0.10);
+  --focus-ring: 0 0 0 4px rgba(14, 165, 233, 0.22);
+  --motion-fast: 120ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1280px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

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

@@ -0,0 +1,62 @@
+# Neutral Modern
+
+> Category: Starter
+> A clean, product-oriented default. Use when the brief doesn't call for a
+> specific mood — good for B2B tools, dashboards, and utility pages.
+
+## Visual Theme & Atmosphere
+Calm, functional, quietly confident. No ornament. Content-first, chrome-second.
+
+## Color Palette & Roles
+- **Background:** `#FAFAFA`
+- **Foreground:** `#111111`
+- **Accent:** `#2F6FEB` (cobalt) — primary CTAs, links, one hero element per screen
+- **Muted:** `#6B6B6B` — secondary text, captions
+- **Border:** `#E5E5E5`
+- **Surface:** `#FFFFFF` — cards, modals
+- **Success:** `#17A34A`, **Warn:** `#EAB308`, **Danger:** `#DC2626`
+Never pure black; never pure white for backgrounds.
+
+## Typography Rules
+- **Display / headings:** `'Inter', -apple-system, system-ui, sans-serif`, weight 600
+- **Body:** `'Inter', -apple-system, system-ui, sans-serif`, weight 400
+- **Mono:** `ui-monospace, 'JetBrains Mono', monospace`
+- Scale (px): 12 · 14 · 16 · 20 · 24 · 32 · 48 · 64
+- Line-height: 1.5 for body, 1.2 for headings
+- Letter-spacing: -0.01em on display sizes ≥32px
+
+## Component Stylings
+- **Buttons:** 8px radius, 10px padding-block, 16px padding-inline. Primary = cobalt fill, white label. Secondary = 1px border, transparent fill.
+- **Cards:** white, 1px border, 12px radius, 20px internal padding, no shadow by default.
+- **Inputs:** 1px border, 8px radius, 10px vertical padding, cobalt border on focus.
+- **Links:** cobalt, no underline, underline on hover.
+
+## Layout Principles
+- 12-column grid, 1200px max-width, 24px gutters.
+- Hero: 40–60vh. Content top-biased, never centered vertically.
+- Sections: 80px top+bottom spacing desktop, 48px tablet, 32px phone.
+- Use whitespace as the main separator. Dividers only between unrelated top-level sections.
+
+## Depth & Elevation
+Two levels only:
+- **Flat (0):** default.
+- **Raised (1):** dropdowns, modals, floating buttons. 2px y-offset, 8px blur, foreground at 8% opacity.
+No neumorphism, no glassmorphism.
+
+## Do's and Don'ts
+- ✅ Let whitespace do the work.
+- ✅ One accent element per screen.
+- ✅ Sentence-case headings by default; title case only for brand names.
+- ❌ No gradients (except the accent → accent-at-80% on a hero, sparingly).
+- ❌ No drop shadows on inputs.
+- ❌ No more than three type sizes on one screen.
+
+## Responsive Behavior
+- **Desktop ≥ 1024px:** 12-col grid.
+- **Tablet 640–1023px:** 8-col grid, 16px gutters.
+- **Phone < 640px:** 4-col grid, 12px gutters; hero drops to 40vh.
+
+## Agent Prompt Guide
+- When in doubt, subtract. Fewer boxes, less chrome, more space.
+- Use the accent color sparingly — at most one hero accent and one CTA accent per screen.
+- Do not invent hex values outside this palette. If the request needs one, surface a warning comment in the artifact and use the closest existing token.