feat(ai): replace hardcoded design kits with dynamic open-design templates and registries

vibn-frontend/app/api/mcp/route.ts

@@ -18,6 +18,8 @@
  */
 
 import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
 import { BigQuery } from "@google-cloud/bigquery";
 import { toolBrowserConsole, toolBrowserNavigate } from "./browser";
 import { requireWorkspacePrincipal } from "@/lib/auth/workspace-auth";
@@ -424,6 +426,8 @@ export async function POST(request: Request) {
         return await toolFsWrite(principal, params);
       case "fs.edit":
         return await toolFsEdit(principal, params);
+      case "get_design_template":
+        return await toolGetDesignTemplate(params);
       case "apps.templates.scaffold":
         return await toolAppsTemplatesScaffold(principal, params);
       case "generate_media":
@@ -4614,6 +4618,48 @@ async function toolFsRead(principal: Principal, params: Record<string, any>) {
   });
 }
 
+async function toolGetDesignTemplate(params: Record<string, unknown>) {
+  const templateId = String(params.template_id || "").trim();
+  if (!templateId) {
+    return NextResponse.json(
+      { error: "Missing required parameter 'template_id'" },
+      { status: 400 },
+    );
+  }
+
+  // Prevent directory traversal
+  if (templateId.includes("..") || templateId.includes("/")) {
+    return NextResponse.json({ error: "Invalid template_id" }, { status: 400 });
+  }
+
+  const skillPath = path.join(
+    process.cwd(),
+    "lib",
+    "scaffold",
+    "open-design",
+    "design-templates",
+    templateId,
+    "SKILL.md",
+  );
+
+  try {
+    if (!fs.existsSync(skillPath)) {
+      return NextResponse.json(
+        { error: `Template '${templateId}' not found or missing SKILL.md` },
+        { status: 404 },
+      );
+    }
+
+    const content = await fs.promises.readFile(skillPath, "utf-8");
+    return NextResponse.json({ result: { content } });
+  } catch (err: any) {
+    return NextResponse.json(
+      { error: `Failed to read template: ${err.message}` },
+      { status: 500 },
+    );
+  }
+}
+
 async function toolAppsTemplatesScaffold(
   principal: Principal,
   params: Record<string, any>,

vibn-frontend/lib/ai/vibn-tools.ts

@@ -85,10 +85,25 @@ export const VIBN_TOOL_DEFINITIONS: ToolDefinition[] = [
       "List all Vibn projects in the workspace (planning records — not live deployments). Use apps_list to see what is actually running.",
     parameters: { type: "OBJECT", properties: {}, required: [] },
   },
+  {
+    name: "get_design_template",
+    description:
+      "Get the contents of the SKILL.md file for a specific design template. This file contains the guidelines, patterns, and code structure needed to implement the template.",
+    parameters: {
+      type: "OBJECT",
+      properties: {
+        template_id: {
+          type: "STRING",
+          description: "The ID of the template (e.g. 'dashboard', 'blog-post')",
+        },
+      },
+      required: ["template_id"],
+    },
+  },
   {
     name: "projects_get",
     description:
-      "Get details for a single Vibn project by ID: name, status, vision, linked Coolify UUID, Sentry slug + DSN, possibleDeployments, and designKit fields when the founder saved a kit on the Design tab (designKitForCodegen has resolved color ramps + radius + font — use to align frontend tokens; saving in UI does not edit repo files).",
+      "Get details for a single Vibn project by ID: name, status, vision, linked Coolify UUID, Sentry slug + DSN, possibleDeployments, and designKit fields when the founder saved a kit on the Design tab (designKitForCodegen has resolved color ramps + radius + font, DESIGN.md guidelines, and tokens.css). Use these resolved fields and guidelines to align frontend tokens and styling; saving in UI does not edit repo files.",
     parameters: {
       type: "OBJECT",
       properties: {

vibn-frontend/lib/design-kits/for-ai.ts

@@ -2,13 +2,17 @@
  * Serialize persisted design-kit state for system prompts and MCP `projects.get`.
  */
 
+import fs from "fs";
+import path from "path";
 import { getStarterKit } from "./registry";
 import { resolveKitTokens } from "./resolve";
 import type { ResolvedKitTokens } from "./resolve";
 import type { DesignKitOverrides, DesignKitPersisted } from "./types";
 import { DEFAULT_DESIGN_KIT_ID, UI_FOUNDATION_LABELS } from "./types";
 
-export function parsePersistedDesignKit(raw: unknown): DesignKitPersisted | null {
+export function parsePersistedDesignKit(
+  raw: unknown,
+): DesignKitPersisted | null {
   if (raw === undefined || raw === null) return null;
   if (typeof raw !== "object" || Array.isArray(raw)) return null;
   const r = raw as Record<string, unknown>;
@@ -39,9 +43,11 @@ export function parsePersistedDesignKit(raw: unknown): DesignKitPersisted | null
 }
 
 /** Resolved tokens + hints for codegen; null if no kit saved or starter id unknown. */
-export function buildDesignKitToolPayload(projectData: {
-  designKit?: unknown;
-} | null): {
+export function buildDesignKitToolPayload(
+  projectData: {
+    designKit?: unknown;
+  } | null,
+): {
   kitId: string;
   starterKitName: string;
   uiFoundation: string;
@@ -50,6 +56,8 @@ export function buildDesignKitToolPayload(projectData: {
   overrides: DesignKitOverrides;
   resolved: ResolvedKitTokens;
   applyNote: string;
+  designMdContent: string;
+  tokensCssContent: string;
 } | null {
   const persisted = parsePersistedDesignKit(projectData?.designKit);
   if (!persisted) return null;
@@ -57,6 +65,29 @@ export function buildDesignKitToolPayload(projectData: {
   if (!kit) return null;
   const overrides = persisted.perKit[persisted.kitId] ?? {};
   const resolved = resolveKitTokens(kit, overrides);
+
+  const SYSTEMS_DIR = path.join(
+    process.cwd(),
+    "lib",
+    "scaffold",
+    "open-design",
+    "design-systems",
+  );
+  let designMdContent = "";
+  let tokensCssContent = "";
+  try {
+    const mdPath = path.join(SYSTEMS_DIR, kit.id, "DESIGN.md");
+    if (fs.existsSync(mdPath)) {
+      designMdContent = fs.readFileSync(mdPath, "utf-8");
+    }
+    const cssPath = path.join(SYSTEMS_DIR, kit.id, "tokens.css");
+    if (fs.existsSync(cssPath)) {
+      tokensCssContent = fs.readFileSync(cssPath, "utf-8");
+    }
+  } catch (err) {
+    console.error("Failed to read design kit files:", err);
+  }
+
   return {
     kitId: persisted.kitId,
     starterKitName: kit.name,
@@ -67,6 +98,8 @@ export function buildDesignKitToolPayload(projectData: {
     resolved,
     applyNote:
       "Saving theme on the Design tab updates project metadata only, not the repo. Wire tokens with fs_* (e.g. :root CSS variables, Tailwind theme.extend, MUI createTheme, HeroUI theme). If many hard-coded colors exist and no shared theme layer, tell the user honestly that matching the kit may require a refactor toward centralized tokens.",
+    designMdContent,
+    tokensCssContent,
   };
 }
 
@@ -77,9 +110,18 @@ export function buildDesignKitPromptSection(
   const payload = buildDesignKitToolPayload(activeProject ?? null);
   if (!payload) return "";
 
-  const { starterKitName, kitId, overrides, resolved, uiFoundation, foundationLabel, foundationNotesForAi } =
-    payload;
-  return `
+  const {
+    starterKitName,
+    kitId,
+    overrides,
+    resolved,
+    uiFoundation,
+    foundationLabel,
+    foundationNotesForAi,
+    designMdContent,
+    tokensCssContent,
+  } = payload;
+  let section = `
 ## Design kit / theme (authoritative for UI styling)
 
 The founder configured the visual language on the **Design** tab. Treat **resolved** values below as the source of truth when editing frontend code under this project's repo (\`/workspace/<slug>/\`).
@@ -97,4 +139,13 @@ The founder configured the visual language on the **Design** tab. Treat **resolv
 
 **Applying theme:** The Design tab does **not** mutate files. When the user saves theme changes or asks the app to match the kit, update the codebase's theme layer (whatever stack they use — locate it with \`fs_grep\` / \`fs_read\`). If matching would require touching many unrelated components because colors are inlined everywhere, **say so explicitly** and describe that a **central-token refactor** is needed before the UI can fully align — do not imply the preview alone updates production code.
 `.trimStart();
+
+  if (designMdContent) {
+    section += `\n\n### Design Guidelines (from DESIGN.md)\n\n${designMdContent}`;
+  }
+  if (tokensCssContent) {
+    section += `\n\n### Tokens (from tokens.css)\n\n\`\`\`css\n${tokensCssContent}\n\`\`\``;
+  }
+
+  return section;
 }

vibn-frontend/lib/design-kits/registry.ts

@@ -1,260 +1,12 @@
-import type { StarterKitDefinition } from "./types";
+import type { DesignSystemDefinition } from "./types";
+import { STARTER_KITS } from "./generated-registry";
 
-/**
- * Visual presets + UI foundation hints for codegen.
- *
- * Popular stacks (shadcn/ui, MUI, HeroUI, Untitled UI) are **different
- * products** — distinct installs, APIs, and licensing. Presets that share
- * `uiFoundation: "agnostic"` are token themes only; the agent should map
- * tokens onto whatever framework already exists unless greenfield.
- *
- * Mood presets at the bottom mirror legacy DESIGN_FEELS in
- * `preview-assist-ui/src/App.jsx`.
- */
-export const STARTER_KITS: StarterKitDefinition[] = [
-  {
-    id: "shadcn-neutral",
-    name: "shadcn / Neutral SaaS",
-    tagline: "Slate neutrals · minimal chrome · Tailwind-friendly",
-    defaults: {
-      accentHex: "#6366f1",
-      radiusMdPx: 8,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font"],
-    uiFoundation: "shadcn-ui",
-    foundationNotesForAi:
-      "Prefer shadcn/ui patterns when adding UI (Tailwind + Radix primitives; copy components into the repo). Map resolved accent/radius to CSS variables and Tailwind theme as shadcn expects.",
-  },
-  {
-    id: "mui-material",
-    name: "MUI (Material)",
-    tagline:
-      "Enterprise components · Material Design · dashboards & CRM shells",
-    defaults: {
-      accentHex: "#1976d2",
-      radiusMdPx: 4,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "mui-material",
-    foundationNotesForAi:
-      "Prefer MUI (@mui/material) when scaffolding new screens unless the repo already uses something else. Map accent and corners via createTheme (palette.primary, shape.borderRadius); avoid mixing MUI with a second heavy kit without user consent.",
-  },
-  {
-    id: "heroui-next",
-    name: "HeroUI",
-    tagline: "Next.js-optimized · React Aria · Tailwind primitives",
-    defaults: {
-      accentHex: "#006fee",
-      radiusMdPx: 12,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "heroui",
-    foundationNotesForAi:
-      "Prefer HeroUI (@heroui/react) on Next.js greenfield; Tailwind-based with React Aria. Align semantic colors with tokens below via Tailwind/HeroUI theme config.",
-  },
-  {
-    id: "untitled-ui",
-    name: "Untitled UI",
-    tagline: "Professional SaaS density · React Aria · Tailwind",
-    defaults: {
-      accentHex: "#444ce7",
-      radiusMdPx: 8,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "untitled-ui",
-    foundationNotesForAi:
-      "Untitled UI is a commercial kit — confirm the user has a license before importing paid sections from Figma handoff. When cleared, follow Untitled UI + React Aria + Tailwind patterns; map tokens to their spacing/color scales.",
-  },
-  {
-    id: "twenty-crm",
-    name: "Twenty CRM UI Kit",
-    tagline: "CRM density · indigo accent · Radix-aligned semantics",
-    defaults: {
-      accentHex: "#5f6bf5",
-      radiusMdPx: 8,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Twenty-inspired tokens only — do not assume or vendor Twenty OSS unless the user asks. If greenfield with Tailwind, shadcn/ui-class primitives fit well; if repo uses MUI/HeroUI, map tokens there instead.",
-  },
-  {
-    id: "flyonui",
-    name: "FlyonUI",
-    tagline: "Tailwind + daisyUI semantics + Preline JS",
-    defaults: {
-      accentHex: "#4f46e5",
-      radiusMdPx: 8,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Prefer FlyonUI semantics (daisyUI class names + Preline JS for interactivity) when scaffolding new screens. 800+ copy-paste components available. Use semantic classes like 'btn btn-primary' instead of raw utility classes where possible.",
-  },
-  {
-    id: "warm-minimal",
-    name: "Warm minimal",
-    tagline: "Soft stone grays · rounded surfaces · editorial spacing",
-    defaults: {
-      accentHex: "#c2410c",
-      radiusMdPx: 10,
-      fontPreset: "system",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Warm SaaS mood — tokens only. Respect whichever UI stack exists; prefer centralized CSS/Tailwind variables for neutrals and accent.",
-  },
-  {
-    id: "bold-confident",
-    name: "Bold & confident",
-    tagline: "High contrast · vivid accent — Stripe / Vercel energy",
-    defaults: {
-      accentHex: "#f43f5e",
-      radiusMdPx: 8,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Bold marketing/product mood — tokens only. Map accent into existing theme; avoid bolting on a new framework if one is already present.",
-  },
-  {
-    id: "fresh-modern",
-    name: "Fresh & modern",
-    tagline: "Crisp green accent · friendly surfaces",
-    defaults: {
-      accentHex: "#22c55e",
-      radiusMdPx: 10,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Fresh palette mood — tokens only. Align greens with brand accent variables without prescribing a specific component vendor.",
-  },
-  {
-    id: "electric-vivid",
-    name: "Electric & vivid",
-    tagline: "Purple creative tooling — Figma / Framer mood",
-    defaults: {
-      accentHex: "#8b5cf6",
-      radiusMdPx: 8,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Creative-tool mood — tokens only. Prefer mapping into existing DS before introducing another library.",
-  },
-  {
-    id: "luxury-refined",
-    name: "Premium & refined",
-    tagline: "Gold accent · tight radius · editorial polish",
-    defaults: {
-      accentHex: "#d4a853",
-      radiusMdPx: 6,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Premium editorial mood — tokens only. Dark chrome often pairs with subtle borders; respect existing stack.",
-  },
-  {
-    id: "anthropic-claude",
-    name: "Anthropic / Claude",
-    tagline: "Warm terracotta accent · clean editorial layout · serif headers",
-    defaults: {
-      accentHex: "#d97757",
-      radiusMdPx: 8,
-      fontPreset: "system",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Claude Design System — Editorial, warm terracotta accent (#d97757), off-white backgrounds (#f9f8f6). Use serif fonts (like Recoleta or a strong serif fallback) for primary headers and clean sans-serif for body. Buttons are rounded, surfaces are separated by subtle hairlines instead of heavy shadows. Read github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/claude/DESIGN.md for specific token semantics.",
-  },
-  {
-    id: "stripe-fintech",
-    name: "Stripe / Fintech",
-    tagline: "Signature purple gradients · weight-300 elegance · crisp utility",
-    defaults: {
-      accentHex: "#635bff",
-      radiusMdPx: 6,
-      fontPreset: "inter",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Stripe Design System — Crisp precision. Signature blurple accent (#635bff). Use incredibly soft, large shadows (0 50px 100px -20px rgba(50,50,93,0.25)) and crisp borders. Typography is tightly tracked, favoring font-weight 400 and 500. Gradients should be used sparingly but impactfully on active states. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/stripe/DESIGN.md.",
-  },
-  {
-    id: "vercel-dev",
-    name: "Vercel / Developer",
-    tagline: "Black and white precision · Geist font · maximum contrast",
-    defaults: {
-      accentHex: "#000000",
-      radiusMdPx: 6,
-      fontPreset: "system",
-      density: "compact",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Vercel Design System — Monochrome, high-contrast, developer-oriented. Use Geist or Geist Mono. The primary accent is solid black (#000) on white, or white on black in dark mode. Extremely sparse use of color, only for status (success, error, warning). Layouts are boxy, defined by 1px solid #eaeaea borders. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/vercel/DESIGN.md.",
-  },
-  {
-    id: "linear-app",
-    name: "Linear / Productivity",
-    tagline: "Ultra-minimal · precise dark UI · purple glow",
-    defaults: {
-      accentHex: "#5e6ad2",
-      radiusMdPx: 8,
-      fontPreset: "system",
-      density: "compact",
-    },
-    customizeFields: ["accent", "radius", "font", "density"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Linear Design System — Dark mode first. Very subtle, single-pixel inner borders (box-shadow inset) on surfaces to give them depth. Primary accent is a muted indigo/purple. Backgrounds are deep gray (#111214) rather than pure black. Typography is highly structured, slightly smaller (13px/14px base) for density. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/linear.app/DESIGN.md.",
-  },
-  {
-    id: "airbnb-marketplace",
-    name: "Airbnb / Marketplace",
-    tagline: "Warm coral accent · photography-driven · large rounded UI",
-    defaults: {
-      accentHex: "#ff385c",
-      radiusMdPx: 12,
-      fontPreset: "system",
-      density: "comfortable",
-    },
-    customizeFields: ["accent", "radius", "font"],
-    uiFoundation: "agnostic",
-    foundationNotesForAi:
-      "Airbnb Design System — Friendly, consumer-focused. Large touch targets, heavy border-radius (12px+), and a stark contrast between pure white backgrounds and the vibrant 'Rausch' coral accent (#ff385c). Minimal borders, using white space and soft, dispersed shadows for elevation. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/airbnb/DESIGN.md.",
-  },
-];
+export { STARTER_KITS };
 
-export function getStarterKit(id: string): StarterKitDefinition | undefined {
+export function getStarterKit(id: string): DesignSystemDefinition | undefined {
   return STARTER_KITS.find((k) => k.id === id);
 }
+
+export function getDesignSystems(): DesignSystemDefinition[] {
+  return STARTER_KITS;
+}

vibn-frontend/lib/design-kits/types.ts

@@ -36,7 +36,7 @@ export interface DesignKitOverrides {
   density?: DesignKitDensity;
 }
 
-export interface StarterKitDefinition {
+export interface DesignSystemDefinition {
   id: string;
   name: string;
   tagline: string;
@@ -48,6 +48,8 @@ export interface StarterKitDefinition {
   foundationNotesForAi: string;
 }
 
+export type StarterKitDefinition = DesignSystemDefinition;
+
 /** Persisted JSON shape */
 export interface DesignKitPersisted {
   kitId: string;
@@ -55,4 +57,4 @@ export interface DesignKitPersisted {
   perKit: Record<string, DesignKitOverrides>;
 }
 
-export const DEFAULT_DESIGN_KIT_ID = "twenty-crm";
+export const DEFAULT_DESIGN_KIT_ID = "apple";

vibn-frontend/lib/scaffold/open-design/design-systems/README.md

@@ -0,0 +1,103 @@
+# Design Systems
+
+Each subfolder is a portable design system in [`DESIGN.md`](../docs/spec.md)
+format. Pick one in the top-bar **Design system** dropdown and every skill
+will read it as part of its system prompt.
+
+## What's bundled
+
+- **`default/`** — Neutral Modern. Hand-authored starter for the OD spec.
+- **`warm-editorial/`** — Warm Editorial. Hand-authored serif starter.
+- **`atelier-zero/`** — Atelier Zero. Hand-authored magazine-grade
+  collage system: warm paper canvas, plaster-and-architecture imagery,
+  oversized italic-mixed display type, Roman-numeral section markers,
+  side rails of rotated micro-text, coordinate annotations, single
+  coral accent. Pairs with [`skills/open-design-landing/`](../skills/open-design-landing/)
+  and [`skills/open-design-landing-deck/`](../skills/open-design-landing-deck/)
+  for the canonical landing-page and slide-deck renderings.
+- **`kami/`** — 紙 / 纸. Editorial paper system distilled from
+  [`tw93/kami`](https://github.com/tw93/kami) (MIT). Warm parchment canvas,
+  ink-blue accent, serif at one weight, no italic, no cool grays. Pairs with
+  the [`templates/kami-deck.html`](../templates/kami-deck.html) starter for
+  slide work.
+- **57 design skills**, sourced from
+  [`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills)
+  and added directly as normalized 9-section `DESIGN.md` files.
+- **72 product systems**, including 70 imported from
+  [`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)
+  (the [`getdesign@latest`](https://www.npmjs.com/package/getdesign) npm
+  package, MIT-licensed), plus two hand-authored additions (`cisco`,
+  `webex`). This table covers that imported product-system subset only; the
+  full bundled catalog is larger once you include the hand-authored starters
+  and the separate design-skill systems listed above. One folder per brand:
+
+  | Category | Systems |
+  |---|---|
+  | AI & LLM | claude · cohere · elevenlabs · minimax · mistral-ai · ollama · opencode-ai · replicate · runwayml · together-ai · voltagent · x-ai |
+  | Developer Tools | cursor · expo · lovable · raycast · superhuman · vercel · warp |
+  | Productivity & SaaS | cal · intercom · linear-app · mintlify · notion · resend · webex · zapier |
+  | Backend & Data | cisco · clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase |
+  | Design & Creative | airtable · clay · figma · framer · miro · webflow |
+  | Fintech & Crypto | binance · coinbase · kraken · mastercard · revolut · stripe · wise |
+  | E-Commerce & Retail | airbnb · meta · nike · shopify · starbucks |
+  | Media & Consumer | apple · ibm · nvidia · pinterest · playstation · spacex · spotify · theverge · uber · vodafone · wired · xiaohongshu |
+  | Automotive | bmw · bugatti · ferrari · lamborghini · renault · tesla |
+
+Folders use ASCII slugs — dotted brands are normalized (`linear.app` →
+`linear-app`, `x.ai` → `x-ai`, etc.).
+
+## File shape
+
+The first H1 is the title shown in the picker. The line immediately after
+the H1 is parsed for `> Category: <name>` and used to group the dropdown:
+
+```markdown
+# Design System Inspired by Cohere
+
+> Category: AI & LLM
+> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.
+
+## 1. Visual Theme & Atmosphere
+...
+```
+
+Both the boilerplate prefix `Design System Inspired by ` and the
+`> Category: ...` line are stripped from the dropdown label and the summary
+preview at runtime — they're only metadata.
+
+## Adding your own
+
+Drop a new folder containing a `DESIGN.md` and it shows up on next refresh.
+Add a `> Category: <Group>` line to slot it under an existing group, or use
+any new label and it lands at the bottom of the dropdown.
+
+## Refreshing the bundled set
+
+The 70 imported product systems are pulled from the upstream npm package. To
+re-sync to the latest hashes:
+
+```bash
+curl -sL $(npm view getdesign dist.tarball) -o /tmp/getdesign.tgz
+tar -xzf /tmp/getdesign.tgz -C /tmp
+node --experimental-strip-types scripts/sync-design-systems.ts
+```
+
+For now, the original importer lives at the top of the
+[`excessive-climb` branch](../) — re-run it against a fresh tarball.
+
+## Attribution
+
+The 70 imported product systems are sourced from
+[`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)
+(MIT, © VoltAgent contributors). They are aesthetic *inspirations* — none
+of them are official assets of the brands they reference.
+
+The `cisco/` and `webex/` systems are hand-authored additions based on the
+current public Cisco and Webex / Momentum visual languages.
+
+The `kami/` system adapts tokens, type rules, and the "ten invariants" from
+[`tw93/kami`](https://github.com/tw93/kami) (MIT, © Tw93 and contributors),
+a Claude skill for typesetting professional documents and slide decks.
+
+The 57 design skills are sourced from
+[`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills).

vibn-frontend/lib/scaffold/open-design/design-systems/_schema/AGENTS.md

@@ -0,0 +1,179 @@
+# `_schema/` — the shared token contract
+
+This directory codifies the structural contract that every brand under
+`design-systems/<brand>/` must satisfy. It is the input to the drift
+guard (`scripts/check-tokens-fixture-sync.ts`) and the future derive
+script that will bulk-generate `tokens.css` for the ~140 brands that do
+not yet have hand-authored tokens.
+
+```
+_schema/
+├── tokens.schema.ts   ← canonical schema (TS, machine-enforced)
+├── defaults.css       ← A2 fallback values (CSS, human reference)
+└── AGENTS.md          ← this file
+```
+
+The TypeScript schema is the source of truth. `defaults.css` is a
+human-readable mirror of the A2 `fallback` fields and exists so that
+reviewers can scan real CSS without parsing a TS array — drift between
+the two is enforced by the `design-system: A2 defaults parity` guard.
+
+## Four layers, two questions
+
+Every shared token answers two questions:
+
+1. **Who decides the value?** — the brand author (Layer A) or the
+   schema author (Layer B-slot, when the brand has no opinion).
+2. **What happens if the brand omits it?** — required, fallback, or
+   alias.
+
+The four layers fall out of those answers:
+
+| Layer | Who decides | If omitted | Examples |
+| --- | --- | --- | --- |
+| **A1-identity** | brand | guard fails | `--bg`, `--fg`, `--accent`, `--font-display` |
+| **A1-structure** | brand | guard fails | type scale, `--container-max`, `--section-y-*` |
+| **A2** | brand (with fallback) | guard fails today; derive script fills tomorrow | `--motion-fast`, `--success`, `--space-4`, `--font-mono` |
+| **B-slot** | brand or schema-suggested alias | guard fails — brand must declare, either as `var(--sibling)` (collapsed) or independent value (richer) | `--fg-2 → var(--fg)`, `--surface-warm → var(--surface)` |
+
+Brand-specific tokens that fall outside the shared schema are tracked
+as **C-extensions** in `BRAND_EXTENSIONS` (per-brand allowlist) or
+`BRAND_EXTENSION_PREFIXES` (global prefix allowlist for whole families
+like `--tag-bg-*`).
+
+## Why A2 fails the guard today (and might not later)
+
+A2 conceptually means "optional with fallback" — but artifacts are
+generated by agents pasting one brand's `:root` block into a single
+`<style>`. There is no global stylesheet that loads alongside the
+brand, so a missing `--motion-fast` resolves to nothing inside the
+artifact and any `transition: var(--motion-fast)` rule silently breaks.
+
+Until the derive script (PR-B) lands and inlines `defaults.css` values
+into every brand's `tokens.css`, the only safe contract is "every
+brand must declare every A2 token". The `design-system: A2 required
+tokens` guard enforces that strictly.
+
+After the derive script ships, brand authors only need to write the
+A1 tokens (and any A2 they want to override); the script populates A2
+slots from `defaults.css`. The guard contract does not change — every
+final `tokens.css` still contains every A2 token — but the work
+shifts from human author to script.
+
+## Why B-slot is required (and what the alias is for)
+
+Same artifact-paste constraint applies to B-slot tokens. Shared
+components reference richer tiers via `var(--fg-2)`, `var(--meta)`,
+`var(--surface-warm)`, `var(--border-soft)` — if a brand omits the
+slot, those references resolve to nothing and the artifact silently
+breaks.
+
+The `aliasTo` field on each B-slot entry is the **schema-suggested
+default**, not a runtime fallback. A brand with no opinion on the
+richer tier copies the alias verbatim into its `:root`:
+
+```
+--fg-2: var(--fg);                /* default brand: 2-level fg */
+--surface-warm: var(--surface);   /* default brand: 2-level surface */
+```
+
+A brand that does have the richer tier binds an independent value:
+
+```
+--fg-2: #3d3d3a;                  /* kami brand: dark warm */
+--surface-warm: #e8e6dc;          /* kami brand: warm sand */
+```
+
+Either form satisfies the `design-system: B-slot required tokens`
+guard. The pre-derive-script contract is identical to A2: every
+brand's `:root` declares every shared slot.
+
+## C → B-slot → A2 promotion path
+
+Brand-specific tokens start in `BRAND_EXTENSIONS[brand]`. They earn
+promotion when a second brand needs the same name:
+
+```
+C-extension                    B-slot                       A2
+(one brand declares it)        (multiple brands declare,    (every brand declares
+                                some alias to a sibling)     with a sensible default)
+
+kami: --leading-display    →   schema: --leading-display    →   schema: --leading-display
+                               aliasTo: var(--leading-tight)    fallback: 1.1
+```
+
+Concrete promotion rules:
+
+1. **C → B-slot** when **≥2 brands** declare a token of the same name
+   *and* there is a meaningful sibling to alias to for brands that
+   lack the richer tier. Move the entry from `BRAND_EXTENSIONS` to
+   `TOKEN_SCHEMA` with `layer: "B-slot"` and `aliasTo: "var(--sibling)"`.
+2. **C → A2** when **≥2 brands** declare a token of the same name
+   *and* a defensible cross-brand fallback exists (no aliasing
+   needed). Move to `TOKEN_SCHEMA` with `layer: "A2"` and a `fallback`,
+   then mirror the value in `defaults.css`.
+3. **B-slot → A2** when a B-slot starts being independently bound by
+   ≥2 brands (instead of aliasing). Replace `aliasTo` with `fallback`
+   and add a defaults.css declaration.
+4. **A2 → A1** is rare. It happens when the previously-defaultable
+   value turns out to be brand-determining — e.g. if a future brand
+   redefines `--motion-base` from 200ms to 50ms because its identity
+   is "instant", and that change ripples meaningfully through the
+   brand voice. Drop the `fallback` and reclassify.
+
+Demotion (A → B → C) is not currently supported. A token that is
+genuinely no longer needed should be marked `@deprecated` in the
+schema for one release and then deleted from every brand's
+`tokens.css` in the same PR.
+
+## When **not** to add a token
+
+Schema growth has a cost — every new entry forces 138 brands to
+declare or alias the new name when the derive script next runs.
+Resist adding tokens that are:
+
+- **Component-internal**: a `.btn-primary` background offset that no
+  other component will ever read. Inline the value in the component
+  rule.
+- **One-off**: a single layout's hero crop ratio. Not a token.
+- **Speculative**: "we might want a `--motion-slow` someday." Add it
+  the first time a real interaction needs it, not before.
+- **Already expressible**: a `--accent-tint-50` that resolves to
+  `color-mix(in oklab, var(--accent), transparent 50%)`. Inline the
+  `color-mix(...)` call until ≥2 components need the same tint with
+  the same alpha, then promote to a token.
+
+## Editing this directory
+
+When you change `tokens.schema.ts`:
+
+- Run `pnpm guard` and confirm both `default` and `kami` still pass
+  every design-system sub-check.
+- If you added an A2 entry: also update `defaults.css` with the
+  matching declaration, byte-equivalent to the `fallback` field.
+- If you renamed a token: bump every brand's `tokens.css` and the
+  matching `components.html` `:root` paste in the same commit.
+  Otherwise the drift guard will fail.
+- If you removed a token from `TOKEN_SCHEMA` and the same name now
+  appears in only one brand: add it to that brand's
+  `BRAND_EXTENSIONS` entry so the unknown-token guard does not fail.
+
+## Open questions deferred to PR-B
+
+This PR codifies the schema and enforces it on hand-authored brands.
+The following questions are intentionally not answered here:
+
+- **How does the derive script source A1 values from `DESIGN.md`?**
+  Some sections (color palette, type scale) parse cleanly; others
+  (visual atmosphere, do's and don'ts) do not. A frontmatter or
+  fenced-block convention will likely emerge.
+- **What happens when a brand's `DESIGN.md` contradicts itself?**
+  e.g. accents listed as both cobalt and indigo. The derive script
+  will need a deterministic resolution (last-wins, manual override
+  flag, or hard fail).
+- **Are A2 fallback formulas stable when re-derived?** Bit-for-bit
+  reproducibility of the script's output is required so that running
+  the script twice on the same input does not churn 138 files.
+
+These will be addressed in the PR that introduces
+`scripts/derive-tokens-css.ts`.

vibn-frontend/lib/scaffold/open-design/design-systems/_schema/defaults.css

@@ -0,0 +1,100 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/_schema/defaults.css
+ *
+ * Fallback values for every Layer A2 token in the shared schema.
+ *
+ * What this file is FOR:
+ *   - A human-readable mirror of the `fallback` field on every A2
+ *     entry in `tokens.schema.ts`. Reviewers can scan real CSS and
+ *     spot weird defaults faster than they can read a TS array.
+ *   - The future input to the derive script (PR-B): when a brand's
+ *     DESIGN.md does not specify an A2 token, the script copies the
+ *     declaration from this file into the brand's tokens.css.
+ *
+ * What this file is NOT FOR:
+ *   - Runtime cascade. Artifacts are generated by agents pasting one
+ *     brand's :root block into a single <style>. There is no global
+ *     stylesheet that loads alongside the brand. A brand's tokens.css
+ *     must therefore declare every A2 token directly — this file
+ *     never reaches the browser.
+ *
+ * Drift contract:
+ *   The `design-system: A2 defaults parity` guard check asserts that
+ *   each declaration here matches the `fallback` field on the
+ *   corresponding entry in `tokens.schema.ts`. Update both together.
+ *
+ * Tokens absent from this file:
+ *   - A1-identity tokens (--bg, --fg, --accent, font stacks) have no
+ *     defensible cross-brand default; brands must author them.
+ *   - A1-structure tokens (type scale, container, section-y) are
+ *     structural decisions that vary per brand by design.
+ *   - B-slot tokens (--fg-2, --meta, --surface-warm, --border-soft)
+ *     resolve via `var()` aliasing inside each brand's tokens.css,
+ *     not via this file.
+ *   - C-extension tokens are brand-specific and have no shared
+ *     default by definition.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* Accent states (over --accent bg). The black-mix formulas work for
+     mid-luminance accents; brands with very dark or very light accents
+     should override the value with a hand-picked one (e.g. kami binds
+     --accent-hover to var(--accent) because ink-blue cannot darken
+     further visibly). */
+  --accent-on:     #ffffff;
+  --accent-hover:  color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* Semantic state. Reserve under 5% of any surface area; not all
+     brands need these — print-first kami inherits defaults rather than
+     designing custom warm equivalents. */
+  --success: #16a34a;
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* Monospace. Every brand uses kbd / tabular-nums / code somewhere;
+     CJK brands override with a stack that includes their preferred
+     CJK monospace face (kami adds TsangerJinKai02 / Source Han Serif). */
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Base spacing scale on a 4px grid. Identical across default and
+     kami today. Brands with a print-rooted rhythm (different physical
+     paper sizes) may rebind these wholesale; keep the names stable. */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-12: 48px;
+
+  /* Radius scale. Pill is functionally fixed at 9999px; the small /
+     medium / large tiers are defaults that brands routinely override
+     to express softness or sharpness as part of brand mood. */
+  --radius-sm:   8px;
+  --radius-md:   12px;
+  --radius-lg:   16px;
+  --radius-pill: 9999px;
+
+  /* Elevation. Three sanctioned levels (no fourth — that is
+     neumorphism territory). Brands forbidding blur shadows (kami,
+     paper, editorial) override --elev-raised with a whisper or
+     ring-only treatment. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
+
+  /* Focus. Implemented as a box-shadow so it layers outside the
+     element without affecting layout. Brands forbidding cool-blue
+     glows must override; rebind via accent or a hand-picked ring. */
+  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+
+  /* Motion. Two durations + one easing curve, per the anti-ai-slop
+     "short, purposeful transitions (150–250ms) with stable easing"
+     contract. Add a third duration only when a real interaction
+     needs it; do not invent --motion-slow speculatively. */
+  --motion-fast:   150ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+}

vibn-frontend/lib/scaffold/open-design/design-systems/_schema/tokens.schema.ts

@@ -0,0 +1,275 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/_schema/tokens.schema.ts
+ *
+ * The structural contract for every brand's `tokens.css`.
+ *
+ * Each token in the open-design ecosystem belongs to exactly one of
+ * four layers, distinguished by who decides the value and what
+ * happens when a brand omits the token.
+ *
+ *   A1-identity    Required. The token *is* the brand. No fallback can
+ *                  substitute. (--bg, --fg, --accent, font stacks.)
+ *
+ *   A1-structure   Required. The token is a structural decision (type
+ *                  scale, layout grid, section rhythm) that has no
+ *                  cross-brand sensible default — every brand authors
+ *                  its own.
+ *
+ *   A2             Required *in the final tokens.css*, but a sensible
+ *                  fallback exists in `_schema/defaults.css` that the
+ *                  derive script (PR-B) will inline if a brand's
+ *                  DESIGN.md does not specify the value. Authors of
+ *                  hand-written brands (default, kami) must include
+ *                  every A2 token directly until the derive script
+ *                  ships.
+ *
+ *   B-slot         Optional schema slot. The token exists for cross-
+ *                  brand consistency but a brand without the richer
+ *                  tier may alias it to the named sibling via `var()`.
+ *                  Components that reference B-slot tokens always
+ *                  resolve, even on brands that do not differentiate
+ *                  the tier.
+ *
+ *   C-extension    Brand-specific token, declared explicitly per
+ *                  brand. Generic cross-brand components must NOT
+ *                  reference these. Promote to a B-slot when ≥2 brands
+ *                  need the same name; promote to A2 when there is a
+ *                  meaningful global default.
+ *
+ * Why A2 is "required-with-fallback" rather than "optional":
+ *   Artifacts are generated by agents pasting one brand's :root block
+ *   into a single <style>. There is no runtime cascade from a global
+ *   defaults stylesheet. Agents that paste a tokens.css missing a
+ *   var() target will produce broken artifacts (`var(--motion-fast)`
+ *   resolves to nothing, `transition: var(--motion-fast)` becomes
+ *   `transition: ` and the rule is dropped). The fallback lives in
+ *   `_schema/defaults.css` so the *derive script* can inline it; the
+ *   *runtime* contract remains "every tokens.css must declare every
+ *   A1 + A2 + B-slot token".
+ *
+ * Why C-extension is allowlisted, not free:
+ *   Without an allowlist, brand authors can ship arbitrary token
+ *   names that other brands' components silently miss. The allowlist
+ *   forces a deliberate review when a new brand-only name appears,
+ *   and makes the C→B→A promotion path explicit (move the name from
+ *   the brand-specific list into TOKEN_SCHEMA when ≥2 brands need it).
+ *
+ * Sources of truth:
+ *   - This file: every shared schema token with its layer + metadata.
+ *   - `_schema/defaults.css`: A2 fallback values, mirrored from this
+ *     file so humans can sanity-check the contract in real CSS form.
+ *   - `_schema/AGENTS.md`: prose narrative + promotion path rules.
+ *
+ * Drift between this file and defaults.css is enforced by the
+ * `design-system: A2 defaults parity` guard check.
+ * ─────────────────────────────────────────────────────────────────── */
+
+export type TokenLayer = "A1-identity" | "A1-structure" | "A2" | "B-slot";
+
+export type TokenSpec = {
+  /** CSS custom property name including the `--` prefix. */
+  readonly name: string;
+  readonly layer: TokenLayer;
+  /** One-line description for documentation generators. */
+  readonly description: string;
+  /**
+   * A2 only. The default value the derive script inlines when a
+   * brand's DESIGN.md does not specify one. Must stay byte-equivalent
+   * to the matching declaration in `_schema/defaults.css`.
+   */
+  readonly fallback?: string;
+  /**
+   * B-slot only. Sibling token to alias to when the brand has no
+   * richer tier (e.g. `--fg-2` aliases to `--fg`). The aliasTo string
+   * is a CSS expression, typically `var(--name)`.
+   */
+  readonly aliasTo?: string;
+};
+
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+
+/**
+ * Every brand's tokens.css must declare every entry in this list.
+ *
+ * Order is meaningful for human review — tokens are grouped by intent
+ * rather than by layer so reviewers can scan the visual stack from
+ * surface → text → border → accent → semantic → typography → spacing
+ * → radius → elevation → focus → motion → layout.
+ */
+export const TOKEN_SCHEMA: readonly TokenSpec[] = [
+  // ─── Surface ──────────────────────────────────────────────────────
+  { name: "--bg",           layer: "A1-identity",  description: "Page background — defines the brand canvas." },
+  { name: "--surface",      layer: "A1-identity",  description: "Card / lifted container background." },
+  { name: "--surface-warm", layer: "B-slot",       description: "Tertiary surface tier (kami warm-sand).",
+    aliasTo: "var(--surface)" },
+
+  // ─── Foreground ───────────────────────────────────────────────────
+  { name: "--fg",     layer: "A1-identity", description: "Primary text color." },
+  { name: "--fg-2",   layer: "B-slot",      description: "Secondary text tier (kami dark-warm).",
+    aliasTo: "var(--fg)" },
+  { name: "--muted",  layer: "A1-identity", description: "Subtext / captions." },
+  { name: "--meta",   layer: "B-slot",      description: "Tertiary FG / metadata tier (kami stone).",
+    aliasTo: "var(--muted)" },
+
+  // ─── Border ───────────────────────────────────────────────────────
+  { name: "--border",      layer: "A1-identity", description: "Default border / card edge." },
+  { name: "--border-soft", layer: "B-slot",      description: "Inner row separator that should not visually compete.",
+    aliasTo: "var(--border)" },
+
+  // ─── Accent ───────────────────────────────────────────────────────
+  { name: "--accent",        layer: "A1-identity", description: "Brand accent. ≤2 visible uses per screen (lint enforced)." },
+  { name: "--accent-on",     layer: "A2",          description: "FG when --accent is the bg.",
+    fallback: "#ffffff" },
+  { name: "--accent-hover",  layer: "A2",          description: "Hover state for elements using --accent as bg.",
+    fallback: "color-mix(in oklab, var(--accent), black 8%)" },
+  { name: "--accent-active", layer: "A2",          description: "Active state for elements using --accent as bg.",
+    fallback: "color-mix(in oklab, var(--accent), black 14%)" },
+
+  // ─── Semantic ─────────────────────────────────────────────────────
+  { name: "--success", layer: "A2", description: "Success state.", fallback: "#16a34a" },
+  { name: "--warn",    layer: "A2", description: "Warning state.", fallback: "#eab308" },
+  { name: "--danger",  layer: "A2", description: "Danger state.",  fallback: "#dc2626" },
+
+  // ─── Typography — fonts ───────────────────────────────────────────
+  { name: "--font-display", layer: "A1-identity", description: "Display / heading font stack." },
+  { name: "--font-body",    layer: "A1-identity", description: "Body font stack." },
+  { name: "--font-mono",    layer: "A2",          description: "Monospace font stack — used by kbd, code, tabular metrics.",
+    fallback: 'ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace' },
+
+  // ─── Typography — type scale ──────────────────────────────────────
+  { name: "--text-xs",   layer: "A1-structure", description: "Type scale step — extra small (≈11–12px)." },
+  { name: "--text-sm",   layer: "A1-structure", description: "Type scale step — small (≈12–14px)." },
+  { name: "--text-base", layer: "A1-structure", description: "Type scale step — body baseline." },
+  { name: "--text-lg",   layer: "A1-structure", description: "Type scale step — H3 / featured body." },
+  { name: "--text-xl",   layer: "A1-structure", description: "Type scale step — H2." },
+  { name: "--text-2xl",  layer: "A1-structure", description: "Type scale step — section title." },
+  { name: "--text-3xl",  layer: "A1-structure", description: "Type scale step — H1." },
+  { name: "--text-4xl",  layer: "A1-structure", description: "Type scale step — display / hero." },
+
+  // ─── Typography — leading & tracking ──────────────────────────────
+  { name: "--leading-body",     layer: "A1-structure", description: "Line-height for reading body." },
+  { name: "--leading-tight",    layer: "A1-structure", description: "Line-height for headings." },
+  { name: "--tracking-display", layer: "A1-structure", description: "Letter-spacing applied to display sizes." },
+
+  // ─── Spacing — base scale ─────────────────────────────────────────
+  { name: "--space-1",  layer: "A2", description: "Base spacing — 4px tier.",  fallback: "4px" },
+  { name: "--space-2",  layer: "A2", description: "Base spacing — 8px tier.",  fallback: "8px" },
+  { name: "--space-3",  layer: "A2", description: "Base spacing — 12px tier.", fallback: "12px" },
+  { name: "--space-4",  layer: "A2", description: "Base spacing — 16px tier.", fallback: "16px" },
+  { name: "--space-5",  layer: "A2", description: "Base spacing — 20px tier.", fallback: "20px" },
+  { name: "--space-6",  layer: "A2", description: "Base spacing — 24px tier.", fallback: "24px" },
+  { name: "--space-8",  layer: "A2", description: "Base spacing — 32px tier.", fallback: "32px" },
+  { name: "--space-12", layer: "A2", description: "Base spacing — 48px tier.", fallback: "48px" },
+
+  // ─── Section rhythm ───────────────────────────────────────────────
+  { name: "--section-y-desktop", layer: "A1-structure", description: "Vertical padding between sections — desktop." },
+  { name: "--section-y-tablet",  layer: "A1-structure", description: "Vertical padding between sections — tablet." },
+  { name: "--section-y-phone",   layer: "A1-structure", description: "Vertical padding between sections — phone." },
+
+  // ─── Radius ───────────────────────────────────────────────────────
+  { name: "--radius-sm",   layer: "A2", description: "Small radius — buttons, inputs, chips.", fallback: "8px" },
+  { name: "--radius-md",   layer: "A2", description: "Medium radius — cards, modals.",         fallback: "12px" },
+  { name: "--radius-lg",   layer: "A2", description: "Large radius — featured containers.",    fallback: "16px" },
+  { name: "--radius-pill", layer: "A2", description: "Pill radius — avatars, badges.",         fallback: "9999px" },
+
+  // ─── Elevation ────────────────────────────────────────────────────
+  { name: "--elev-flat",   layer: "A2", description: "No elevation.",                          fallback: "none" },
+  { name: "--elev-ring",   layer: "A2", description: "Hairline ring (1px box-shadow border).", fallback: "0 0 0 1px var(--border)" },
+  { name: "--elev-raised", layer: "A2", description: "Raised surface (blur or whisper).",
+    fallback: "0 2px 8px color-mix(in oklab, var(--fg), transparent 92%)" },
+
+  // ─── Focus ────────────────────────────────────────────────────────
+  { name: "--focus-ring", layer: "A2", description: "Keyboard focus indicator.",
+    fallback: "0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%)" },
+
+  // ─── Motion ───────────────────────────────────────────────────────
+  { name: "--motion-fast",   layer: "A2", description: "Hover / micro-state duration.", fallback: "150ms" },
+  { name: "--motion-base",   layer: "A2", description: "General state-change duration.", fallback: "200ms" },
+  { name: "--ease-standard", layer: "A2", description: "Standard easing curve.",
+    fallback: "cubic-bezier(0.2, 0, 0, 1)" },
+
+  // ─── Layout ───────────────────────────────────────────────────────
+  { name: "--container-max",            layer: "A1-structure", description: "Max content container width." },
+  { name: "--container-gutter-desktop", layer: "A1-structure", description: "Container side gutter — desktop." },
+  { name: "--container-gutter-tablet",  layer: "A1-structure", description: "Container side gutter — tablet." },
+  { name: "--container-gutter-phone",   layer: "A1-structure", description: "Container side gutter — phone." },
+];
+
+/* eslint-enable @typescript-eslint/no-inferrable-types */
+
+/**
+ * Brand-specific tokens (Layer C) that are not part of the shared
+ * schema but are explicitly allowed for the named brand.
+ *
+ * Adding a name here means: "this token exists only in this brand's
+ * tokens.css; cross-brand components must not reference it." When a
+ * second brand adopts the same name, promote the entry into
+ * TOKEN_SCHEMA (typically as a B-slot or A2) and remove it here.
+ */
+export const BRAND_EXTENSIONS: Readonly<Record<string, readonly string[]>> = {
+  default: [
+    "--space-20", // 80px — used as section-y-desktop's twin; only default needs it
+  ],
+  openai: [
+    "--space-16", // 64px — major section gap in OpenAI's DESIGN.md §5 spacing scale
+  ],
+  kami: [
+    "--accent-light", // brighter ink-blue for links on dark surfaces
+    "--text-md", // 15px lede tier between --text-base and --text-lg
+    "--leading-display", // 1.10 — only kami needs this tier
+    "--leading-dense", // 1.40 — resume / one-pager rhythm
+    "--tracking-eyebrow", // uppercase eyebrow tracking
+    "--tracking-label", // small uppercase label tracking
+    "--space-7", // 28px — kami's card interior
+    "--space-18", // 72px — section gap (web)
+    "--space-22", // 88px — page top padding (web)
+    "--radius-xs", // 2px — kami tags
+    "--radius-xl", // 16px — kami hero containers
+    "--elev-ring-accent", // 1px brand ring used as primary-button edge
+  ],
+};
+
+/**
+ * Prefixes that match any token starting with the given string. Use
+ * for whole families of brand-specific tokens (e.g. kami's pre-blended
+ * tag tints `--tag-bg-faint / --tag-bg-soft / ...`) where the
+ * individual member tokens shouldn't have to be enumerated.
+ *
+ * A prefix in this list applies to *any* brand. To restrict a prefix
+ * to one brand, list each member name in BRAND_EXTENSIONS instead.
+ */
+export const BRAND_EXTENSION_PREFIXES: readonly string[] = [
+  "--tag-bg-",
+];
+
+/**
+ * Names that are intentionally absent from the shared schema and not
+ * tracked per-brand: `--leading-display`, `--leading-dense`, etc.
+ * begin life in BRAND_EXTENSIONS[brand] and graduate to the schema
+ * once a second brand adopts them.
+ */
+
+// ─── Helpers (consumed by the guard checks) ─────────────────────────
+
+export function getRequiredA1Names(): readonly string[] {
+  return TOKEN_SCHEMA.filter((t) => t.layer === "A1-identity" || t.layer === "A1-structure").map((t) => t.name);
+}
+
+export function getRequiredA2Names(): readonly string[] {
+  return TOKEN_SCHEMA.filter((t) => t.layer === "A2").map((t) => t.name);
+}
+
+export function getBSlotNames(): readonly string[] {
+  return TOKEN_SCHEMA.filter((t) => t.layer === "B-slot").map((t) => t.name);
+}
+
+export function getAllSchemaNames(): readonly string[] {
+  return TOKEN_SCHEMA.map((t) => t.name);
+}
+
+export function isAllowedExtension(brand: string, name: string): boolean {
+  if (BRAND_EXTENSION_PREFIXES.some((prefix) => name.startsWith(prefix))) return true;
+  const brandList = BRAND_EXTENSIONS[brand];
+  if (brandList != null && brandList.includes(name)) return true;
+  return false;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/agentic/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Agentic
+
+> Category: Themed & Unique
+> Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
+
+## 1. Visual Theme & Atmosphere
+
+Conversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
+
+- **Visual style:** modern, bold
+- **Color stance:** surface/subtle layers
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#FF5701` — Token from style foundations.
+- **Secondary:** `#F6F6F1` — 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 (#FF5701) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Playfair Display, display=Playfair Display, 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:** 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 `#FF5701`; 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 (#FF5701) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/airbnb/DESIGN.md

@@ -0,0 +1,393 @@
+# Design System Inspired by Airbnb
+
+> Category: E-Commerce & Retail
+> Travel marketplace. Warm coral accent, photography-driven, rounded UI.
+
+## 1. Visual Theme & Atmosphere
+
+Airbnb's 2026 design feels like a travel magazine that happens to be an app — pristine white canvases give way to full-bleed photography, and the interface itself disappears so the listings can breathe. The signature Rausch coral-pink (`#ff385c`) is used sparingly but unmistakably: search CTA, active tab indicator, primary action button, the occasional price or wishlist heart. Everything else is a disciplined grayscale, with `#222222` carrying almost every line of text.
+
+What makes the system unmistakably Airbnb is how much *faith* it places in content. Property photos are displayed at hero scale, 4:3 with edge-to-edge radius treatment. Category switching happens through a tri-tab picker (Homes / Experiences / Services) that uses 3D rendered illustrated icons (a pitched-roof house, a hot-air balloon, a service bell) — physical, tactile, almost toy-like — paired with crisp `Airbnb Cereal VF` labels. This is the rare consumer product where 3D renders and purely typographic UI coexist without tension.
+
+The newest surface is the **Experiences** product line — same chrome, but richer card density, more photography, and a center-anchored booking panel with sticky right-rail pricing. Listing detail pages (both rooms and experiences) follow a tight template: full-bleed hero image grid → overlapping rounded booking card (sticky on scroll) → amenities → reviews (Guest Favorite awards use a big centered `4.81` rating with a laurel-wreath lockup) → map → host profile → disclosures. The rhythm is consistent whether you're booking a room or a yacht tour.
+
+**Key Characteristics:**
+- Rausch coral-pink (`#ff385c`) as a single-accent brand color, used only for primary CTAs and the search button
+- Full-bleed photography at 4:3 / 16:9 with gentle corner rounding (14–20px) as the primary visual vocabulary
+- 3D rendered category icons paired with typographic tabs — the one place the system allows illustration
+- Circular `50%` icon buttons (back arrow, share, favorite, carousel arrows) scattered throughout
+- `Airbnb Cereal VF` carries every label, from 8px legal footnote to 28px section heading — a single-family system
+- Product-tier color coding: Airbnb Plus (magenta `#92174d`), Airbnb Luxe (deep purple `#460479`), Airbnb (Rausch coral)
+- Guest Favorite award lockup — centered giant rating number between two laurel wreaths, one of the most recognizable moments in the system
+- Sticky booking panel with a price → dates → guests stack, pinned to the right rail on desktop, transforming to a bottom-anchored "Reserve" bar on mobile
+- Sticky bottom mobile navigation (Explore / Wishlists / Log in) with an active-state Rausch tint
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Rausch** (`#ff385c`): The brand's signature coral-pink. CSS variable `--palette-bg-primary-core`. Used for: primary "Reserve" button, search submit button, active tab underline, wishlist heart fill, pricing emphasis. The single highest-visibility color on every page.
+
+### Secondary & Accent
+- **Deep Rausch** (`#e00b41`): A more saturated variant. CSS variable `--palette-bg-tertiary-core`. Used for pressed/active button states and gradient terminal stops.
+- **Plus Magenta** (`#92174d`): CSS variable `--palette-bg-primary-plus`. The brand color for the Airbnb Plus product tier — a higher-end curated-listing offering.
+- **Luxe Purple** (`#460479`): CSS variable `--palette-bg-primary-luxe`. The brand color for the Airbnb Luxe product tier — villa/estate-level rentals.
+- **Info Blue** (`#428bff`): CSS variable `--palette-text-legal`. Used for legal/informational links (terms, privacy, disclosures) — the only non-monochrome link color in the system.
+
+### Surface & Background
+- **Canvas White** (`#ffffff`): The default page background. Every card, every container, every detail page starts here.
+- **Soft Cloud** (`#f7f7f7`): Subtle subsurface tint used on footer backgrounds, map-view wrappers, and "everything else" sections that want to step back from the primary white.
+- **Hairline Gray** (`#dddddd`): Ubiquitous 1px border color — separates cards, amenity rows, review panels, footer columns. The workhorse of the layout system.
+
+### Neutrals & Text
+- **Ink Black** (`#222222`): CSS variable `--palette-text-primary`. The system's near-black. Every heading, every body paragraph, every nav label, every price. Used for ~90% of all text on a page.
+- **Charcoal** (`#3f3f3f`): CSS variable `--palette-text-focused`. Used in focused-state input text and one-step-down emphasis copy.
+- **Ash Gray** (`#6a6a6a`): CSS variable `--palette-bg-tertiary-hover`. Secondary labels, "Cottage rentals" subtitle-style copy under city names, muted footer links.
+- **Mute Gray** (`#929292`): CSS variable `--palette-text-link-disabled`. Disabled buttons and low-priority metadata.
+- **Stone Gray** (`#c1c1c1`): Tertiary dividers, icon strokes, placeholder avatars.
+
+### Semantic & Accent
+- **Error Red** (`#c13515`): CSS variable `--palette-text-primary-error`. Form validation errors, destructive-action warnings.
+- **Deep Error** (`#b32505`): CSS variable `--palette-text-secondary-error-hover`. Pressed/active variants of error states.
+- **Translucent Black** (`rgba(0, 0, 0, 0.24)`): CSS variable `--palette-text-material-disabled`. Disabled material-style labels.
+
+### Gradient System
+Airbnb's brand gradient appears sparingly, typically only on the wordmark and the search-button branded moment:
+
+```
+linear-gradient(90deg, #ff385c 0%, #e00b41 50%, #92174d 100%)
+```
+
+This coral → magenta sweep is the "branded moment" — never used as a full surface, only as a narrow pill fill or logo treatment.
+
+## 3. Typography Rules
+
+### Font Family
+- **Airbnb Cereal VF** (primary and only): The proprietary variable-weight sans-serif that carries the entire system. Fallbacks (in order): `Circular, -apple-system, system-ui, Roboto, Helvetica Neue, sans-serif`.
+
+Weights observed in the extracted tokens: 500, 600, 700. No 400-regular — the system's "body" weight is 500, which gives every block of text a subtle extra density that reads as confident and deliberate.
+
+OpenType features: `salt` (stylistic alternates) is used on the compact 11px and 14px 600-weight labels — likely for tighter numerals and special-character shaping. No ligature or fractional-numeral features observed.
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Section Heading | 28px / 1.75rem | 700 | 1.43 | 0 | "Inspiration for future getaways" — page-level headings |
+| Subsection Heading | 22px / 1.38rem | 500 | 1.18 | -0.44px | "What this place offers", "Meet the hosts" — content dividers |
+| Card Title | 21px / 1.31rem | 700 | 1.43 | 0 | Review panel headings, card lead titles |
+| Listing Title | 20px / 1.25rem | 600 | 1.20 | -0.18px | "Small Group Yacht Tour, Unlimited Wine & Fruits" — listing headlines on detail pages |
+| Subtitle Bold | 16px / 1.00rem | 600 | 1.25 | 0 | Host name, city name |
+| Body Medium | 16px / 1.00rem | 500 | 1.25 | 0 | Primary body copy on detail pages |
+| Button Large | 16px / 1.00rem | 500 | 1.25 | 0 | "Reserve", "Become a host" |
+| Button Default | 14px / 0.88rem | 500 | 1.29 | 0 | Standard button labels |
+| Link | 14px / 0.88rem | 500 | 1.43 | 0 | Nav links, footer links |
+| Caption Medium | 14px / 0.88rem | 500 | 1.29 | 0 | Metadata, subtitle lines ("Cottage rentals", "Villa rentals") |
+| Caption Bold | 14px / 0.88rem | 600 | 1.43 | 0 | `salt` feature enabled — numeric stats, small-text emphasis |
+| Caption Small | 13px / 0.81rem | 400 | 1.23 | 0 | Review dates, micro-metadata |
+| Micro Default | 12px / 0.75rem | 400 | 1.33 | 0 | Footer disclaimers, legal micro-copy |
+| Micro Bold | 12px / 0.75rem | 700 | 1.33 | 0 | "NEW" pill labels |
+| Badge Uppercase | 11px / 0.69rem | 600 | 1.18 | 0 | `salt` feature — compact category/status badges |
+| Superscript | 8px / 0.50rem | 700 | 1.25 | 0.32px | Uppercase — price footnotes, decimal tails |
+
+### Principles
+- **One family, many weights.** Airbnb Cereal VF handles everything from 8px legal to 28px page headings — the visual identity comes from the family itself, not from typeface mixing.
+- **500 is the new 400.** The system's "regular" weight is 500, giving every paragraph a slightly more confident texture than the web default.
+- **Negative tracking on display type only.** Headings 20px+ compress tracking by -0.18 to -0.44px to feel chiseled; body sizes stay at 0 tracking for readability.
+- **Tight line-heights for headlines, generous for body.** Display type runs at 1.18–1.25 (tight); body and caption open up to 1.43 for long-form comfort.
+- **No all-caps except at 8px.** The only uppercase transform in the system is the 8px superscript — everywhere else, sentence case with subtle weight shifts does the work.
+
+### Note on Font Substitutes
+Airbnb Cereal VF is proprietary. The closest open-source substitute is **Circular Std** (still commercial) or **Inter** (free, Google Fonts) with letter-spacing reduced by -0.01em at display sizes. For strict brand fidelity, the documented fallback chain (`Circular, -apple-system, system-ui`) renders acceptably on macOS/iOS where `system-ui` resolves to San Francisco, which has similar proportions.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA** ("Reserve", "Search", "Add dates")
+- Background: Rausch `#ff385c`
+- Text: Canvas White `#ffffff`, Airbnb Cereal 500, 16px
+- Padding: ~14px vertical, 24px horizontal
+- Radius: 8px (rectangular) or 50% (circular icon variant)
+- Border: none
+- Active/pressed: `transform: scale(0.92)` plus a 2px `#222222` focus ring at `0 0 0 2px`
+
+**Secondary Button** ("Become a host", outlined tertiary actions)
+- Background: `#ffffff`
+- Text: Ink Black `#222222`, Airbnb Cereal 500, 14–16px
+- Padding: 10px 16px
+- Radius: 20px (pill) or 8px (rectangular)
+- Border: 1px solid Hairline Gray `#dddddd`
+
+**Icon-Only Circular Button** (back arrow, share, favorite, carousel controls)
+- Background: `#f2f2f2` (slightly off-white) or white with 1px translucent black border
+- Icon: `#222222` outline stroke, 16–20px
+- Size: 32–44px diameter
+- Radius: 50%
+- Active/pressed: `transform: scale(0.92)`; subtle 4px white ring `0 0 0 4px rgb(255,255,255)` to separate from colorful photography backgrounds
+
+**Disabled Button**
+- Background: `#f2f2f2`
+- Text: Stone Gray `#c1c1c1`
+- Opacity: 0.5
+
+**Pill Tab Button** (category selector "Homes / Experiences / Services")
+- Background: transparent
+- Text: Ink Black `#222222`, Airbnb Cereal 500, 16px
+- Padding: 8px 14px
+- Active state: 2px Ink Black underline beneath the label
+- Paired with a 36–48px 3D-rendered illustrated icon above the label
+
+### Cards & Containers
+
+**Listing Card** (homepage grid, search results)
+- Background: `#ffffff`
+- Radius: 14px on the image, text sits directly below on transparent background
+- Image: 4:3 aspect ratio, full-bleed, rounded with the same 14px radius
+- Padding: none on the outer container; 12px spacing between image and metadata rows
+- Shadow: none — separation comes from whitespace and the intrinsic radius of the photograph
+- Metadata pattern: City/region on line 1 (16px 600), distance/duration on line 2 (14px 500 Ash Gray), date range on line 3, price row with "per night" at the bottom
+
+**Detail Page Booking Panel** (sticky right rail on room/experience pages)
+- Background: `#ffffff`
+- Radius: 14–20px
+- Border: 1px solid Hairline Gray `#dddddd`
+- Shadow: `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` — a stacked three-layer subtle elevation
+- Padding: 24px
+- Width: ~370px, pinned 120–140px below the viewport top
+- Content: price headline → date picker → guest dropdown → primary CTA → "You won't be charged yet" footnote
+
+**Amenity Grid Card** (on listing detail pages)
+- Background: `#ffffff`
+- Border: 1px solid Hairline Gray `#dddddd` at the row level (not per item)
+- Padding: 16px vertical per amenity row
+- Icon + label pattern: 24px outline icon on the left, 16px 500-weight label on the right
+
+**Review Card** (individual review on detail pages)
+- Background: `#ffffff`, no border
+- Padding: 0 (relies on grid gaps)
+- Content: 40px circular avatar + 16px 600-weight name + 14px 400 Ash Gray date on one row, then 14px 500 body paragraph below
+
+### Inputs & Forms
+
+**Search Bar** (primary home page)
+- Background: `#ffffff`
+- Border: 1px solid Hairline Gray `#dddddd` wrapping all three segments (Where / When / Who)
+- Radius: 32px (full pill)
+- Shadow: `rgba(0, 0, 0, 0.04) 0 2px 6px 0` — subtle floating feel
+- Structure: three segments divided by thin vertical dividers, each segment has a 12px 500 label above a 14px 500 placeholder
+- Submit: Rausch circular icon button at the right edge, 48px diameter
+
+**Text Input** (generic forms)
+- Background: `#ffffff`
+- Border: 1px solid Hairline Gray `#dddddd`
+- Radius: 8px
+- Padding: 14px 16px
+- Focus: border switches to Ink Black, adds `0 0 0 2px` black outer ring
+- Error: border switches to `#c13515` (Error Red), helper text uses same color
+
+**Date Picker**
+- Calendar grid: 7-column layout, circular `50%` day cells 40–44px wide
+- Selected range: Ink Black `#222222` background with white numerals
+- Start/end anchors: larger filled circles; middle dates use Soft Cloud `#f7f7f7` tint
+
+### Navigation
+
+**Top Nav (Desktop)**
+- Height: ~80px
+- Background: `#ffffff`
+- Left: Airbnb wordmark+logo lockup in Rausch (102×32px)
+- Center: tri-tab category picker (Homes / Experiences / Services) with 36–48px 3D icons stacked above 16px 500 labels; active tab has a 2px Ink Black underline
+- Right: "Become a host" text link, then 32px circular globe (language), then 36px hamburger avatar menu
+- Border-bottom: 1px solid Hairline Gray `#dddddd`
+
+**Top Nav (Mobile)**
+- Single-row search pill occupies full width: "Start your search" placeholder with a small magnifier icon
+- Below: tri-tab category picker persists (Homes / Experiences / Services) — illustrated icons shrink to ~28px
+- Bottom-fixed tab bar: Explore (active state Rausch) / Wishlists / Log in — 24px icons above 12px labels
+
+**Listing Detail Secondary Nav**
+- Sticky horizontal scroll of anchor links (Photos · Amenities · Reviews · Location · Host) appears on scroll past the hero image
+- Height: 56px
+- Border-bottom: 1px solid Hairline Gray
+
+### Image Treatment
+
+- **Primary aspect ratios**: 4:3 for homepage listing grids, 16:9 for experience hero photography, 1:1 for avatars
+- **Radius**: 14px on listing-grid images, 20px on detail-page hero photo frames, `50%` on avatars
+- **Image grid on detail pages**: five-photo grid with a single large-left image (50% width) and four smaller photos in a 2×2 grid on the right, all sharing the 20px outer rounded container
+- **Lazy loading**: heavy use of `loading="lazy"` with blurred placeholder previews
+- **Carousel**: circular 32px arrow buttons overlay the image, centered vertically; dot indicators sit 12px above the bottom edge
+
+### Signature Components
+
+**Guest Favorite Award Lockup** (featured prominently on high-rated listing detail pages)
+- Centered rating number rendered at 44–56px 700-weight
+- Two hand-drawn laurel-wreath SVG illustrations flanking left and right at ~48px tall
+- Below: "Guest Favorite" label at 12px 700 uppercase with `0.32px` tracking, and a short sub-label at 14px 500 Ash Gray
+- Full-width block, no container border — sits directly on white canvas
+
+**Tri-Tab Category Picker** (appears at the top of every browse surface)
+- Three tabs: Homes / Experiences / Services
+- Each tab: 3D-rendered illustrated icon (~48px tall) above 16px 500 label
+- Experiences and Services currently carry a small navy-blue "NEW" pill (12px 700 white text on dark blue) floating top-right of the icon
+- Active tab: 2px Ink Black underline beneath the label
+
+**Inspiration City Grid** (homepage "Inspiration for future getaways")
+- 6-column grid of destination links on desktop, 2-column on mobile
+- Each cell: 16px 600 city name on line 1, 14px 500 Ash Gray rental-type subtitle on line 2 ("Cottage rentals", "Villa rentals")
+- No images — text-only grid
+- Tabbed above by category (Popular / Arts & culture / Beach / Mountains / Outdoors / Things to do / Travel tips & inspiration / Airbnb-friendly apartments) — active tab has 2px underline and weight shift
+
+**Reserve Sticky Card** (listing detail pages)
+- Stays fixed 120px below viewport top on desktop as the user scrolls past the hero
+- Collapses to a full-width bottom bar on mobile with a "From $X / night" label and a Rausch "Reserve" pill
+- Always shows: price headline → date display → guest selector → Rausch CTA → "You won't be charged yet" disclaimer
+
+**Experience Host Card** (experience detail pages)
+- Full-width rounded container with a 3:2 cover photograph at top
+- Host avatar (circular, 56px) overlapping the bottom edge of the cover by 50%
+- Below overlap: host name at 16px 700, host tenure at 14px 500 Ash Gray, small Rausch "Message host" pill button
+- Used as the transition between reviews and the amenities/location block
+
+**"Things to know" Strip** (listing detail pages)
+- 3-column grid of rule/policy blocks (House rules, Safety & property, Cancellation policy)
+- Each column: icon at the top, 16px 600 heading, 14px 500 Ash Gray body, "Show more" link in Ink Black underline
+- Separator: 1px Hairline Gray top and bottom borders on the overall strip
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Extracted scale**: 2, 3, 4, 5.5, 6, 8, 10, 11, 12, 15, 16, 18.5, 22, 24, 32px — fine-grained with a handful of off-grid values used for pixel-perfect icon alignment
+- **Section padding**: ~48–64px top/bottom on desktop, 24–32px on mobile
+- **Card internal padding**: 24px on booking panels and large cards, 16px on amenity rows, 12px on listing-card metadata
+- **Gutter between listing cards**: 24px desktop, 16px mobile
+- **Between stacked text rows**: 4–8px (very tight — reinforces the "dense information" feel of travel listings)
+
+### Grid & Container
+- **Max content width**: 1760–1920px on ultra-wide (Airbnb lets the grid breathe farther than most sites); 1280px on most detail pages
+- **Homepage listing grid**: 6 columns at ≥1760px, 5 at ≥1440px, 4 at ≥1128px, 3 at ≥800px, 2 at ≥550px, 1 below
+- **Detail page**: 2-column asymmetric — main content ~58%, sticky booking panel ~36% on the right, ~6% gutter
+- **Footer**: 3-column Support / Hosting / Airbnb
+
+### Whitespace Philosophy
+Airbnb is densely informative but never cramped. Whitespace is used to *group* — listing cards have 24px of gutter so each photograph reads as a distinct object, but the metadata under each card uses 4–8px gaps so the price/city/date feels like a single unit. The detail-page booking panel has 24px internal padding, but rows within (date picker, guest selector, CTA) are stacked at 12px — the boundary between the card and the page does more separation work than the content within.
+
+### Border Radius Scale
+| Radius | Use |
+|--------|-----|
+| 4px | Inline anchor tags, tag chips |
+| 8px | Text buttons, dropdowns, small utility buttons |
+| 14px | Listing card photography, generic content containers, badges |
+| 20px | Primary rounded buttons (pill shape), large images, booking panel |
+| 32px | Search bar pill, extra-large containers |
+| 50% | All circular icon buttons, all avatars, wishlist hearts — the system's signature round geometry |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| 0 | No shadow | Listing cards, body content, text-only sections |
+| 1 | `rgba(0, 0, 0, 0.08) 0 4px 12px` | Active/pressed icon buttons (e.g., back, share, favorite) — subtle lift to indicate interaction |
+| 2 | `rgba(0, 0, 0, 0.02) 0 0 0 1px, rgba(0, 0, 0, 0.04) 0 2px 6px 0, rgba(0, 0, 0, 0.1) 0 4px 8px 0` | Booking panel sticky card, modals, dropdown menus — the system's signature three-layer elevation |
+| Focus Ring | `0 0 0 2px #222222` | Active-state buttons, focused search input |
+| White Separator Ring | `rgb(255, 255, 255) 0 0 0 4px` | Circular buttons overlaid on photographs — a 4px white ring cleanly separates the button from colorful image backgrounds |
+
+Shadow philosophy: Airbnb uses **stacked layered shadows** rather than a single drop. The three-layer booking-panel shadow reads as one cohesive lift but is actually three separate shadows at different opacity/blur values — creating subtle anti-aliasing at the shadow's perimeter that feels premium without being heavy.
+
+### Decorative Depth
+- **Photography as depth**: the system relies heavily on full-bleed photography to create visual depth; shadows and gradients are used sparingly so the photographs do the heavy lifting
+- **Laurel wreath lockup**: the Guest Favorite award uses two SVG laurel illustrations that give the otherwise-flat rating number a ceremonial, trophy-like presence
+- **3D rendered category icons**: Homes/Experiences/Services icons have their own soft internal lighting and subtle cast shadows baked into the artwork — the only place the brand allows "dimensional" illustration
+
+## 7. Do's and Don'ts
+
+### Do
+- Reserve Rausch `#ff385c` for primary actions and the active-tab indicator — never dilute it with decorative uses.
+- Let photography breathe — 4:3 crops with 14–20px rounded corners, no overlaid text, no gradient scrims.
+- Use Ink Black `#222222` for every text layer below Rausch — this is the system's near-black, never true `#000000`.
+- Pair the tri-tab category picker's 3D illustrated icons with flat typography — don't mix illustration styles within a single surface.
+- Stack three low-opacity shadows (~2%, 4%, 10%) to create the signature booking-panel elevation.
+- Use Hairline Gray `#dddddd` 1px borders for every card-to-card and row-to-row divider.
+- Treat the booking panel as sticky on desktop, collapsing to a bottom-anchored reserve bar on mobile.
+- Use 4–8px spacing within metadata groups and 24px between cards — information density is intentional.
+
+### Don't
+- Don't introduce secondary accent colors outside the Rausch / Plus Magenta / Luxe Purple product-tier palette.
+- Don't place text inside photographs — captions always sit below the image, never overlaid.
+- Don't use all-caps labels except the single 8px superscript role.
+- Don't round icon buttons to anything other than 50% — circular is the system's signature geometry.
+- Don't add drop shadows to listing cards — they sit on white canvas with no elevation.
+- Don't use gradient backgrounds — the only gradient in the system is a narrow Rausch → magenta sweep on the wordmark.
+- Don't use the 400-regular font weight — Airbnb Cereal's body weight is 500.
+- Don't override Airbnb Cereal VF with a different display face — the system is intentionally single-family.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+Airbnb declares ~60 breakpoints (design-time artifact from their component library), but the meaningful layout shifts happen at a much smaller set:
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Ultra-wide | ≥1760px | 6-column listing grid, 1760–1920px max content width |
+| Desktop XL | 1440–1759px | 5-column grid, full nav visible, sticky right-rail booking panel |
+| Desktop | 1128–1439px | 4-column grid, sticky booking panel persists |
+| Laptop | 1024–1127px | 3–4 column grid, category nav remains horizontal |
+| Tablet | 800–1023px | 3-column grid, global search may collapse to a single-row pill |
+| Small tablet | 550–799px | 2-column grid, booking panel drops to full-width inline block |
+| Mobile | 375–549px | 1-column stacked layout, bottom-fixed tab bar appears (Explore / Wishlists / Log in) |
+| Small mobile | <375px | Edge padding tightens to 16px; category-picker icons shrink to ~28px |
+
+### Touch Targets
+All interactive elements meet or exceed 44×44px. The circular icon button family is specifically sized 32–44px with 8–12px extended hit-area padding. The Rausch primary Reserve button is ~48px tall. The tri-tab category picker's hit area is the full label-plus-icon rectangle (typically ~64×80px per tab).
+
+### Collapsing Strategy
+- **Nav**: Top nav keeps Airbnb wordmark + tri-tab picker on tablet and above; on mobile the picker slides just below the search pill, and the globe/avatar controls move to a bottom-anchored tab bar.
+- **Search bar**: Three-segment pill (Where / When / Who) with a Rausch circular submit button on desktop; collapses to a single-row "Start your search" pill on mobile, tapping which opens a full-screen search sheet.
+- **Booking panel**: Sticky right-rail on ≥1128px; inline within the main content column between 800–1127px; bottom-fixed "Reserve" pill on <800px.
+- **Listing grid**: Reflows 6 → 5 → 4 → 3 → 2 → 1 columns across breakpoints.
+- **Detail-page image grid**: Five-image layout (1 large + 4 small) on desktop; becomes a swipeable full-bleed carousel on mobile with page-dot indicators.
+- **Footer**: 3-column layout collapses to stacked single-column at <800px.
+
+### Image Behavior
+- `loading="lazy"` universal, with blurred `im_w=` URL-parameterized preview thumbs served first
+- Responsive images use Airbnb's `muscache.com` CDN with `im_w` query parameter for width-based delivery (`im_w=240`, `im_w=720`, `im_w=1200`, `im_w=2400`)
+- No art-direction crops — the same image is scaled up/down across breakpoints
+- Carousels auto-advance photo height to maintain a consistent 4:3 ratio regardless of source aspect
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Rausch (#ff385c)"
+- Page background: "Canvas White (#ffffff)"
+- Subsurface: "Soft Cloud (#f7f7f7)"
+- Heading / body text: "Ink Black (#222222)"
+- Secondary text: "Ash Gray (#6a6a6a)"
+- Border / divider: "Hairline Gray (#dddddd)"
+- Error: "Error Red (#c13515)"
+- Info link: "Info Blue (#428bff)"
+- Luxe tier accent: "Luxe Purple (#460479)"
+- Plus tier accent: "Plus Magenta (#92174d)"
+
+### Example Component Prompts
+- "Create a primary Reserve button: Rausch (#ff385c) background, white Airbnb Cereal 500-weight label at 16px, 14px × 24px padding, 8px border-radius, no shadow. On active/pressed add `transform: scale(0.92)` with a 2px Ink Black focus ring (`0 0 0 2px #222222`)."
+- "Build a listing card with a 4:3 full-bleed photograph at 14px border-radius, no container shadow; below the image stack three text rows with 4px gaps: city name at 16px 600 Ink Black, rental type at 14px 500 Ash Gray (#6a6a6a), and price range in 16px 500 Ink Black with a 14px `per night` suffix."
+- "Design a sticky booking panel: white background, 14px border-radius, 1px Hairline Gray (#dddddd) border, 3-layer elevation shadow (`rgba(0,0,0,0.02) 0 0 0 1px, rgba(0,0,0,0.04) 0 2px 6px 0, rgba(0,0,0,0.1) 0 4px 8px 0`), 24px padding, 370px width, pinned 120px below viewport top on desktop. Contents: price headline, date picker, guest dropdown, Rausch primary CTA, and a 12px Ash Gray `You won't be charged yet` disclaimer."
+- "Create a tri-tab category picker: three equal-width tabs labeled Homes, Experiences, Services; each tab has a ~48px 3D-rendered illustrated icon (house, balloon, bell) above a 16px 500 Ink Black label; active tab gets a 2px Ink Black underline; add a small 12px 700 white `NEW` pill on a dark navy background to the top-right of the Experiences and Services icons."
+- "Render the Guest Favorite award lockup: a centered rating number at 52px 700-weight Ink Black, flanked left and right by hand-drawn SVG laurel wreaths at ~48px tall; below, a 12px 700 uppercase `GUEST FAVORITE` label with 0.32px tracking; sub-label at 14px 500 Ash Gray; full-width block sitting directly on white canvas with no container border."
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time.
+2. Reference specific color names and hex codes from this document (e.g., "Ink Black #222222", not "dark gray").
+3. Use natural language descriptions alongside measurements ("subtle three-layer elevation" rather than a long shadow string).
+4. Describe the desired "feel" ("magazine-like, photography-first" vs "dense utility").
+5. Always default to Airbnb Cereal VF 500-weight for body and 600–700 for emphasis — never 400.
+6. Keep Rausch pink scarce — if more than one Rausch-colored element appears per viewport, consider whether one should be neutralized.
+
+### Known Gaps
+- **Homepage listing grid cards**: the main property-card grid (the primary visual surface of airbnb.com) was not fully captured in the extracted homepage screenshots — content loaded only partially. Listing Card specs above are inferred from the Inspiration grid structure and Airbnb's broader conventions; confirm exact aspect ratios and metadata hierarchy against the live site before production use.
+- **Experiences category icons**: the 3D illustrated icons for Homes / Experiences / Services are served as raster assets; their exact source-file specifications (SVG vs PNG, rendered pixel dimensions) are not documented here.
+- **Animation and transition timings**: not captured — static extraction scope.
+- **Dark mode**: Airbnb does not ship a native dark mode in the extracted product surfaces; this document describes the single light-mode theme only.

vibn-frontend/lib/scaffold/open-design/design-systems/airbnb/tokens.css

@@ -0,0 +1,261 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/airbnb/tokens.css
+ *
+ * Structured token bindings for the Airbnb design system — pristine
+ * Canvas White surfaces, a single Rausch coral-pink accent (#ff385c),
+ * generous soft-circle radii, and Airbnb Cereal VF as the lone type
+ * family. The system reads like a travel magazine that happens to be
+ * an app: the interface disappears so the listings can breathe.
+ *
+ * This file pre-compiles the values described in `DESIGN.md` into the
+ * schema shared with every OD design system. Agents should paste the
+ * `:root { … }` block verbatim into the first `<style>` of an 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 and --surface both resolve to Canvas White
+ *              (#ffffff). Airbnb cards sit directly on the page
+ *              without a tonal step; separation comes from the
+ *              Hairline Gray (--border) edge and from the
+ *              photograph inside the card, never from a surface
+ *              tint (§4 Listing Card).
+ *
+ *   #Bind 2  — --surface-warm binds to Soft Cloud (#f7f7f7), the
+ *              brand-named subsurface tier used for footers, map
+ *              wrappers, and the calendar's middle-of-range dates.
+ *              A real value rather than `var(--surface)` because
+ *              Airbnb publishes a distinct tier here (§2 Surface).
+ *
+ *   #Bind 3  — --accent-hover and --accent-active are hand-picked,
+ *              NOT formula-derived. DESIGN.md §2 publishes Deep
+ *              Rausch (#e00b41) as the pressed/active state.
+ *              color-mix would overshoot that saturation and
+ *              under-shoot the brand's gradient terminal stop,
+ *              so we hand-bind both states.
+ *
+ *   #Bind 4  — Radius scale concentrates on the brand's signature
+ *              soft-circle geometry: 8px for buttons/inputs, 14px
+ *              for listing cards (the workhorse), 20px for the
+ *              booking panel and hero photo frames, 9999px for
+ *              the circular icon buttons and avatars that
+ *              punctuate every surface (§5 Border Radius Scale).
+ *
+ *   #Bind 5  — --elev-raised encodes Airbnb's signature three-
+ *              layer booking-panel shadow verbatim — a 2% hairline
+ *              ring, a 4% short blur, and a 10% medium blur. The
+ *              brand forbids single drop shadows; this stacked
+ *              triple is what gives the booking panel its premium
+ *              anti-aliased perimeter (§6 Depth & Elevation).
+ *
+ *   #Bind 6  — --focus-ring is 2px solid Ink Black (#222222), NOT
+ *              the schema's accent-tinted default. DESIGN.md §6
+ *              mandates this specific ring so focus reads cleanly
+ *              against full-bleed colorful photography — a Rausch
+ *              ring would disappear against warm sunset shots or
+ *              sea-blue overlays. Pair with the 4px white
+ *              separator ring at circular buttons floating on
+ *              images.
+ *
+ *   #Bind 7  — --leading-body is 1.43 (generous). Airbnb pairs
+ *              tight display leading (1.18–1.25) with notably
+ *              open body leading; that two-mode rhythm is why
+ *              the system reads as a travel magazine rather than
+ *              a utility app (§3 Principles).
+ *
+ * Brand-specific extensions: none in this revision. The Plus
+ * Magenta (#92174d) and Luxe Purple (#460479) product-tier accents
+ * called out in DESIGN.md §2 stay inline at the tier-specific
+ * components that need them; promoting them to schema slots would
+ * encourage non-tier surfaces to reach for them.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels) ────────────────────────────────────────
+   * Canvas White is both the page and the card — Airbnb refuses a
+   * tonal shift between the two. Cards earn their edges from the
+   * Hairline Gray border and from full-bleed photography. The
+   * tertiary tier (--surface-warm) is Soft Cloud, used only for
+   * footer backgrounds, map-view wrappers, and middle-of-range
+   * date cells in the date picker. */
+  --bg: #ffffff;
+  --surface: #ffffff;
+  --surface-warm: #f7f7f7;
+
+  /* ─── Foreground ramp (4 levels) ────────────────────────────────
+   * Ink Black (#222222) carries roughly ninety percent of every
+   * page — every heading, every body paragraph, every nav label,
+   * every price. The brand's near-black is never true #000000.
+   * Charcoal (--fg-2) is a one-step-down emphasis tier reserved
+   * for focused-input text. Ash Gray (--muted) is the secondary
+   * label — "Cottage rentals" subtitles, muted footer links.
+   * Mute Gray (--meta) is reserved for disabled buttons and
+   * low-priority metadata. */
+  --fg: #222222;
+  --fg-2: #3f3f3f;
+  --muted: #6a6a6a;
+  --meta: #929292;
+
+  /* ─── Border (2 levels) ─────────────────────────────────────────
+   * Hairline Gray (#dddddd) is the workhorse — every card-to-card
+   * divider, every amenity-row separator, every footer-column
+   * rule. The soft tier is a lighter hairline used to break up
+   * dense list interiors without competing with the primary card
+   * edge. */
+  --border: #dddddd;
+  --border-soft: #ebebeb;
+
+  /* ─── Accent ────────────────────────────────────────────────────
+   * Rausch coral-pink — the single signature color. Reserve for
+   * primary CTAs (Reserve, Search, Add dates), the active-tab
+   * underline, the wishlist heart fill, and price emphasis. Hard
+   * cap of two visible uses per viewport; if a third Rausch
+   * element shows up, neutralize one. Plus Magenta (#92174d) and
+   * Luxe Purple (#460479) are kept inline at their product-tier
+   * surfaces, not promoted to shared accent slots. */
+  --accent: #ff385c;
+  --accent-on: #ffffff;
+  --accent-hover: #e31c5f;       /* hand-picked, between Rausch and Deep Rausch */
+  --accent-active: #e00b41;      /* Deep Rausch — DESIGN.md §2 pressed-state value */
+
+  /* ─── Semantic ──────────────────────────────────────────────────
+   * Error Red is explicit from DESIGN.md §2; success and warn are
+   * not specified by the brand and are bound to desaturated values
+   * that survive the white canvas without competing with Rausch.
+   * Keep total semantic-color pixels well under five percent of
+   * any page — the brand almost never renders status. */
+  --success: #008a05;            /* hand-picked warm green — available/in-stock */
+  --warn: #c47700;               /* burnt amber — never tailwind yellow */
+  --danger: #c13515;             /* DESIGN.md §2 Error Red */
+
+  /* ─── Typography — fonts ────────────────────────────────────────
+   * Airbnb Cereal VF is the proprietary face that carries every
+   * label from 8px superscript to 28px section heading. The
+   * documented fallback chain renders acceptably on macOS/iOS
+   * where system-ui resolves to San Francisco. Display and body
+   * share the same stack — the visual identity comes from the
+   * family itself, never from typeface mixing. Mono is a generic
+   * stack for kbd, tabular metrics, and the rare code label. */
+  --font-display:
+    "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
+    -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+  --font-body:
+    "Airbnb Cereal VF", "Airbnb Cereal App", Circular,
+    -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco,
+    Consolas, monospace;
+
+  /* ─── Typography — type scale (px) ──────────────────────────────
+   * Derived from DESIGN.md §3 Hierarchy table. The system clusters
+   * tightly between 11 and 22px (the conversational range) and
+   * jumps to 28px for section headings; the higher tiers are used
+   * sparingly for the Guest Favorite rating lockup (44–56px) and
+   * the rare hero numeral. No 400-regular: Cereal's body weight
+   * is 500, which any consuming component should set explicitly. */
+  --text-xs: 12px;               /* micro / footer disclaimer */
+  --text-sm: 14px;               /* button default, link, caption */
+  --text-base: 16px;             /* body medium, button large, subtitle bold */
+  --text-lg: 20px;               /* listing title */
+  --text-xl: 22px;               /* subsection heading */
+  --text-2xl: 28px;              /* section heading */
+  --text-3xl: 44px;              /* Guest Favorite rating, hero numeral */
+  --text-4xl: 56px;              /* display ceiling — Guest Favorite max */
+
+  /* ─── Typography — leading & tracking ───────────────────────────
+   * Tight for display (1.20 — chiseled headlines), generous for
+   * body (1.43 — magazine reading comfort). Display tracking
+   * compresses negatively at sizes ≥20px; body and caption hold
+   * at zero. The two-mode rhythm is what gives Airbnb pages
+   * their travel-magazine feel rather than a utility-app feel. */
+  --leading-body: 1.43;
+  --leading-tight: 1.2;
+  --tracking-display: -0.02em;   /* applied at sizes ≥20px only */
+
+  /* ─── Spacing — base scale ──────────────────────────────────────
+   * 8px base unit per DESIGN.md §5. The brand uses fine-grained
+   * off-grid values (5.5, 10, 11, 18.5, 22) for pixel-perfect
+   * icon alignment, but 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 ranges 48–64px on desktop, 24–32px on mobile
+   * per DESIGN.md §5. We bind the upper bound on desktop because
+   * Airbnb's content-dense pages benefit from generous breathing
+   * room between content blocks; the lower phone bound keeps the
+   * vertical rhythm tight on small screens. */
+  --section-y-desktop: 64px;
+  --section-y-tablet: 48px;
+  --section-y-phone: 32px;
+
+  /* ─── Radius ────────────────────────────────────────────────────
+   * The brand's signature soft-circle geometry. 14px (--radius-md)
+   * is the workhorse — every listing card photograph, every
+   * amenity badge, every generic content container lands here.
+   * 20px (--radius-lg) is reserved for the booking panel and hero
+   * photo frames; 8px (--radius-sm) is the small radius for
+   * buttons, dropdowns, and inputs; --radius-pill (9999px) is the
+   * system's signature round geometry, applied to every circular
+   * icon button, every avatar, and the wishlist heart. */
+  --radius-sm: 8px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ─────────────────────────────────────────────────
+   * Airbnb forbids single drop shadows; the system uses stacked
+   * layered shadows or no shadow at all. Listing cards sit flat
+   * on the canvas. Booking panels, modals, and dropdowns use the
+   * signature three-layer stack — a 2% hairline ring, a 4% short
+   * blur, and a 10% medium blur — which reads as one cohesive
+   * lift while giving the perimeter a premium anti-aliased edge. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    rgba(0, 0, 0, 0.02) 0 0 0 1px,
+    rgba(0, 0, 0, 0.04) 0 2px 6px 0,
+    rgba(0, 0, 0, 0.1) 0 4px 8px 0;
+
+  /* ─── Focus ring ────────────────────────────────────────────────
+   * 2px solid Ink Black, NOT the schema's accent-tinted default.
+   * DESIGN.md §6 mandates this exact treatment so focus indicators
+   * read cleanly against full-bleed colorful photography — a
+   * Rausch-tinted ring would disappear against warm sunset shots
+   * or sea-blue beach overlays. Pair with a 4px white separator
+   * ring at circular-icon buttons that float on images. */
+  --focus-ring: 0 0 0 2px var(--fg);
+
+  /* ─── Motion ────────────────────────────────────────────────────
+   * DESIGN.md did not capture transition timings (static
+   * extraction scope). We bind defaults consistent with the
+   * brand's tactile feel: 150ms for micro-states (the famous
+   * `transform: scale(0.92)` pressed-button rebound) and 200ms
+   * for general state changes. Standard easing is the schema
+   * default — short, purposeful, no overshoot. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ────────────────────────────────────────────────────
+   * Detail pages cap at 1280px per DESIGN.md §5; the homepage
+   * listing grid lets the canvas breathe to 1760–1920px on
+   * ultra-wide. We bind the detail-page width as the shared
+   * default because that is the geometry agents will most often
+   * generate (rooms, experiences, host profiles). Gutters
+   * tighten progressively: 40px desktop, 24px tablet, 16px
+   * phone per DESIGN.md §8 small-mobile clause. */
+  --container-max: 1280px;
+  --container-gutter-desktop: 40px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/airtable/DESIGN.md

@@ -0,0 +1,92 @@
+# Design System Inspired by Airtable
+
+> Category: Design & Creative
+> Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
+
+## 1. Visual Theme & Atmosphere
+
+Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
+
+**Key Characteristics:**
+- White canvas with deep navy text (`#181d26`)
+- Airtable Blue (`#1b61c9`) as primary CTA and link color
+- Haas + Haas Groot Disp dual font system
+- Positive letter-spacing on body text (0.08px–0.28px)
+- 12px radius buttons, 16px–32px for cards
+- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
+- Semantic theme tokens: `--theme_*` CSS variable naming
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Deep Navy** (`#181d26`): Primary text
+- **Airtable Blue** (`#1b61c9`): CTA buttons, links
+- **White** (`#ffffff`): Primary surface
+- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
+
+### Semantic
+- **Success Green** (`#006400`): `--theme_success-text`
+- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
+- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
+
+### Neutral
+- **Dark Gray** (`#333333`): Secondary text
+- **Mid Blue** (`#254fad`): Link/accent blue variant
+- **Border** (`#e0e2e6`): Card borders
+- **Light Surface** (`#f8fafc`): Subtle surface
+
+### Shadows
+- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
+- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
+- **Display**: `Haas Groot Disp`, fallback: `Haas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Haas | 48px | 400 | 1.15 | normal |
+| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
+| Section Heading | Haas | 40px | 400 | 1.25 | normal |
+| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
+| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
+| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
+| Body | Haas | 18px | 400 | 1.35 | 0.18px |
+| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
+| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
+| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
+- **White**: white bg, `#181d26` text, 12px radius, 1px border white
+- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
+
+### Cards: `1px solid #e0e2e6`, 16px–24px radius
+### Inputs: Standard Haas styling
+
+## 5. Layout
+- Spacing: 1–48px (8px base)
+- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
+
+## 6. Depth
+- Blue-tinted multi-layer shadow system
+- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
+
+## 7. Do's and Don'ts
+### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
+### Don't: Skip positive letter-spacing, use heavy shadows
+
+## 8. Responsive Behavior
+Breakpoints: 425–1664px (23 breakpoints)
+
+## 9. Agent Prompt Guide
+- Text: Deep Navy (`#181d26`)
+- CTA: Airtable Blue (`#1b61c9`)
+- Background: White (`#ffffff`)
+- Border: `#e0e2e6`

vibn-frontend/lib/scaffold/open-design/design-systems/ant/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Ant
+
+> Category: Professional & Corporate
+> Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
+
+## 1. Visual Theme & Atmosphere
+
+Structured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
+
+- **Visual style:** data-dense, enterprise
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#1677FF` — 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 (#1677FF) 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=Plus Jakarta Sans, display=Plus Jakarta Sans, 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 `#1677FF`; 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 (#1677FF) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/apple/DESIGN.md

@@ -0,0 +1,250 @@
+# Design System Inspired by Apple
+
+> Category: Media & Consumer
+> Consumer electronics. Premium white space, SF Pro, cinematic imagery.
+
+## 1. Visual Theme & Atmosphere
+
+Apple's web language is a precision editorial system that alternates between gallery-like calm and retail-density information blocks. The visual tone stays restrained: broad neutral canvases, quiet chrome, and product imagery given almost all of the expressive weight. The interface is engineered to disappear so hardware, materials, and finish options become the narrative foreground.
+
+Across the five analyzed pages, the rhythm is consistent but not monolithic. Marketing surfaces (homepage and Environment) use cinematic black-and-light chaptering, while commerce surfaces (Store and Shop flows) introduce tighter spacing, more utility controls, and denser card stacks without breaking the core brand grammar. The result is one system with two gears: showcase mode and transaction mode.
+
+Typography is the stabilizer. SF Pro Display carries hero and merchandising hierarchy with compact line heights and controlled tracking, while SF Pro Text handles product metadata, navigation, filters, and dense selection UI. The typography stays understated, but the scale range is wide enough to support both billboard hero messaging and micro utility labels.
+
+**Key Characteristics:**
+- Binary section rhythm: deep black scenes (`#000000`) alternating with pale neutral fields (`#f5f5f7`)
+- Single blue accent family for action and link semantics (`#0071e3`, `#0066cc`, `#2997ff`)
+- Dual operating modes in one system: cinematic showcase modules and dense commerce configurators
+- Heavy reliance on imagery and material finishes; UI chrome remains visually thin
+- Tight headline metrics (SF Pro Display, semibold) paired with compact body/link typography (SF Pro Text)
+- Pill and capsule geometry as signature action language (`18px` to `980px` and circular controls)
+- Depth used sparingly; contrast and surface separation do most of the layering work
+- Multi-page color-block rhythm: black hero chapters -> pale neutral merchandising fields -> utility white retail surfaces -> dark micro-surfaces for controls
+
+## 2. Color Palette & Roles
+
+> **Source Pages:** `https://www.apple.com/`, `https://www.apple.com/environment/`, `https://www.apple.com/store`, `https://www.apple.com/shop/buy-iphone/iphone-17-pro`, `https://www.apple.com/shop/accessories/all`
+
+### Primary
+- **Absolute Black** (`#000000`): Immersive hero canvases, high-drama product chapters, deep UI anchors.
+- **Pale Apple Gray** (`#f5f5f7`): Main light surface for feature bands, comparison blocks, and editorial transitions.
+- **Near-Black Ink** (`#1d1d1f`): Primary text and dark-fill control color on light canvases.
+
+### Secondary & Accent
+- **Apple Action Blue** (`#0071e3`): Primary action fill and focus-signaling brand accent.
+- **Body Link Blue** (`#0066cc`): Inline link color optimized for long-form readability.
+- **High-Luminance Link Blue** (`#2997ff`): Bright link treatment on darker scenes where stronger contrast is required.
+
+### Surface & Background
+- **Pure White Canvas** (`#ffffff`): Retail/product-list backgrounds and dense transactional sections.
+- **Graphite Surface A** (`#272729`): Dark card and media-control context layer.
+- **Graphite Surface B** (`#262629`): Slightly deeper dark utility layer for control groupings.
+- **Graphite Surface C** (`#28282b`): Elevated dark supporting surfaces.
+- **Graphite Surface D** (`#2a2a2c`): Darkest elevated step used for separation in richer dark scenes.
+
+### Neutrals & Text
+- **Secondary Neutral Gray** (`#6e6e73`): Body secondary copy, helper descriptions, tertiary metadata.
+- **Soft Border Gray** (`#d2d2d7`): Dividers, subtle outlines, and muted utility containment.
+- **Mid Border Gray** (`#86868b`): Stronger field outlines in product-configuration and filter contexts.
+- **Utility Dark Gray** (`#424245`): Dark-neutral text/surface crossover in store contexts.
+
+### Semantic & Accent
+- **Selection/Focus Signal** (`#0071e3`): Shared focus and selected-state signal across marketing and commerce contexts.
+- **Error/Warning/Success**: No distinct semantic palette was consistently visible in the extracted surface set.
+
+### Gradient System
+- The extracted pages are overwhelmingly solid-surface driven. Visual richness comes from photography and finish rendering rather than persistent UI gradients.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display Family:** `SF Pro Display`, fallbacks `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Text Family:** `SF Pro Text`, fallbacks `SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif`
+- **Usage Split:** Display family handles hero/product headlines and merchandising headings; Text family handles navigation, controls, labels, and dense commerce copy.
+
+### Hierarchy
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Hero Display XL | 80px | 600 | 1.00-1.05 | -1.2px | Environment/store hero scale |
+| Hero Display L | 56px | 600 | 1.07 | -0.28px | Homepage hero moments |
+| Section Display | 48px | 500-600 | 1.08 | -0.144px | Major chapter headings |
+| Product Heading | 40px | 600 | 1.10 | normal | Product and campaign section titles |
+| Feature Display | 38px | 600 | 1.21 | 0.152px | Device and merchandising callouts |
+| Promo Display | 32px | 300-600 | 1.09-1.13 | 0.128px to 0.352px | Module-level sub-heroes |
+| Card/Product Title | 28px | 600 | 1.14 | 0.196px | Tile-level naming and key copy |
+| Utility Heading | 24px | 600 | 1.17 | 0.216px / -0.2px | Configurator and grouped content headers |
+| Link/Action Heading | 21px | 600 | 1.14-1.38 | 0.231px | Larger promotional links |
+| Subhead | 19px | 600 | 1.21 | 0.228px | Compact section intros |
+| Body Primary | 17px | 400 | 1.47 | -0.374px | Standard body and retail descriptions |
+| Body Emphasis | 17px | 600 | 1.24 | -0.374px | Emphasized labels and key values |
+| Control Label | 14px | 400-600 | 1.29-1.47 | -0.224px | Buttons, helper labels, compact nav text |
+| Micro UI | 12px | 400-600 | 1.00-1.33 | -0.12px | Fine print, micro labels |
+| Legal/Meta | 10px | 400 | 1.30-1.47 | -0.08px | Dense metadata and legal support text |
+
+### Principles
+- **Continuity across page types:** The same typographic DNA spans cinematic launches and product-purchase flows, preventing a brand split between marketing and commerce.
+- **Compression at scale:** Display tiers use tight leading and controlled tracking to feel machined and product-first.
+- **Readable density at retail depth:** SF Pro Text balances compactness with enough vertical rhythm for long product lists and option matrices.
+- **Measured weight ladder:** 600 is the dominant emphasis weight; 700 appears selectively; 300 is used sparingly for contrast in larger lines.
+
+### Note on Font Substitutes
+- Closest freely available substitutes: `Inter` for text-heavy implementation and `SF Pro Display-like` metrics approximated with `Inter Tight` for headings.
+- When substituting, increase line-height slightly (+0.02 to +0.06) on body sizes and reduce negative tracking intensity to preserve readability.
+
+## 4. Component Stylings
+
+### Buttons
+- **Primary Fill Action:** `#0071e3` background, `#ffffff` text, 8px radius, compact horizontal padding (commonly 8px 15px). Used for decisive purchase/progression actions.
+- **Dark Fill Action:** `#1d1d1f` background, `#ffffff` text, 8px radius. Used when light surfaces need a restrained high-contrast primary.
+- **Pill/Capsule Action Family:** large capsule actions at `18px`-`56px` radii and extreme pill links at `980px`. Establishes Apple’s soft but precise call-to-action silhouette.
+- **Utility Filter/Button Shells:** light shells (`#fafafc` or translucent white) with subtle gray borders (`#d2d2d7` / `#86868b`) for dense configuration contexts.
+- **Pressed Behavior:** active controls commonly reduce scale or shift fill slightly to indicate physical press confirmation.
+
+### Cards & Containers
+- **Editorial/Product Cards:** light cards on `#f5f5f7` or white fields with minimal framing and image-first composition.
+- **Dark Utility Cards:** graphite steps (`#272729` to `#2a2a2c`) used for overlays, media controls, and dark-context modules.
+- **Configurator Panels:** rounded containers (often 12px-18px) with clear but restrained border definition.
+- **Carousel/Spotlight Modules:** larger rounded shells (`28px`-`36px`) for featured content lanes.
+
+### Inputs & Forms
+- **Retail Input Fields:** translucent or white backgrounds, dark text (`#1d1d1f`), border-led containment (`#86868b`).
+- **Selection Controls:** circular/toggle-like control geometry appears frequently in product selection interfaces.
+- **Density Strategy:** form fields remain visually quiet to keep device imagery and pricing hierarchy dominant.
+
+### Navigation
+- **Global Marketing Nav:** compact dark translucent bar with small-type links and restrained iconography.
+- **Store/Sub-shop Nav Layers:** additional utility bars, chips, and segmented controls for category and product narrowing.
+- **Link Hierarchy:** link blues remain the primary interactive signal while neutral text supports dense navigation sets.
+
+### Image Treatment
+- **Object-First Photography:** hardware and accessories are foregrounded on controlled solid surfaces.
+- **High-fidelity finish rendering:** reflective/material details are central to visual persuasion.
+- **Mixed framing:** full-bleed hero scenes coexist with rounded retail cards and tightly cropped merchandising thumbnails.
+
+### Other Distinctive Components
+- **Product Configurator Matrix:** option stacks and selectors combining chips, radio-style controls, and contextual pricing/summary blocks.
+- **Carousel Control Dots/Arrows:** circular control vocabulary in muted overlays for gallery progression.
+- **Environment Story Panels:** narrative chapters that blend editorial typography with cinematic product/environment visuals.
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit is effectively `8px`, but the system supports dense micro-steps for precision alignment.
+- Frequently reused spacing values across pages: `2`, `4`, `6`, `7`, `8`, `9`, `10`, `12`, `14`, `17`, `20` px.
+- Universal rhythm constants visible across both marketing and retail flows: `8px` unit scaffolding with `14-20px` utility intervals for component padding and list spacing.
+
+### Grid & Container
+- **Showcase pages:** large central columns with broad horizontal breathing room and full-width color chapters.
+- **Commerce pages:** tighter multi-column product and control grids with frequent modular stacking.
+- **Container behavior:** constrained readable core with generous outer margins at desktop widths.
+
+### Whitespace Philosophy
+- **Scene pacing:** major visual chapters use broad top/bottom breathing room.
+- **Information compaction where needed:** retail pages deliberately compress spacing to expose more actionable information per viewport.
+- **Contrast-led separation:** section transitions rely more on surface changes than decorative separators.
+
+### Border Radius Scale
+- **5px:** tiny utility links/tags and minor small shells.
+- **8px-12px:** standard controls and compact fields.
+- **16px-18px:** cards, module frames, and commerce panels.
+- **28px-36px:** larger module and spotlight containers.
+- **56px / 100px / 980px:** capsules, large pills, and signature elongated CTA forms.
+- **50%:** circular media and selection controls.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|------|-----------|-----|
+| Level 0 | Flat neutral surfaces (`#ffffff`, `#f5f5f7`, `#000000`) | Main narrative and product stages |
+| Level 1 | Subtle border containment (`#d2d2d7`, `#86868b`) | Filters, input fields, utility cards |
+| Level 2 | Soft shadow (`rgba(0,0,0,0.08)` to `rgba(0,0,0,0.22)` where present) | Highlighted cards and elevated merchandise modules |
+| Level 3 | Dark-surface stepping (`#272729` -> `#2a2a2c`) | Overlays, media controls, dark utility clusters |
+| Accessibility | Blue focus signal (`#0071e3`) | Keyboard and selection emphasis |
+
+Depth is intentionally restrained. Apple favors tonal contrast, surface stepping, and compositional hierarchy over heavy shadow stacks.
+
+### Decorative Depth
+- Decorative depth is primarily created by photographic realism and material rendering, not synthetic UI effects.
+- Translucent overlays and glass-like utility bars provide mild atmospheric layering in navigation and controls.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the neutral triad (`#000000`, `#f5f5f7`, `#ffffff`) as the structural foundation.
+- Reserve blue accents for genuine action and navigation semantics.
+- Keep typography tight and deliberate, especially at display scales.
+- Maintain the capsule/circle geometry language for controls and key actions.
+- Let product imagery carry visual drama; keep chrome understated.
+- Use border-led containment in dense retail contexts instead of heavy card ornamentation.
+- Preserve clear separation between showcase modules and transactional modules while keeping core tokens shared.
+
+### Don't
+- Don’t introduce broad secondary accent palettes that compete with Apple blue.
+- Don’t overuse shadows, glow effects, or decorative gradients in core UI chrome.
+- Don’t mix unrelated font families or loosen tracking indiscriminately.
+- Don’t flatten all corners to a single radius; Apple uses purposeful radius tiers.
+- Don’t overload commerce modules with thick borders or loud visual effects.
+- Don’t remove neutral contrast cadence between dark and light chapters.
+- Don’t treat marketing and purchase flows as separate design systems.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | 374px and below | Tightened retail controls, single-column product stacks |
+| Mobile | 375px-640px | One-column modules, compact action rows, condensed selectors |
+| Tablet | 641px-833px | Expanded cards and mixed 1-2 column transitions |
+| Tablet Wide | 834px-1023px | More stable multi-column merchandising, larger text blocks |
+| Desktop | 1024px-1240px | Full retail layouts and product comparison structures |
+| Desktop Wide | 1241px-1440px | Marketing hero expansion and broader section spacing |
+| Large Desktop | 1441px+ | Maximum chapter breathing room and wide editorial composition |
+
+### Touch Targets
+- Primary and secondary actions are generally presented in tap-friendly pill/button geometries.
+- Circular media and selection controls align with minimum touchable intent in mobile contexts.
+- Dense commerce UI uses compact labels but maintains clear hit regions via surrounding shape padding.
+
+### Collapsing Strategy
+- Marketing hero typography scales down in discrete tiers while preserving hierarchy contrast.
+- Product and commerce grids collapse from multi-column to stacked cards with persistent selector visibility.
+- Utility navigation compresses into simpler link/control groupings while preserving key actions.
+- Option/configuration clusters become vertically sequenced to keep purchase flow linear on small screens.
+
+### Image Behavior
+- Product imagery preserves aspect and centrality through breakpoints.
+- Hero visuals remain dominant on mobile, with text repositioned around media priority.
+- Retail thumbnails stay legible via tighter crop logic and denser card stacking.
+- Image-led modules continue to anchor the rhythm as layout density increases.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary action blue: **Apple Action Blue** (`#0071e3`)
+- Inline link blue: **Body Link Blue** (`#0066cc`)
+- Dark chapter canvas: **Absolute Black** (`#000000`)
+- Light chapter canvas: **Pale Apple Gray** (`#f5f5f7`)
+- Primary text on light: **Near-Black Ink** (`#1d1d1f`)
+- Secondary text: **Secondary Neutral Gray** (`#6e6e73`)
+- Retail border soft: **Soft Border Gray** (`#d2d2d7`)
+- Retail border strong: **Mid Border Gray** (`#86868b`)
+
+### Example Component Prompts
+- "Design an Apple-style product hero on a black canvas (`#000000`) with SF Pro Display semibold headline (48-56px), concise supporting copy, and two capsule CTAs using `#0071e3` and `#1d1d1f`."
+- "Create a commerce configuration panel on white (`#ffffff`) with 18px rounded cards, `#86868b` border fields, SF Pro Text 17px body copy, and compact option selectors."
+- "Build a merchandising card grid alternating `#f5f5f7` and white surfaces, with image-first cards, restrained shadows, and 14-17px SF Pro Text metadata."
+- "Generate a carousel control cluster using circular buttons (50% radius), muted gray overlays, and clear active feedback for gallery navigation."
+- "Compose a mixed marketing + retail page rhythm: dark showcase chapter -> light feature chapter -> dense product list module while keeping blue accents only for actions and links."
+
+### Iteration Guide
+1. Lock the neutral foundation first (`#000000`, `#f5f5f7`, `#ffffff`) before tuning accents.
+2. Keep blue accents scarce and purposeful; if everything is blue, hierarchy collapses.
+3. Tune typography in this order: display scale, body readability, then micro labels.
+4. Match radius by component class (field, card, capsule, circle) rather than one-size-fits-all rounding.
+5. Increase density gradually when moving from showcase sections to commerce sections.
+6. Validate that product imagery remains the strongest visual layer after each revision.
+
+### Known Gaps
+- Distinct semantic status colors (error/warning/success) were not consistently visible in the extracted page set.
+- Some interaction micro-states vary by module and are not represented as universal system tokens.
+- A few retail modules expose context-specific typography overrides that do not appear across all five pages.

vibn-frontend/lib/scaffold/open-design/design-systems/apple/components.html

@@ -0,0 +1,749 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Apple — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/apple. Every visible
+        token comes from tokens.css; the page itself follows Apple's
+        editorial rules — pale-gray feature ladder over white, single
+        Apple Action Blue accent capped at ≤2 visible uses per screen,
+        SF Pro display at compressed tracking, and the signature 980px
+        capsule CTA."
+    />
+
+    <style>
+      /* :root paste — sourced verbatim from
+         design-systems/apple/tokens.css. Keep this block in sync
+         when tokens.css changes. The agent prompt instructs the
+         Designer panelist to paste this block as the FIRST thing in
+         their <style>, then reference everything below via var(...). */
+      :root {
+        --bg: #ffffff;
+        --surface: #f5f5f7;
+        --surface-warm: #fbfbfd;
+
+        --fg: #1d1d1f;
+        --fg-2: #424245;
+        --muted: #6e6e73;
+        --meta: #86868b;
+
+        --border: #d2d2d7;
+        --border-soft: #e8e8ed;
+
+        --accent: #0071e3;
+        --accent-on: #ffffff;
+        --accent-hover: #0077ed;
+        --accent-active: #0066cc;
+
+        --success: #16a34a;
+        --warn:    #eab308;
+        --danger:  #dc2626;
+
+        --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;
+
+        --text-xs:   12px;
+        --text-sm:   14px;
+        --text-base: 17px;
+        --text-lg:   21px;
+        --text-xl:   28px;
+        --text-2xl:  40px;
+        --text-3xl:  56px;
+        --text-4xl:  80px;
+
+        --leading-body:  1.47;
+        --leading-tight: 1.05;
+
+        --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: 100px;
+        --section-y-tablet:  64px;
+        --section-y-phone:   40px;
+
+        --radius-sm:   8px;
+        --radius-md:   12px;
+        --radius-lg:   18px;
+        --radius-pill: 980px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 12px 32px rgba(0, 0, 0, 0.08);
+
+        --focus-ring: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 65%);
+
+        --motion-fast:   150ms;
+        --motion-base:   220ms;
+        --ease-standard: cubic-bezier(0.28, 0, 0.22, 1);
+
+        --container-max:            1024px;
+        --container-gutter-desktop: 22px;
+        --container-gutter-tablet:  18px;
+        --container-gutter-phone:   16px;
+      }
+
+      /* ─── Reset (minimal) ───────────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        font-weight: 400;
+        letter-spacing: -0.022em; /* SF Pro Text body, per DESIGN.md §3 */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      /* ─── Layout primitives ─────────────────────────────────────── */
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section {
+        padding-block: var(--section-y-desktop);
+      }
+      /* Apple uses surface contrast, not borders, to separate chapters
+         (DESIGN.md §5 — "section transitions rely more on surface
+         changes than decorative separators"). The .band-* helpers
+         below switch the chapter canvas while the container stays
+         constant. */
+      .band-light { background: var(--bg); color: var(--fg); }
+      .band-soft  { background: var(--surface); color: var(--fg); }
+      .band-warm  { background: var(--surface-warm); color: var(--fg); }
+      @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); }
+      }
+
+      /* ─── Typography ────────────────────────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        margin: 0;
+        color: var(--fg);
+      }
+      /* DESIGN.md §3 — Hero Display L (56px / 600 / 1.07). We set
+         tracking via the display token so all hero copy compresses
+         consistently. */
+      h1 {
+        font-size: var(--text-3xl);
+        font-weight: 600;
+        line-height: var(--leading-tight);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-2xl);
+        font-weight: 600;
+        line-height: 1.1;
+        letter-spacing: var(--tracking-display);
+      }
+      h3 {
+        font-size: var(--text-xl);
+        font-weight: 600;
+        line-height: 1.14;
+        letter-spacing: -0.007em; /* DESIGN.md §3 — Card/Product Title */
+      }
+      p { margin: 0; }
+
+      .lead {
+        font-size: var(--text-lg);
+        line-height: 1.38;
+        color: var(--fg-2);
+        font-weight: 400;
+        letter-spacing: -0.011em;
+      }
+      .body-muted { color: var(--muted); }
+      .body-meta  { color: var(--meta); font-size: var(--text-sm); }
+      .body-sm    { font-size: var(--text-sm); }
+
+      /* `.eyebrow` — small uppercase label above hero / section heads.
+         DESIGN.md §3 has no eyebrow row in the hierarchy table; this
+         is the agreed pattern for OD reference fixtures and uses the
+         12px micro-UI tier with positive tracking so the rule reads
+         as deliberate. */
+      .eyebrow {
+        font-family: var(--font-display);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        line-height: 1;
+        color: var(--accent);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ─────────────────────────────────────────────────
+       * Apple's CTA family is split across two silhouettes:
+       *   - .btn-pill / .btn-pill-secondary  — the signature 980px
+       *     capsule used on every marketing hero and product page.
+       *   - .btn / .btn-primary / .btn-secondary — the 8/12px-radius
+       *     compact controls used in commerce / configurator
+       *     surfaces where the capsule would feel too marketing-y.
+       *
+       * Both share base sizing (8/15px padding per DESIGN.md §4) and
+       * the focus halo. Hover lifts the blue (--accent-hover) rather
+       * than darkens it — Apple's documented behaviour. Press scales
+       * the button down 2% per DESIGN.md §4 ("active controls
+       * commonly reduce scale to indicate physical press"). */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 8px 16px;
+        border: 1px solid transparent;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-body);
+        font-weight: 500;
+        font-size: var(--text-sm);
+        line-height: 1.2;
+        cursor: pointer;
+        text-decoration: none;
+        transition:
+          background-color var(--motion-fast) var(--ease-standard),
+          border-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:active { transform: scale(0.98); }
+
+      .btn-primary {
+        background: var(--accent);
+        color: var(--accent-on);
+      }
+      .btn-primary:hover  { background: var(--accent-hover); }
+      .btn-primary:active { background: var(--accent-active); }
+
+      .btn-secondary {
+        background: transparent;
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      .btn-secondary:hover {
+        background: var(--surface);
+        border-color: var(--meta);
+      }
+
+      /* The Apple capsule. --radius-pill is bound to 980px in tokens
+         (the literal published Apple value); the geometry is the
+         brand signature and earns its own component. */
+      .btn-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 12px 22px;
+        border: none;
+        border-radius: var(--radius-pill);
+        font-family: var(--font-body);
+        font-weight: 400;
+        font-size: var(--text-base);
+        line-height: 1.2;
+        letter-spacing: -0.005em;
+        cursor: pointer;
+        text-decoration: none;
+        background: var(--accent);
+        color: var(--accent-on);
+        transition:
+          background-color var(--motion-fast) var(--ease-standard),
+          transform        var(--motion-fast) var(--ease-standard),
+          box-shadow       var(--motion-fast) var(--ease-standard);
+      }
+      .btn-pill:hover  { background: var(--accent-hover); }
+      .btn-pill:active { background: var(--accent-active); transform: scale(0.98); }
+      .btn-pill:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+      .btn-pill-secondary {
+        background: transparent;
+        color: var(--accent);
+        box-shadow: var(--elev-ring);
+      }
+      .btn-pill-secondary:hover {
+        background: var(--surface);
+        color: var(--accent-hover);
+      }
+      .btn-pill-secondary:active {
+        color: var(--accent-active);
+        transform: scale(0.98);
+      }
+
+      /* ─── Inputs ────────────────────────────────────────────────
+       * Apple's retail inputs are border-led rather than fill-led —
+       * a hairline #d2d2d7 box on white, dark text, the focus halo
+       * tightens the border to --accent and adds the blue glow.
+       * Density stays quiet so device imagery dominates. */
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+      .field label {
+        font-size: var(--text-sm);
+        font-weight: 500;
+        color: var(--fg);
+        letter-spacing: -0.016em;
+      }
+      .field input {
+        padding: 12px 14px;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: 1.2;
+        outline: none;
+        transition:
+          border-color var(--motion-fast) var(--ease-standard),
+          box-shadow   var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field input:hover { border-color: var(--meta); }
+      .field input:focus-visible {
+        border-color: var(--accent);
+        box-shadow: var(--focus-ring);
+      }
+      .field-help {
+        font-size: var(--text-xs);
+        color: var(--muted);
+      }
+
+      /* ─── Cards ─────────────────────────────────────────────────
+       * Two intents:
+       *   - .card           plain editorial / product card. Lives on
+       *                     pale gray (--surface) bands; lifts to
+       *                     white (--bg) with a hairline. No shadow
+       *                     by default — surface contrast does the
+       *                     work.
+       *   - .card-feature   featured spotlight. Squircle 18px
+       *                     (--radius-lg), the soft Apple shadow on
+       *                     hover. Used sparingly — one per band. */
+      .card {
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-lg);
+        padding: var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        transition: box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .card:hover {
+        box-shadow: var(--elev-raised);
+      }
+      .card-feature {
+        background: var(--surface-warm);
+        border: 1px solid var(--border-soft);
+        border-radius: var(--radius-lg);
+        padding: var(--space-8) var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        box-shadow: var(--elev-raised);
+      }
+
+      /* ─── Badges ──────────────────────────────────────────────── */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 4px var(--space-3);
+        border-radius: var(--radius-pill);
+        font-family: var(--font-body);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        line-height: 1.4;
+        letter-spacing: -0.01em;
+      }
+      .badge-success {
+        color: var(--success);
+        background: color-mix(in oklab, var(--success), transparent 90%);
+      }
+      .badge-muted {
+        color: var(--muted);
+        background: color-mix(in oklab, var(--muted), transparent 88%);
+      }
+      .badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      /* ─── Links ─────────────────────────────────────────────────
+       * Apple's link tone uses Body Link Blue (#0066cc, our
+       * --accent-active) for inline reading, with the chevron-arrow
+       * suffix on call-to-action links. The base color is --accent
+       * for buttons / nav; here we re-bind for the inline reading
+       * tone via --accent-active. */
+      a {
+        color: var(--accent-active);
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      /* ─── Kbd ─────────────────────────────────────────────────── */
+      kbd {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        padding: 2px 6px;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--bg);
+        color: var(--fg-2);
+      }
+
+      /* ─── Distinctive: glass nav strip ──────────────────────────
+       * DESIGN.md §4 — "Global Marketing Nav: compact dark translucent
+       * bar with small-type links and restrained iconography." We
+       * implement the light counterpart: a frosted white strip with
+       * backdrop-blur, hairline bottom border, and SF Pro Text 14px
+       * link tier. The blur is what gives Apple chrome its signature
+       * "atmospheric layering" (DESIGN.md §6). */
+      .nav {
+        position: sticky;
+        top: 0;
+        z-index: 10;
+        background: color-mix(in oklab, var(--bg), transparent 20%);
+        -webkit-backdrop-filter: saturate(180%) blur(20px);
+        backdrop-filter:         saturate(180%) blur(20px);
+        border-bottom: 1px solid var(--border-soft);
+      }
+      .nav-inner {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+        height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-6);
+      }
+      .nav-brand {
+        font-family: var(--font-display);
+        font-size: var(--text-base);
+        font-weight: 500;
+        color: var(--fg);
+        letter-spacing: -0.011em;
+      }
+      .nav-links {
+        display: flex;
+        gap: var(--space-6);
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .nav-links a {
+        font-size: var(--text-sm);
+        font-weight: 400;
+        color: var(--fg);
+        letter-spacing: -0.016em;
+        opacity: 0.8;
+        transition: opacity var(--motion-fast) var(--ease-standard);
+      }
+      .nav-links a:hover {
+        opacity: 1;
+        text-decoration: none;
+      }
+      @media (max-width: 639px) {
+        .nav-inner { gap: var(--space-3); padding-inline: var(--container-gutter-phone); }
+        .nav-links { gap: var(--space-4); }
+      }
+
+      /* ─── Section-specific layout ───────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.3fr 1fr;
+        gap: var(--space-12);
+        align-items: end;
+      }
+      @media (max-width: 1023px) {
+        .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
+      }
+      .hero-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-3);
+        margin-block-start: var(--space-6);
+      }
+      .hero-meta {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        padding: var(--space-5);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--bg);
+      }
+      .features-grid {
+        display: grid;
+        grid-template-columns: 1.3fr 1fr 1fr;
+        gap: var(--space-5);
+      }
+      @media (max-width: 1023px) {
+        .features-grid { grid-template-columns: 1fr 1fr; }
+        .features-grid > :first-child { grid-column: span 2; }
+      }
+      @media (max-width: 639px) {
+        .features-grid { grid-template-columns: 1fr; }
+        .features-grid > :first-child { grid-column: auto; }
+      }
+      .form-row {
+        display: grid;
+        grid-template-columns: 1.3fr 1fr;
+        gap: var(--space-12);
+        align-items: start;
+      }
+      @media (max-width: 1023px) {
+        .form-row { grid-template-columns: 1fr; gap: var(--space-8); }
+      }
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        max-width: 420px;
+      }
+      .form-actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-3);
+        margin-block-start: var(--space-2);
+      }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+      .row-between {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-3);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ════════════════════════════════════════════════════════════
+         NAV — Apple's distinctive frosted-glass strip. Sticky to top,
+         44px tall, SF Pro Text 14px links at 0.8 opacity that
+         brighten on hover. Backdrop saturate + blur is what gives
+         Apple chrome its atmospheric layering (DESIGN.md §6).
+    ═══════════════════════════════════════════════════════════════ -->
+    <header class="nav" data-od-id="nav">
+      <div class="nav-inner">
+        <span class="nav-brand">Apple</span>
+        <nav aria-label="Primary">
+          <ul class="nav-links">
+            <li><a href="#hero">Tokens</a></li>
+            <li><a href="#features">System</a></li>
+            <li><a href="#form">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <!-- ════════════════════════════════════════════════════════════
+           HERO — exercises: h1 (56px display, tracking -0.015em),
+           .lead, .eyebrow, .btn-pill (the signature 980px capsule)
+           paired with .btn-pill-secondary (ring-edge counterpart),
+           kbd, .badge-success. Asymmetric grid (1.3:1) so the
+           composition doesn't read as a generic centered template.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section class="band-light" data-od-id="hero" id="hero">
+        <div class="container">
+          <div class="hero-grid">
+            <div class="stack-4">
+              <p class="eyebrow">Reference fixture · Apple</p>
+              <h1>Quiet chrome. Loud product. One token block.</h1>
+              <p class="lead" style="max-width: 52ch">
+                The interface engineered to disappear, distilled into
+                fifty-six tokens. Pale-gray feature ladder over white,
+                a single Apple Action Blue, SF Pro at compressed
+                tracking, and the 980-pixel capsule that has carried
+                every Buy button for a decade.
+              </p>
+              <div class="hero-actions">
+                <a href="./tokens.css" class="btn-pill">
+                  View tokens
+                  <svg
+                    class="icon"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.75"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M5 12h14M13 6l6 6-6 6" />
+                  </svg>
+                </a>
+                <a href="./DESIGN.md" class="btn-pill btn-pill-secondary">
+                  Read the spec
+                </a>
+              </div>
+            </div>
+
+            <aside class="hero-meta" aria-label="System status">
+              <div class="row-between">
+                <span class="body-sm">System status</span>
+                <span class="badge badge-success">
+                  <span class="badge-dot" aria-hidden="true"></span>
+                  Stable
+                </span>
+              </div>
+              <p class="body-sm body-muted">
+                Last reviewed
+                <time datetime="2026-05-14">2026-05-14</time> · v0.1
+              </p>
+              <p class="body-sm body-muted">
+                Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
+              </p>
+            </aside>
+          </div>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FEATURES — band switches to pale Apple gray (--surface),
+           cards lift back to white with a hairline. The first card
+           is .card-feature (squircle, soft Apple shadow), the next
+           two are plain .card. Each card describes a real property
+           of this fixture (no "feature one/two/three" filler).
+      ═══════════════════════════════════════════════════════════════ -->
+      <section class="band-soft" data-od-id="features" id="features">
+        <div class="container">
+          <div class="stack-3" style="max-width: 720px">
+            <p class="eyebrow">What this fixture exercises</p>
+            <h2>Every component below uses only var(--*).</h2>
+            <p class="lead body-muted">
+              Three cards, three real schema decisions worth
+              inspecting. Rebind the token block and the same shapes
+              follow.
+            </p>
+          </div>
+
+          <div class="features-grid" style="margin-block-start: var(--space-12)">
+            <article class="card-feature">
+              <p class="eyebrow">Featured</p>
+              <h3>Surface ladder, three stops, no aliasing.</h3>
+              <p class="body-muted">
+                Pure white retail canvas, near-white bridge, pale
+                Apple gray feature band. Apple's three light tiers
+                are real, so we keep --surface-warm independent of
+                --surface instead of collapsing it. Cards on the
+                gray band lift back to white with a hairline.
+              </p>
+              <div>
+                <a href="./tokens.css" class="btn btn-secondary">
+                  Inspect tokens
+                </a>
+              </div>
+            </article>
+
+            <article class="card">
+              <h3>Accent discipline</h3>
+              <p class="body-muted body-sm">
+                --accent appears at most twice on this screen — the
+                primary capsule CTA and the focus halo. The hero
+                status uses --success instead, so the page does not
+                feel mono-blue.
+              </p>
+              <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
+            </article>
+
+            <article class="card">
+              <h3>Type at scale</h3>
+              <p class="body-muted body-sm">
+                SF Pro Display for the hero, SF Pro Text for body and
+                controls, body baseline at 17px (not 16), display
+                tracking compressed to -0.015em. Hierarchy comes from
+                size and weight — never a third type face.
+              </p>
+              <a href="./tokens.css" class="body-sm">Inspect typography →</a>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FORM — exercises: .field, input :focus-visible (border
+           tightens to --accent + the 4px blue halo), .btn-primary
+           (the compact 8px-radius commerce CTA), .btn-secondary
+           (border-led counterpart), .field-help. Band switches to
+           the warm near-white tier so the form reads as a quiet
+           transactional surface, not a hero.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section class="band-warm" data-od-id="form" id="form">
+        <div class="container">
+          <div class="form-row">
+            <div class="stack-4">
+              <p class="eyebrow">Form components</p>
+              <h2>Inputs inherit the same tokens.</h2>
+              <p class="lead body-muted" style="max-width: 48ch">
+                Border-led containment, dark Near-Black Ink text, the
+                focus halo at four pixels of soft Apple Action Blue.
+                The submit button reuses the compact .btn-primary —
+                no new token introduced for this section.
+              </p>
+            </div>
+
+            <form class="form" onsubmit="event.preventDefault();">
+              <div class="field">
+                <label for="email">Apple ID email</label>
+                <input
+                  id="email"
+                  type="email"
+                  placeholder="you@icloud.com"
+                  autocomplete="email"
+                  required
+                />
+                <p class="field-help">
+                  We'll send the spec PDF and nothing else.
+                </p>
+              </div>
+              <div class="form-actions">
+                <button type="submit" class="btn btn-primary">
+                  Send the spec
+                </button>
+                <button type="button" class="btn btn-secondary">
+                  Skip for now
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/apple/tokens.css

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

vibn-frontend/lib/scaffold/open-design/design-systems/application/DESIGN.md

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

vibn-frontend/lib/scaffold/open-design/design-systems/arc/DESIGN.md

@@ -0,0 +1,152 @@
+# Design System Inspired by Arc Browser
+
+> Category: Productivity & SaaS
+> "The browser that browses for you." Translucent surfaces, gradient warmth, sidebar-first layout.
+
+## 1. Visual Theme & Atmosphere
+
+Arc Browser dissolves the boundary between the chrome and the page. Where Chrome and Safari treat the browser frame as a container, Arc treats it as scenery — the toolbar fades into the system wallpaper, the sidebar carries gradient warmth from the user's chosen "theme color", and translucency is everywhere. The visual signature is **frosted glass plus a single saturated gradient** — most often a peach-to-coral or violet-to-fuchsia bloom — that sets the emotional temperature of the entire window.
+
+Typography uses **Inter** for chrome and a custom display serif (`Argent CF` or similar) for marketing — when Arc speaks publicly it speaks editorially, in a serif voice unusual for tech. The product itself is sans-only, with tight tracking and generous line-height.
+
+Shapes are squircle-soft: 12–16px radii on cards, 8px on tabs, 9999px pills for tags. Borders are rare — Arc prefers tinted background washes (`rgba(255, 255, 255, 0.5)` over the gradient) to delineate panes.
+
+**Key Characteristics:**
+- Translucent frosted-glass surfaces over a saturated gradient background
+- Theme-color gradients (peach-coral, violet-fuchsia, mint-cyan) as the primary mood
+- Inter for product chrome, Argent CF (serif) for marketing display
+- Squircle-soft 12–16px radii everywhere
+- Sidebar-first layout: tabs, spaces, and bookmarks live on the left, not the top
+- Color picker is a brand surface — themes are user-driven, not fixed
+- Subtle shadows (`0 8px 32px rgba(0,0,0,0.08)`) over the gradient backdrop
+
+## 2. Color Palette & Roles
+
+### Primary Theme Gradients (User-selectable; default is "Sunset")
+- **Sunset Start** (`#ff7e5f`): Peach gradient origin.
+- **Sunset End** (`#feb47b`): Soft coral gradient terminus.
+- **Twilight Start** (`#7f5af0`): Violet gradient origin.
+- **Twilight End** (`#e84393`): Fuchsia gradient terminus.
+- **Aurora Start** (`#16f2b3`): Mint gradient origin.
+- **Aurora End** (`#0db4f7`): Cyan gradient terminus.
+
+### Surface (Frosted)
+- **Glass Light** (`rgba(255, 255, 255, 0.7)`): Standard frosted pane over gradient.
+- **Glass Medium** (`rgba(255, 255, 255, 0.5)`): Hover state, tab pill background.
+- **Glass Heavy** (`rgba(255, 255, 255, 0.85)`): Active pane, command bar.
+- **Glass Dark** (`rgba(20, 20, 25, 0.6)`): Dark-mode frosted surface.
+
+### Ink & Text
+- **Ink Primary** (`#1a1a1f`): Primary text on light frosted surface.
+- **Ink Secondary** (`#54545a`): Secondary text, tab title at rest.
+- **Ink Muted** (`#8c8c93`): Tertiary, captions, URL bar.
+- **Ink Inverse** (`#fafafa`): Text on dark frosted surface.
+
+### Border & Divider
+- **Border Glass** (`rgba(255, 255, 255, 0.4)`): Frosted-edge border.
+- **Border Hairline** (`rgba(0, 0, 0, 0.06)`): Hairline divider on light surface.
+- **Border Active** (`rgba(0, 0, 0, 0.18)`): Active tab outline.
+
+### Brand Accent
+- **Arc Coral** (`#ff5f5f`): Default brand color — used in marketing, `arc.net`.
+- **Arc Lavender** (`#b794f4`): Secondary brand accent.
+
+### Semantic
+- **Success** (`#48bb78`): Toast confirmation.
+- **Warning** (`#f6ad55`): Permission prompt.
+- **Error** (`#f56565`): Form validation.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / Marketing**: `Argent CF`, with fallback: `'Source Serif Pro', Georgia, serif`
+- **Body / UI**: `Inter`, with fallback: `system-ui, -apple-system, BlinkMacSystemFont, sans-serif`
+- **Code / Mono**: `Berkeley Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Marketing Hero | Argent CF | 72px (4.5rem) | 400 | 1.05 | -0.03em | Editorial display, marketing only |
+| Section Heading | Argent CF | 40px (2.5rem) | 400 | 1.15 | -0.02em | Marketing section titles |
+| Page H1 | Inter | 32px (2rem) | 700 | 1.2 | -0.02em | Settings, command bar header |
+| Page H2 | Inter | 22px (1.375rem) | 600 | 1.25 | -0.01em | Sub-section |
+| Tab Title | Inter | 13px (0.8125rem) | 500 | 1.3 | -0.005em | Sidebar tab label |
+| Body | Inter | 15px (0.9375rem) | 400 | 1.55 | normal | Settings prose, tooltips |
+| Caption | Inter | 12px (0.75rem) | 500 | 1.4 | 0.01em | URL bar protocol, metadata |
+| Code | Berkeley Mono | 13px (0.8125rem) | 400 | 1.5 | normal | URL bar, devtools |
+
+### Principles
+- **Serif moments are rare**: Argent CF appears only in marketing. The product is sans-only.
+- **Title size is small**: tabs render at 13px so a long sidebar of 30+ tabs stays scannable.
+- **Tracking tightens with size**: -0.03em at 72px, returning to normal by 15px.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Filled)**
+- Background: linear-gradient on theme color (e.g., `linear-gradient(135deg, #ff7e5f, #feb47b)`)
+- Text: `#ffffff`
+- Padding: 10px 20px
+- Radius: 12px
+- Shadow: `0 4px 16px rgba(255, 127, 95, 0.3)`
+- Hover: shadow grows to `0 8px 24px rgba(255, 127, 95, 0.4)`
+
+**Glass (Secondary)**
+- Background: `rgba(255, 255, 255, 0.7)`
+- Backdrop: `blur(20px)`
+- Text: `#1a1a1f`
+- Border: 1px solid `rgba(255, 255, 255, 0.4)`
+- Padding: 10px 20px
+- Radius: 12px
+
+**Subtle**
+- Background: transparent
+- Text: theme color
+- Hover: background `rgba(255, 127, 95, 0.1)`
+
+### Tabs (Sidebar)
+- Background at rest: transparent
+- Background on hover: `rgba(255, 255, 255, 0.5)`
+- Background active: `rgba(255, 255, 255, 0.85)` + soft shadow
+- Padding: 8px 12px
+- Radius: 8px
+- Favicon: 16px square at left, 8px gap to title.
+
+### Cards / Panes
+- Background: `rgba(255, 255, 255, 0.7)`
+- Backdrop: `blur(24px)` saturate 180%
+- Border: 1px solid `rgba(255, 255, 255, 0.4)`
+- Radius: 16px
+- Shadow: `0 8px 32px rgba(0, 0, 0, 0.08)`
+- Padding: 24px
+
+### Inputs (Command Bar)
+- Background: `rgba(255, 255, 255, 0.85)`
+- Backdrop: `blur(40px)`
+- Text: `#1a1a1f`
+- Border: 1px solid `rgba(255, 255, 255, 0.4)`
+- Radius: 14px
+- Padding: 14px 18px
+- Focus: shadow `0 0 0 4px rgba(255, 127, 95, 0.2)`
+
+### Pills (Spaces / Bookmarks Folder)
+- Background: theme color at 16% alpha
+- Text: theme color (full)
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 12px / 600
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
+- **Sidebar**: 240px wide; collapsible to 56px.
+- **Window radius**: 12px on the OS window itself (macOS-only flourish).
+- **Padding inside panes**: 24px.
+
+## 6. Motion
+
+- **Duration**: 200ms for hover; 320ms for tab create/close; 480ms for "Little Arc" window expand.
+- **Easing**: `cubic-bezier(0.32, 0.72, 0, 1)` for window expand (Apple's spring-style).
+- **Tab swap**: 1px translate + opacity blend, no scale change.

vibn-frontend/lib/scaffold/open-design/design-systems/artistic/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Artistic
+
+> Category: Creative & Artistic
+> High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
+
+## 1. Visual Theme & Atmosphere
+
+High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
+
+- **Visual style:** high-contrast, artistic
+- **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=Limelight, display=Limelight, 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.

vibn-frontend/lib/scaffold/open-design/design-systems/atelier-zero/DESIGN.md

@@ -0,0 +1,316 @@
+# Atelier Zero
+
+> Category: Editorial · Studio
+> A magazine-grade, collage-driven visual system: warm paper canvas, surreal
+> plaster-and-architecture imagery, oversized display type, hairline rules,
+> Roman-numeral section markers, and tiny editorial annotations.
+> Inspired by the production values of high-end print magazines (Monocle,
+> Apartamento, IDEA) translated into a working website.
+
+## 1. Visual Theme & Atmosphere
+
+A small, high-craft studio's annual report rendered as a webpage. The
+canvas is warm handmade paper. Every surface earns its lines. Type does
+the heavy lifting; collage imagery does the storytelling. Coral provides
+the only spark of warmth; mustard, olive, and bone are quiet
+companions. The page feels printed, slightly aged, and intentionally
+restrained — never noisy, never neon.
+
+- **Visual style:** editorial, collage, museum-catalog calm.
+- **Posture:** asymmetric, generous, top-biased.
+- **Reading rhythm:** Roman numerals (I, II, III…) walk the reader
+  through the page like chapters in a printed essay.
+- **Mood:** intelligent, tactile, slightly poetic, unmistakably
+  international.
+
+### Print production references
+
+The three magazines are not interchangeable inspiration — each owns a
+specific dimension of the system. When a brief asks "shift it closer to
+X", consult this map before changing tokens:
+
+- **Monocle:** warm paper stock (`#efe7d2`), tight body leading (~1.55),
+  monospace coordinates and SHA stamps, the international metadata
+  strip ("Filed under …"), the small ★ in the nav.
+- **Apartamento:** surreal collage composition (plaster + architecture
+  + small human figure), torn-edge textures inside the imagery, the
+  rotated side notes, and the willingness to leave generous negative
+  space around an image.
+- **IDEA:** Roman-numeral section walks (I → VIII), oversized
+  italic-serif words mixed inline with bold sans (Playfair Italic 500
+  inside Inter Tight 800), hairline rules threading through method
+  steps, the closing mega-word footer.
+
+## 2. Color
+
+All values are tokens. Do not invent new hex.
+
+- **Paper:** `#efe7d2` — primary background, warm ivory.
+- **Paper-warm:** `#ece4cf` — second-tier surface tint.
+- **Paper-dark:** `#ddd2b6` — subtle wells, cards on cards.
+- **Bone:** `#f7f1de` — elevated card surface (always on Paper).
+- **Ink:** `#15140f` — body text, primary buttons, strong rules.
+- **Ink-soft:** `#2a2620` — secondary text, dense paragraphs.
+- **Ink-mute:** `#5a5448` — captions, lab descriptions.
+- **Ink-faint:** `#8b8676` — coordinates, page numbers, microcopy.
+- **Coral (accent):** `#ed6f5c` — single hot accent. CTA fills,
+  Roman-numeral marks, eyebrow underlines, pulse dots, "fin." marks.
+- **Coral-soft:** `#f08e7c` — hover/secondary coral states only.
+- **Mustard:** `#e9b94a` — used sparingly: a single ★ in the nav, a
+  highlighted ring in stats, occasional dot on a numbered annotation.
+- **Olive:** `#6e7448` — quiet third accent for tags or partner glyphs.
+
+### Color rules
+
+- One **coral** moment per ~600vh. If two CTAs are coral, the
+  Roman numerals should be ink-faint instead.
+- Mustard is never used for a CTA. It is jewelry.
+- Pure white (`#fff`) only inside the dark "selected work" panel as
+  inverse text. Never on Paper.
+- Pure black is forbidden. The darkest value is `Ink #15140f`.
+
+### Why single-accent (not multi-accent)
+
+Multi-accent editorial systems (e.g. *The New Yorker* using red for
+Opinion and teal for Culture) work when the publication has stable
+content categories and a long-term reader who learns the code. A
+single-shot studio landing page does not have that runway. One coral
+moment per ~600vh forces the agent to pick the single most important
+beat per viewport instead of balancing two chromatic hierarchies, and
+keeps the page calibrated to the warm-paper canvas. Mustard and olive
+exist as **jewelry** (≤1% surface area: a star, a dot, a partner glyph)
+— never as semantic signals, and never as CTA fills.
+
+### Surface noise
+
+Every page MUST overlay a faint paper noise texture using a fixed,
+pointer-events-disabled `::before` pseudo-element with a
+multiply-blend SVG turbulence at ~5–7% opacity, plus two soft
+radial gradients in `rgba(106, 92, 56, 0.06)` to simulate
+hand-pressed paper warmth.
+
+## 3. Typography
+
+### Families
+
+- **Display / sans:** `Inter Tight` 700–900 weights — headlines, section
+  titles, button text. Letter-spacing `-0.025em` to `-0.04em` at
+  display sizes.
+- **Italic emphasis / serif:** `Playfair Display` Italic, weight 500.
+  Used inline inside display headlines on emphasized nouns, on Roman
+  numerals, on testimonial quotes, on the brand mark `Ø`.
+- **Body:** `Inter` 300–500 — paragraph copy, lab descriptions.
+- **Mono:** `JetBrains Mono` 400–500 — code spans, coordinates,
+  SHAs, plate numbers ("FIG. 01 / OD-26").
+
+### Scale (px)
+
+`9.5 · 10.5 · 11 · 13 · 14 · 16 · 17 · 22 · 26 · 38 · 54 · 66 · 78 · 90 · 200`
+
+### Headline construction
+
+Display headlines mix **bold sans** and **italic serif** in the same
+line. The serif italic carries the emotional words; the sans carries
+the structure. End every section H1/H2 with a coral period — `<span
+class="dot">.</span>`.
+
+```
+Designing intelligence with skills, taste, and code.
+^^^^^^^^^                ^^^^^^^^  ^^^^^      ^^^^
+sans bold                serif italic         coral dot
+```
+
+### Microcopy
+
+- **Eyebrow / label:** 11px Inter Tight 600, `letter-spacing: 0.22em`,
+  uppercase, coral, prefixed with an 18px coral hairline.
+- **Coordinates:** 10px JetBrains Mono, `letter-spacing: 0.04em`,
+  ink-faint, e.g. `52.5200° N · 13.4050° E`.
+- **Page-of-pages:** `004 / 008` in Inter Tight 11px ink-faint.
+- **Roman numerals:** Playfair Italic 14px, coral, `I.` `II.` `III.` etc.
+  at the head of every section rule.
+
+## 4. Spacing & Grid
+
+- **Container:** max-width `1360px`, side padding `64px` desktop,
+  `44px` at ≤1280, `32px` at ≤1080, `24px` at ≤880.
+- **Section padding:** `130px` top+bottom desktop, `90px` for
+  tight sections, `80px` ≤560.
+- **Grid:** 12-column conceptual, executed as CSS Grid with
+  task-specific column ratios. Hero is `0.78fr 1.22fr`.
+- **Vertical rhythm:** 8px baseline. Allow 32–48px between
+  paragraph blocks.
+- **Side rails:** Two 36px-wide fixed vertical strips on the left and
+  right edges of the viewport, each containing a single rotated
+  text label in 10px Inter Tight 600 letter-spaced 0.42em.
+
+## 5. Layout & Composition
+
+- **Top metadata strip** is mandatory: a single horizontal bar above
+  the nav containing the volume/issue, a "Filed under …" badge, and a
+  live-status pulse with version + locale. Inter Tight 10.5px,
+  ink-faint, 1px ink-line border-bottom.
+- **Section rule** is mandatory at the top of every section:
+  `[Roman.] · [meta middle] · [page-of-008]`.
+- **Image annotations**: every featured image carries 4 corner
+  brackets (1px hairlines, 22×22), at least 1 plate number
+  ("Plate Nº 08"), and a coordinate or SHA.
+- **Hero must extend above the fold** at 1440×900 minimum. The image
+  fills the viewport vertically (`calc(100vh - 160px)`), aligned to
+  the right edge.
+- **Method sections** must use a 4-step layout with a horizontal
+  hairline running through the step heads at the same Y, with
+  `→` separators between titles.
+
+## 6. Components
+
+### Buttons
+
+- **Primary:** coral fill `#ed6f5c`, white label, `999px` radius,
+  `14px 22px` padding, with a white arrow `↗` SVG at 14px and a
+  coral 0,14,26,-16 rgba shadow.
+- **Ghost:** transparent, `1px solid rgba(21,20,15,0.2)` border,
+  ink label, same radius and padding.
+
+### Cards
+
+- **Bone-fill cards** (`#f7f1de`), 18px radius, 28×26 padding,
+  inset 1px ink-at-6% ring + 30/60/-30/15 ambient shadow.
+- Each card has a `01–04` italic serif num plus a tag eyebrow on
+  the same row.
+- A bottom-right 28px circular arrow mark turns coral on hover.
+
+### Pill filters
+
+- 10×18 padding, 999px, `1px solid line` border, transparent.
+- Active state: coral fill, white label, count separator opacity 0.7.
+
+### Stat rings
+
+- 32–34px circular dashed rings carrying a 2-digit number; one ring
+  per row may be coral-stroked to denote the highlighted stat.
+
+### Page numbers / index card
+
+- Hero artwork carries a small bordered card on the right edge with
+  `01–04` index entries. The current entry uses bold ink; the rest
+  ink-faint. Each item prefixes the digit with a coral `01` token.
+
+### Side rails
+
+- Fixed 36px vertical strips at left + right edges, hidden below
+  1280px. Each contains rotated 10px Inter Tight uppercase text
+  letter-spaced 0.42em, never wraps.
+
+### Roman section rules
+
+Every section opens with a `.sec-rule`: top hairline 1px, then a
+flex row containing `[Roman]`, a centered metadata cluster, and
+the page-of-008 counter on the right.
+
+## 7. Motion & Interaction
+
+- **Pulse dot:** 6×6 coral circle at top metadata bar and footer,
+  `pulse 2.4s ease-in-out infinite` between 1.0 and 0.35 opacity.
+- **Card hover:** translateY(-3px), arrow mark fills coral.
+- **Button hover:** translateY(-1px), darker coral fill.
+- **Pill hover:** ink-at-4% wash.
+- **Transitions:** `0.18s ease` everywhere; never longer than `0.25s`.
+- **No parallax, no scroll-jacking, no auto-rotators.** Editorial
+  pages do not animate themselves at the user.
+
+## 8. Voice & Brand
+
+- Headlines mix declarative and italicized emotional words.
+- Body copy is plain-spoken and specific. Quote real numbers
+  (12 / 31 / 72), real coordinates (52.5200° N · 13.4050° E),
+  real commands (`pnpm tools-dev`).
+- Microcopy uses publication metaphors: "Filed under", "Plate Nº",
+  "Vol. 01 / Issue Nº 26", "FIN.", "MMXXVI", "Edited by".
+- Latin numerals — Roman for sections, Arabic for stats.
+
+## 9. Anti-patterns
+
+- ❌ No drop shadows above 30px blur. No gradients on text.
+- ❌ No emoji in product copy. ★ is allowed once in the nav CTA.
+- ❌ No glassmorphism, no neon, no neumorphism, no rounded
+  corners larger than 24px (except 32px on the dark "Selected Work" panel).
+- ❌ No more than one coral CTA per viewport.
+- ❌ No collage image without corner brackets and at least one
+  monospace annotation.
+- ❌ No Roman numeral skipped — sections must be sequential.
+- ❌ No pure white, no pure black, no pure 100%-saturation accent.
+
+### Anti-patterns specific to AI-generated imagery
+
+This system is paired with `gpt-image-fal` / `gpt-image-azure` via the
+open-design-landing skill. Several common image-model defaults will
+silently break the Atelier Zero aesthetic, so they are forbidden in
+every collage prompt and rejected on visual review:
+
+- ❌ No lens flares, light leaks, bloom, or cinematic post-FX. The
+  paper-and-museum mood is matte, not cinematic.
+- ❌ No glitch, datamosh, RGB-split, or scanline artifacts.
+- ❌ No photorealistic human faces or stock-portrait people. Plaster
+  fragments, busts, and small scale figures only — eyes never look at
+  the viewer.
+- ❌ No visible AI signatures, watermarks, generator logos, or
+  hallucinated model captions. The rendered surface must read as a
+  printed page, not a model output.
+- ❌ No DSLR-style shallow depth-of-field bokeh on the collage
+  fragments — every plane stays in focus.
+
+## 10. Responsive Behavior
+
+- **Desktop ≥ 1280px:** full container, two side rails visible,
+  metadata strip shows all three columns.
+- **Laptop 1080–1279px:** side rails hidden, container 32–44px
+  padding, metadata strip's middle column collapses.
+- **Tablet 880–1079px:** hero / about / capabilities / testimonial
+  / cta grids collapse to 1 column at 50px gap. Method becomes 2×2,
+  the connecting hairline is removed. Nav links + brand-meta hide;
+  brand-mark + CTA remain.
+- **Phone < 560px:** all multi-column grids become 1 col;
+  section padding drops to 80px.
+
+## 11. Imagery
+
+This system is collage-first. Every page-level image must be
+generated to match these constraints:
+
+- **Background:** warm ivory paper with subtle grain, faint vertical
+  folds, drafting registration marks.
+- **Subject:** classical plaster head fragments, brutalist concrete
+  blocks, archways, stairs, tree, sky cutouts, one small human figure.
+- **Color overlay:** restrained — cream, stone, charcoal, washed
+  coral, occasional mustard, pale-blue inside small sky cutouts.
+- **Annotations baked in:** thin hairline circles, crosshairs,
+  dotted matrices, numbered tags. Never typography that conflicts
+  with on-page copy.
+
+See `skills/open-design-landing/assets/imagegen-prompts.md` for the
+working prompt pack and per-section variants. All renders should be
+at 16:9 (heroes) or 1:1 (cards / about / cta), saved as PNG, ≥1024px
+on the long edge.
+
+## 12. Agent Prompt Guide
+
+When generating against this design system:
+
+- The page is a **printed magazine** that happens to deploy. Lean
+  into print metaphors before web metaphors.
+- Always include the metadata strip, the side rails, the Roman
+  section rules, and a footer with a giant `Open Design.` (or brand)
+  word at clamp(70px, 13vw, 200px).
+- Coral is a single character on stage. If you find yourself
+  reaching for a second coral element in the same viewport, use
+  ink-faint or mustard instead.
+- Italic serif words inside display headlines should always be
+  emotional nouns: *intelligence*, *taste*, *memorable*, *open*,
+  *visually*. Never verbs, never adjectives.
+- If asked for "more dramatic," the lever is **typography size**
+  (clamp top to 90–110px) and **image height** (push to 100vh - nav).
+  Do not reach for color.
+- If asked for "more minimal," remove decorative side notes and
+  reduce annotations to one per image — never remove the Roman
+  rules or the metadata strip.

vibn-frontend/lib/scaffold/open-design/design-systems/bento/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Bento
+
+> Category: Layout & Structure
+> Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
+
+## 1. Visual Theme & Atmosphere
+
+Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
+
+- **Visual style:** modern, 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:** `#FAD4C0` — Token from style foundations.
+- **Secondary:** `#80A1C1` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFF5E6` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFF5E6` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#FAD4C0) for CTA emphasis.
+- Use Surface (#FFF5E6) 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 `#FAD4C0`; 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 (#FAD4C0) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/binance/DESIGN.md

@@ -0,0 +1,348 @@
+# Design System Inspired by Binance.US
+
+> Category: Fintech & Crypto
+> Crypto exchange. Bold yellow accent on monochrome, trading-floor urgency.
+
+## 1. Visual Theme & Atmosphere
+
+Binance.US radiates the polished urgency of a digital trading floor — a space where money moves and decisions happen in seconds. The design is a two-tone composition that alternates between stark white trading surfaces and deep near-black panels (`#222126`), creating a visual rhythm that mirrors the bull-and-bear duality of crypto markets. Binance Yellow (`#F0B90B`) cuts through this monochrome foundation like a gold ingot on a steel desk — unmistakable, confident, and engineered to guide every eye toward the next action.
+
+The interface speaks the language of fintech trust. Custom BinancePlex typography gives every headline and data point a proprietary gravitas, while generous whitespace and restrained decoration keep the focus on numbers, charts, and call-to-action buttons. The design avoids visual complexity in favor of operational clarity — every element exists to either inform or convert. Product screenshots of the mobile trading app dominate the middle sections, presented on floating device mockups against golden gradients, reinforcing that this is a platform you carry with you.
+
+What makes Binance.US distinctive is the tension between warmth and precision. The golden yellow brand color — warm, optimistic, almost celebratory — lives inside a system of cold, clinical grey text and razor-sharp borders. This isn't a playful fintech like Robinhood or a corporate fortress like Fidelity — it's a crypto-native platform that wraps cutting-edge trading technology in the visual language of established finance.
+
+**Key Characteristics:**
+- Two-tone light/dark section alternation — white surfaces for trust, dark panels for depth
+- Binance Yellow (`#F0B90B`) as the singular accent color driving all primary actions
+- BinancePlex custom typeface providing proprietary brand identity at every text level
+- Pill-shaped CTA buttons (50px radius) that demand attention
+- Floating device mockups on golden gradients for product showcasing
+- Crypto price tickers with real-time data prominently displayed
+- Shadow-light elevation with subtle 5% opacity card shadows
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **Binance Yellow** (`#F0B90B`): The signature — primary CTA backgrounds, brand accent, active states, link color. The single most important color in the system
+- **Binance Gold** (`#FFD000`): Lighter gold variant used for pill button borders, secondary CTA fills, and golden gradient highlights
+- **Light Gold** (`#F8D12F`): Soft gold for gradient endpoints and hover-adjacent states
+
+### Secondary & Accent
+
+- **Active Yellow** (`#D0980B`): Darkened yellow for active/pressed button states — the "clicked" gold
+- **Focus Blue** (`#1EAEDB`): Accessibility focus state — appears on hover and focus for all interactive elements
+
+### Surface & Background
+
+- **Pure White** (`#FFFFFF`): Primary page canvas, card surfaces, light section backgrounds
+- **Snow** (`#F5F5F5`): Subtle surface differentiation, input backgrounds, alternating row fills
+- **Binance Dark** (`#222126`): Dark section backgrounds, footer canvas, "Trusted by millions" panel — a near-black with a faint purple undertone
+- **Dark Card** (`#2B2F36`): Card surfaces within dark sections, elevated dark containers
+- **Ink** (`#1E2026`): Button text on yellow backgrounds, deepest text color on light surfaces
+
+### Neutrals & Text
+
+- **Primary Text** (`#1E2026`): Main body text, headings on light backgrounds — near-black with slight warmth
+- **Secondary Text** (`#32313A`): Navigation links, descriptive copy on light surfaces
+- **Slate** (`#848E9C`): Tertiary text, metadata, timestamps, footer links — the workhorse grey
+- **Steel** (`#686A6C`): Disabled-adjacent text, subtle labels
+- **Muted** (`#777E90`): Secondary navigation links, less prominent footer text
+- **Hover Dark** (`#1A1A1A`): Universal link hover color — text darkens on hover
+
+### Semantic & Accent
+
+- **Crypto Green** (`#0ECB81`): Positive price movement, success states, "up" indicators
+- **Crypto Red** (`#F6465D`): Negative price movement, error states, "down" indicators
+- **Border Light** (`#E6E8EA`): Standard card and section borders on light backgrounds
+- **Border Gold** (`#FFD000`): Active/selected state borders, pill button outlines
+
+### Gradient System
+
+- **Golden Glow**: Radial gradient from `#F0B90B` center to `#F8D12F` edge — used behind product mockup screenshots
+- **Dark Fade**: Linear gradient from `#222126` to transparent — used for dark section transitions
+- **Hero Shimmer**: Subtle animated gold gradient on hero section accents
+
+## 3. Typography Rules
+
+### Font Family
+
+**Primary:** BinancePlex (custom proprietary typeface designed by Binance)
+- Fallbacks: Arial, sans-serif
+- Replaced DIN Next to solve multi-language spacing issues
+- Available in weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold)
+
+**System:** system-ui stack for cookie banners and third-party UI
+- Fallbacks: Segoe UI, Roboto, Helvetica, Arial
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display Hero | 60px | 700 | 1.08 | — | Hero headlines, maximum impact |
+| Display Secondary | 34px | 700 | 1.00 | — | Section titles on dark backgrounds |
+| Heading 1 | 28px | 500 | 1.00 | — | Major section headings |
+| Heading 2 | 24px | 700 | 1.00 | — | Feature headings, card titles |
+| Heading 3 | 24px | 600 | 1.00 | — | Subsection headings |
+| Heading 4 | 20px | 600 | 1.25 | — | Card headings, feature labels |
+| Body Large | 20px | 500 | 1.50 | — | Hero subtitle, lead paragraphs |
+| Body | 16px | 500 | 1.50 | — | Standard body text |
+| Body SemiBold | 16px | 600 | 1.30 | — | Emphasized body, nav links |
+| Body Bold | 16px | 700 | 1.50 | — | Strong emphasis text |
+| Button | 16px | 600 | 1.25 | 0.16px | Primary button text |
+| Button Small | 14.4px | 600 | 1.60 | 0.72px | Secondary buttons, wider tracking |
+| Caption | 14px | 500 | 1.43 | — | Metadata, labels, prices |
+| Caption SemiBold | 14px | 600 | 1.50 | — | Emphasized captions |
+| Small | 12px | 600 | 1.00 | — | Tags, badges, fine print |
+| Tiny | 11px | 500 | 1.00 | — | Micro-labels, chart annotations |
+
+### Principles
+
+BinancePlex is engineered for data-dense interfaces where numbers and text must coexist at multiple scales. The typeface has tabular numerals by default — critical for price columns and portfolio values that need perfect vertical alignment. Weights lean toward the heavier end (500-700), giving the interface a sense of authority and confidence that's essential for a financial platform. The tight line-heights (1.00-1.25) on headings create a stacked, compressed feel that mirrors the density of trading dashboards, while body text opens up to 1.50 for comfortable reading of educational and marketing content.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Yellow Fill)**
+- Background: Binance Yellow (`#F0B90B`)
+- Text: Ink (`#1E2026`), 16px/600, BinancePlex
+- Border: none
+- Border radius: slightly rounded (6px)
+- Padding: 6px 32px
+- Hover: shifts to Focus Blue (`#1EAEDB`) with white text
+- Active: darkens to Active Yellow (`#D0980B`)
+- Focus: Focus Blue (`#1EAEDB`) bg, 1px black border, 2px black outline, opacity 0.9
+- Transition: background 200ms ease
+
+**Primary Pill (Gold)**
+- Background: Binance Gold (`#FFD000`)
+- Text: White (`#FFFFFF`)
+- Border: 1px solid `#FFD000`
+- Border radius: full pill (50px)
+- Padding: 10px horizontal
+- Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
+- Hover: shifts to Focus Blue (`#1EAEDB`) with white text
+
+**Secondary (White Outlined)**
+- Background: White (`#FFFFFF`)
+- Text: Binance Yellow (`#F0B90B`)
+- Border: 1px solid `#F0B90B`
+- Border radius: full pill (50px)
+- Padding: 10px horizontal
+- Shadow: `rgb(153,153,153) 0px 2px 10px -3px`
+- Hover: shifts to Focus Blue bg, white text
+
+**Disabled**
+- Background: `#E6E8EA`
+- Text: `#848E9C`
+- Cursor: not-allowed
+
+### Cards & Containers
+
+- Background: White (`#FFFFFF`) on light sections, Dark Card (`#2B2F36`) on dark sections
+- Border: 1px solid `#E6E8EA` on light cards
+- Border radius: medium rounded (12px) for content cards, tight (8px) for data cards
+- Shadow: `rgba(32, 32, 37, 0.05) 0px 3px 5px 0px` — barely visible, trust-building
+- Hover: shadow intensifies to `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px`
+- Transition: box-shadow 200ms ease
+
+### Inputs & Forms
+
+- Background: White (`#FFFFFF`) or Snow (`#F5F5F5`)
+- Text: Ink (`#1E2026`)
+- Border: 1px solid `#E6E8EA`
+- Border radius: 8px
+- Padding: 0px 12px (compact for trading context)
+- Focus: border shifts to black (`#000000`), 1px outline
+- Placeholder: Slate (`#848E9C`)
+- Transition: border-color 200ms ease
+
+### Navigation
+
+- Background: White (`#FFFFFF`), sticky
+- Height: ~64px
+- Left: Binance logo (SVG, yellow mark + dark wordmark)
+- Center/Right: navigation links in 14px/600 BinancePlex, color `#32313A`
+- CTA: Yellow pill button "Get Started" in nav right
+- Hover: links darken to `#1A1A1A`
+- Mobile: hamburger menu, full-height overlay
+- Top: optional promotional banner bar
+
+### Image Treatment
+
+- Product mockups: device frames on golden gradient backgrounds, floating with subtle shadow
+- Hero images: full-width contained within card-like areas with rounded corners (24px)
+- Video sections: 24px radius with embedded player controls
+- App screenshots: dark-themed trading UI shown within phone/tablet bezels
+- Crypto icons: 48px circular with brand colors
+
+### Trust Indicators
+
+- Real-time crypto price ticker (BTC, BNB, SOL with green/red price change)
+- "Trusted by millions" section with statistics on dark background
+- Security badges and regulatory compliance mentions
+- QR code for direct app download in footer
+
+## 5. Layout Principles
+
+### Spacing System
+
+Base unit: 8px
+
+| Token | Value | Use |
+|-------|-------|-----|
+| space-1 | 4px | Tight inline gaps, icon padding |
+| space-2 | 8px | Base unit, button icon gaps, tight margins |
+| space-3 | 12px | Card internal padding, input padding |
+| space-4 | 16px | Standard padding, section margins |
+| space-5 | 20px | Card gaps, medium padding |
+| space-6 | 24px | Section internal padding |
+| space-7 | 32px | Section breaks, large padding |
+| space-8 | 48px | Major section padding |
+| space-9 | 64px | Hero section padding |
+| space-10 | 80px | Large section spacing |
+
+### Grid & Container
+
+- Max container width: 1200px (centered)
+- Hero area: single column with side-by-side text + image above 1024px
+- Feature grid: 3-column on desktop, single column on mobile
+- Product showcase: 2-column (text + device mockup)
+- Horizontal padding: 32px desktop, 16px mobile
+- Grid gap: 24px between feature cards
+
+### Whitespace Philosophy
+
+Binance.US uses whitespace as a trust signal. Generous padding around the hero section and between content blocks creates a sense of spaciousness that counters the information density typically associated with crypto exchanges. The light sections breathe — wide margins around headlines and ample spacing between cards — while dark sections compress, packing features into tighter grids to convey capability and depth. The overall rhythm alternates between "inviting entry" (light, spacious) and "deep functionality" (dark, dense).
+
+### Border Radius Scale
+
+| Value | Context |
+|-------|---------|
+| 1px | Subtle edge softening, fine UI elements |
+| 2px | Close buttons, micro-interactive elements |
+| 6px | Primary buttons (non-pill), small cards |
+| 8px | Form inputs, data cards, image containers |
+| 10px | Navigation pills, tag containers |
+| 12px | Content cards, feature containers |
+| 24px | Video containers, hero imagery, large cards |
+| 50px | Pill buttons (CTA), search inputs, full-round elements |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat | No shadow, solid background | Default for inline elements |
+| Subtle | `rgba(32, 32, 37, 0.05) 0px 3px 5px` | Content cards, resting state |
+| Medium | `rgba(8, 8, 8, 0.05) 0px 3px 5px 5px` | Hovered cards, elevated containers |
+| Pill Shadow | `rgb(153,153,153) 0px 2px 10px -3px` | Pill CTA buttons, floating actions |
+| Heavy | `rgba(0,0,0) 0px 32px 37px` | Modal overlays, dropdown menus |
+
+Binance.US uses a whisper-light shadow system. Card shadows are barely perceptible at 5% opacity — they exist not for dramatic depth but as subtle ground cues that keep cards from feeling pasted onto the surface. The pill button shadow is the exception: slightly more visible to give CTAs a "floating" quality that invites clicks. The philosophy is pragmatic — in a financial context, heavy shadows feel frivolous, while no shadows at all feel flat and untrustworthy. The 5% sweet spot communicates professionalism.
+
+### Decorative Depth
+
+- **Golden gradient backgrounds**: Behind device mockup sections, radial golden glow centered on the product
+- **Dark-to-light section transitions**: Hard cut (no gradient blend) between white and `#222126` sections
+- **Price ticker strip**: Flat, borderless, reads as a data bar rather than a decorative element
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use Binance Yellow (`#F0B90B`) exclusively for primary CTAs and brand accents — it's the single point of color
+- Keep light and dark sections strictly alternating for visual rhythm
+- Use BinancePlex at weight 500+ for all interactive elements — this is a confidence-forward design
+- Apply 50px radius to all primary CTA pill buttons — the signature interactive shape
+- Maintain 12px radius on content cards for a polished but not overly rounded feel
+- Show real-time data prominently (prices, percentages, stats) — numbers build trust
+- Use Slate (`#848E9C`) for all secondary/metadata text — the universal quiet voice
+- Keep shadows at 5% opacity or less — barely there but present
+
+### Don't
+
+- Don't introduce additional brand colors — Binance Yellow is the only accent; all other color is data-driven (green up, red down)
+- Don't use rounded corners above 12px on content cards — only CTAs and video containers go higher
+- Don't add heavy shadows or hover lift effects — this is a restrained financial platform
+- Don't use BinancePlex below weight 500 for headings — lighter weights undermine authority
+- Don't place yellow text on yellow backgrounds — always ensure high contrast pairing
+- Don't mix pill (50px) and square (6px) button styles in the same row
+- Don't soften the dark sections — `#222126` should feel authoritative, not grey
+- Don't use decorative illustrations — imagery should be product screenshots or data visualizations
+- Don't add animation beyond subtle transitions (200ms ease) — financial platforms need stability
+- Don't use colored backgrounds for semantic states in cards — keep cards white or dark, use text color for semantic meaning
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <425px | Single column, stacked hero, hamburger nav, 16px padding |
+| Small Mobile | 425-599px | Wider mobile layout, price ticker wraps |
+| Tablet Small | 600-768px | 2-column feature grid begins |
+| Tablet | 769-896px | Hero side-by-side layout begins |
+| Desktop Small | 897-1024px | Full nav expands, 3-column features |
+| Desktop | 1024-1280px | Full layout, max content width |
+| Large Desktop | 1280-1440px | Increased margins, centered container |
+| XL Desktop | >1440px | Max-width container (1200px) with expanded margins |
+
+### Touch Targets
+
+- Minimum touch target: 44x44px (WCAG AAA)
+- Pill CTA buttons: 48px height minimum
+- Nav links: 44px touch area
+- Crypto ticker items: full-width tappable rows on mobile
+- App download buttons: large tap zones (50px+)
+
+### Collapsing Strategy
+
+- **Navigation**: Full horizontal links → hamburger menu below 897px; logo and "Get Started" CTA remain visible
+- **Hero section**: Side-by-side (text left, image right) → stacked (text top, image below) at 768px
+- **Feature grid**: 3-col → 2-col at 768px → 1-col at 600px
+- **Price ticker**: Horizontal row → wrapping or scrollable at 600px
+- **Section padding**: 64px → 48px → 32px → 16px as viewport narrows
+- **Device mockups**: Scale down proportionally, maintain centered positioning
+- **Footer**: Multi-column → stacked accordion sections on mobile
+
+### Image Behavior
+
+- Device mockups: CSS-scaled with max-width constraints, maintain aspect ratio
+- Hero imagery: contained within rounded containers (24px), scale proportionally
+- App screenshots: responsive width with fixed aspect ratio
+- QR code: fixed 120px square, hidden on mobile (replaced with direct app store links)
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: Binance Yellow (`#F0B90B`)
+- Secondary CTA: Binance Gold (`#FFD000`)
+- Background Light: Pure White (`#FFFFFF`)
+- Background Dark: Binance Dark (`#222126`)
+- Heading text: Ink (`#1E2026`)
+- Body text: Slate (`#848E9C`)
+- Border: Border Light (`#E6E8EA`)
+- Positive: Crypto Green (`#0ECB81`)
+- Negative: Crypto Red (`#F6465D`)
+
+### Example Component Prompts
+
+- "Create a hero section with white background, a 60px/700 bold headline in Ink (#1E2026), a 20px/500 subtitle in Slate (#848E9C), and a Binance Yellow (#F0B90B) pill button (50px radius) with dark text (#1E2026)"
+- "Design a crypto price ticker strip showing BTC, BNB, SOL prices in 14px/600 Ink (#1E2026) with green (#0ECB81) or red (#F6465D) percentage changes, on a white background with #E6E8EA bottom border"
+- "Build a feature card grid (3-column, 24px gap) with 12px radius white cards, subtle shadow (rgba(32,32,37,0.05) 0px 3px 5px), each containing a yellow (#F0B90B) icon, 20px/600 heading, and 14px/500 #848E9C description"
+- "Create a dark section (#222126) with a 34px/700 white headline centered, and a 3-column feature grid using dark cards (#2B2F36) with 12px radius and yellow (#F0B90B) accent icons"
+- "Design a sticky navigation bar with white background, Binance logo left, 14px/600 #32313A nav links center, and a yellow (#F0B90B) pill button (50px radius, 6px padding 32px) labeled 'Get Started' right"
+
+### Iteration Guide
+
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document
+3. Remember: Binance Yellow (#F0B90B) is the ONLY accent color — everything else is grey/dark/white
+4. Use the dark/light section alternation for visual pacing
+5. Numbers and data should be prominent — this is a financial platform
+6. Pill buttons (50px radius) for CTAs, regular buttons (6px radius) for form actions
+7. Keep shadows almost invisible (5% opacity) — trust comes from clarity, not depth
+8. BinancePlex at 600+ weight for any text that needs to feel authoritative

vibn-frontend/lib/scaffold/open-design/design-systems/bmw-m/DESIGN.md

@@ -0,0 +1,246 @@
+# Design System Inspired by BMW M
+
+> Category: Automotive
+> Motorsport performance sub-brand. Near-black cockpit surfaces, BMW M tricolor accents, sharp engineering geometry.
+
+## 1. Visual Theme & Atmosphere
+BMW M's analyzed editorial and marketing pages lean on a near-pure black canvas (`{colors.canvas}` — #000) holding white BMW Type Next Latin headlines in **confident UPPERCASE**. The system has no decorative voltage of its own; brand energy comes from **full-bleed automotive photography** — cars cornering at speed, carbon-fiber wheel detail, driver cockpit shots, motorsport pit lanes — placed as edge-to-edge content that fills entire bands. UI chrome around the photography stays minimal: thin sans-serif copy, dividers as 1px hairlines (`{colors.hairline}`), all-caps button labels with no fill until hovered.
+
+The **M tricolor stripe** — `{colors.m-blue-light}` (#0066b1) → `{colors.m-blue-dark}` (#1c69d4) → `{colors.m-red}` (#e22718) — appears sparingly as the brand's signature accent, used on the M wordmark, motorsport chrome, vehicle-tech callouts, and model badges. It is never a CTA color and never used as a background fill — the tricolor is exclusively a brand-identity marker.
+
+Type voice should stay aligned with the broader BMW family system: BMW Type Next Latin Light carries the large editorial display voice, while BMW Type Next Latin regular carries body and UI text. BMW M can use heavier uppercase weights for buttons, labels, cards, and emphasis, but agents should not treat a 700/300 split as a universal BMW M rule without page-specific evidence.
+
+**Key Characteristics:**
+- Near-pure black canvas (`{colors.canvas}` — #000) with white type across the analyzed editorial and marketing pages. Configurator, account, checkout, and order-management flows are unresolved and may introduce light surfaces.
+- Display headlines use UPPERCASE BMW Type Next Latin Light when following the BMW family system. Heavier uppercase settings are reserved for labels, buttons, card titles, and observed M-specific emphasis.
+- M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) used as 4px brand-stripe dividers, M-wordmark accents, and motorsport chrome — never as buttons or fills.
+- Photography fills entire bands edge-to-edge. Cars are always the visual subject; UI chrome backs off to small white labels overlaid on photography.
+- Buttons are flat with 0px corners and uppercase letterspaced labels. The "industrial precision" rectangular silhouette IS the brand.
+- Border radius is mostly zero across the system. The few exceptions are circular icon buttons such as carousel arrows and any confirmed small toggle pills.
+- Spacing is generous and grid-aligned: `{spacing.section}` (96px) between major bands; `{spacing.xxl}` (64px) inside hero photo bands; `{spacing.xl}` (40px) inside content cards.
+
+## 2. Color Palette & Roles
+### Brand & Accent
+- **Primary** (#ffffff): `{colors.primary}`. The system's primary type and CTA color. Used for h1/h2/h3 display, body text on dark, and primary button labels (the buttons themselves are transparent or canvas-colored — the white text + outline IS the button).
+- **M Blue Light** (#0066b1): `{colors.m-blue-light}`. The first stop in the M tricolor stripe. Used on M-badge accents and motorsport chrome.
+- **M Blue Dark** (#1c69d4): `{colors.m-blue-dark}`. The middle stop and BMW heritage blue value, repurposed as the middle band of the M stripe.
+- **M Red** (#e22718): `{colors.m-red}`. The third stop. The signature M-power red, used in the stripe and on motorsport-pace callouts.
+- **Electric Blue** (#0653b6): `{colors.electric-blue}`. A separate electric-vehicle accent used on M xDrive electric model pages. Distinct from the heritage blue — feels colder, more digital.
+
+### Surface
+- **Canvas** (#000000): `{colors.canvas}`. The default page floor across the analyzed editorial and marketing surfaces. True black.
+- **Surface Soft** (#0d0d0d): `{colors.surface-soft}`. A barely-different-from-black used for spec table cells and footer-adjacent strips.
+- **Surface Card** (#1a1a1a): `{colors.surface-card}`. Cards, secondary buttons, icon-button backgrounds.
+- **Surface Elevated** (#262626): `{colors.surface-elevated}`. One step lighter, used for nested cards inside dark bands.
+- **Carbon Gray** (#2b2b2b): `{colors.carbon-gray}`. Carbon-fiber-inspired surface tone used on technical-spec cards.
+
+### Hairlines & Borders
+- **Hairline** (#3c3c3c): `{colors.hairline}`. The 1px divider tone on dark surfaces. Used between body sections, between table rows, around card outlines.
+- **Hairline Strong** (#262626): `{colors.hairline-strong}`. Same hex as `{colors.surface-elevated}` — borders feel like one-step elevations rather than ink lines.
+
+### Text
+- **Ink / On Dark** (#ffffff): `{colors.on-dark}`. All headline and primary text on dark canvas.
+- **Body** (#bbbbbb): `{colors.body}`. Default running-text color (slightly cooler than pure white). Used for body paragraphs and secondary metadata.
+- **Body Strong** (#e6e6e6): `{colors.body-strong}`. Emphasized body / lead paragraph.
+- **Muted** (#7e7e7e): `{colors.muted}`. Footer links, breadcrumbs, captions.
+
+### Semantic
+- **Warning** (#f4b400): `{colors.warning}`. Used very sparingly on technical-warning callouts.
+- **Success** (#0fa336): `{colors.success}`. Order-confirmation states (rare on marketing surfaces).
+
+## 3. Typography Rules
+### Font Family
+**BMW Type Next Latin** is BMW's licensed display + body typeface. Align fallback guidance with the existing BMW design system: use `BMWTypeNextLatin Light` for display when available, `BMWTypeNextLatin` for body/UI, then `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif`.
+
+Observed BMW M examples can push uppercase labels, buttons, and card titles heavier for a motorsport "stamped" voice, but the family baseline remains:
+- Display: Light (300) for large h1/h2 editorial headlines unless a captured M page clearly uses a heavier static cut
+- Body/UI: regular (400) for paragraphs, descriptive copy, and persistent navigation
+- Emphasis: 700 for buttons, category labels, and card titles; 900 only where navigation emphasis is explicitly observed
+
+The important pattern is contrast and restraint, not a hard 700/300 split. Avoid medium-weight mush: use Light for large display, regular for reading text, and heavier weights only for short UI labels or M-specific emphasis.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xl}` | 80px | 300 Light | 1.0 | 0 | Hero h1 ("THE ULTIMATE", "MORE BMW M.") |
+| `{typography.display-lg}` | 56px | 300 Light | 1.05 | 0 | Section heads ("MORE FROM BMW M MAGAZINE.") |
+| `{typography.display-md}` | 40px | 300 Light / 400 | 1.1 | 0 | Sub-section heads, model names |
+| `{typography.display-sm}` | 32px | 400 | 1.15 | 0 | CTA-band heads, category page titles |
+| `{typography.title-lg}` | 24px | 700 | 1.3 | 0 | Card titles in 3-up grids |
+| `{typography.title-md}` | 20px | 400 | 1.4 | 0 | Card sub-titles, lead paragraphs |
+| `{typography.title-sm}` | 18px | 400 | 1.4 | 0 | Spec callouts, intro paragraphs |
+| `{typography.label-uppercase}` | 14px | 700 | 1.3 | 1.5px | Category tabs, "VIEW MORE" inline labels |
+| `{typography.body-md}` | 16px | 400 | 1.5 | 0 | Default body — BMW Type Next Latin regular |
+| `{typography.body-sm}` | 14px | 400 | 1.5 | 0 | Footer body, cookie consent, fine print |
+| `{typography.caption}` | 12px | 400 | 1.4 | 0.5px | Photo captions, image-credit lines |
+| `{typography.button}` | 14px | 700 | 1.0 | 1.5px | All button labels — uppercase, letterspaced |
+| `{typography.nav-link}` | 14px | 400 | 1.4 | 0.5px | Top-nav menu items |
+
+### Principles
+The system contrasts light, architectural display type against crisp regular body text, then uses heavier weights only for short labels and action chrome. Letter-spacing is non-trivial: button labels and category labels carry 1.5px tracking that makes them feel "machined" rather than "typed." Display headlines stay at 0 letter-spacing — BMW Type's natural cap-height handles spacing on large sizes.
+
+UPPERCASE display is the default voice for h1/h2 — sentence case appears on body and intro paragraphs but rarely on headlines. The all-caps treatment is a brand-voice signal, not a stylistic choice.
+
+### Note on Font Substitutes
+If BMW Type Next Latin is unavailable, **Inter** (variable) at 300/400/700 is the closest open-source substitute. Keep display tracking at 0 unless the chosen fallback looks loose at large sizes. **Saira Condensed** is an alternative for short motorsport labels if a slightly more compressed feel is desired.
+
+## 4. Component Stylings
+### Top Navigation
+
+**`top-nav`** — Black nav bar pinned to the top of every page. 64px tall, `{colors.canvas}` background. Carries the BMW M logo at left (M tricolor + BMW roundel + "M" wordmark), primary horizontal menu (Models, Topics, Magazine, Configurator, Fastlane), right-side cluster with language selector, search icon, account icon. Menu items render in `{typography.nav-link}` with sentence-case labels.
+
+### Buttons
+
+**`button-primary`** — The signature primary CTA. Background `{colors.canvas}` (or transparent over photography), text `{colors.on-dark}` (white), 1px white border outline, 0px radius, padding 16px × 32px, height 48px. Type `{typography.button}` — uppercase 14px / 700 / 1.5px tracking. The rectangular silhouette and uppercase letterspaced label IS the brand button.
+
+**`button-primary-outline`** — Same shape as primary but with transparent background and white outline only. Used over photography where a filled button would clash with the image.
+
+**`button-on-light`** — Tentative pattern for unresolved light-surface contexts such as configurator, account, checkout, or order dialogs. Background `{colors.canvas}`, text `{colors.on-dark}` — black button with white text, inverted from the dark-canvas default. Confirm against the specific flow before treating it as canonical.
+
+**`button-icon`** — Circular icon buttons (carousel controls, share, favorite). 48 × 48px, background `{colors.surface-card}`, white icon centered, full-circle radius. The only non-rectangular button shape in the system.
+
+**`carousel-arrow`** — Specific 48 × 48 circular arrow used in photo carousels. Same shape as `button-icon` with chevron glyph.
+
+**`text-link`** — Inline uppercase letterspaced links ("VIEW ALL MODELS", "READ MORE"). `{typography.label-uppercase}`, white on dark, no underline. The chevron arrow → glyph appears next to most link labels.
+
+### Cards & Containers
+
+**`hero-photo-band`** — Full-width black band with full-bleed automotive photography filling most of the frame. The h1 uses `{typography.display-xl}` and sits left-aligned over the photo, often with a small subtitle in `{typography.body-md}` below. Vertical padding `{spacing.xxl}` (64px). No card frame — the photo IS the band.
+
+**`feature-photo-card`** — Used in 3-up grids for "MORE FROM BMW M MAGAZINE" and similar editorial sections. Background `{colors.surface-card}`, 0px radius, internal padding `{spacing.lg}` (24px). Top half of the card is a 16:9 photo (full-bleed within the card); below the photo, a category tag in `{typography.label-uppercase}`, a `{typography.title-lg}` title, and a short body description.
+
+**`model-card`** — Used in the "MORE NEW M MODELS" 3-up grid. Background `{colors.canvas}` (no card surface — just photo on black), 0px radius. Top: 16:10 hero shot of the model. Below: model name in `{typography.display-md}`, short specs line in `{typography.body-sm}`, a `text-link` ("EXPLORE THIS MODEL").
+
+**`magazine-article-card`** — A more text-forward card variant used on the magazine overview page. Background `{colors.canvas}` with hairline border, 0px radius. Carries a small thumbnail at top, a category label in `{typography.label-uppercase}`, headline in `{typography.title-lg}`, and a body excerpt.
+
+**`spec-cell`** — Technical specification cells used on model-detail pages (engine specs, weight, top speed, 0-100 time). Background `{colors.surface-soft}` (#0d0d0d), 0px radius, padding `{spacing.lg}` (24px). Each cell holds a value in `{typography.display-sm}` at top and a label in `{typography.label-uppercase}` below.
+
+**`motorsport-photo-card`** — Edge-to-edge photo cards used in the racing-team / motorsport sections. No card surface — just a full-bleed photograph with a small overlay caption in white text at the bottom-left. The photography IS the brand here.
+
+**`chatbot-launcher`** — A right-side card-style entry point ("BMW M CHATBOT") on the homepage. Background `{colors.surface-card}`, 0px radius, padding `{spacing.lg}` (24px). Carries an h3 title, a short prompt, and a `button-primary` to launch.
+
+**`category-tab`** + **`category-tab-active`** — The category selector tabs used on the magazine and topics pages (e.g., "ALL · MAGAZINE · MODELS · LIFESTYLE · MOTORSPORT"). Tabs render as text-only labels in `{typography.label-uppercase}`. Active state changes text color from `{colors.body}` to `{colors.on-dark}` and adds a 2px white underline below the label. No background fill, no rounded corners.
+
+### Inputs & Forms
+
+**`text-input`** — Standard text input on dark surfaces. Background `{colors.surface-card}`, text `{colors.on-dark}`, type `{typography.body-md}`, 0px radius, padding 12px × 16px, height 48px. 1px hairline border. Focus state thickens the border to white.
+
+**`cookie-consent-card`** — A right-side cookie-banner card visible on the homepage. Background `{colors.canvas}` with 1px hairline, 0px radius, padding `{spacing.lg}` (24px). Body text in `{typography.body-sm}`. Two buttons stacked at bottom: primary outline + text-link.
+
+### Signature Components
+
+**`m-stripe-divider`** — The 4px horizontal stripe carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used as a divider on motorsport chrome, between brand-identity sections, and as a hover-state indicator on category tabs. The most distinctive non-typographic element in the system.
+
+**`cta-band-photo`** — A pre-footer "Drive an M" CTA band carrying full-bleed photography of a car cornering on a track, with a centered headline in `{typography.display-md}` and a `button-primary-outline` below. Vertical padding 80px. The CTA inherits the editorial gravity of the rest of the page through full-bleed photography rather than chrome.
+
+### Footer
+
+**`footer`** — Black footer observed on analyzed marketing pages. Background `{colors.canvas}`, text `{colors.body}`. 4-column link list at desktop covering BMW M Models / BMW M Lifestyle / Owners / Company. Vertical padding 64px. Bottom row carries the BMW corporate disclaimer in `{typography.caption}` and language selector. Treat black footer behavior as confirmed for editorial/marketing pages, not for unresolved account or checkout flows.
+
+## 5. Layout Principles
+### Spacing System
+- **Base unit:** 4px.
+- **Tokens:** `{spacing.xxs}` 4px · `{spacing.xs}` 8px · `{spacing.sm}` 12px · `{spacing.md}` 16px · `{spacing.lg}` 24px · `{spacing.xl}` 40px · `{spacing.xxl}` 64px · `{spacing.section}` 96px.
+- **Section padding (vertical):** `{spacing.section}` (96px) between major editorial bands.
+- **Hero photo bands:** `{spacing.xxl}` (64px) internal vertical padding around the hero h1 + sub-headline pair.
+- **Card internal padding:** `{spacing.lg}` (24px) for content and model cards; `{spacing.xl}` (40px) for spec-cell tables.
+- **Gutters:** `{spacing.lg}` (24px) between cards in 3-up grids; `{spacing.md}` (16px) inside footer columns.
+
+### Grid & Container
+- **Max content width:** ~1440px centered on marketing pages — wider than typical SaaS to give photography breathing room.
+- **Editorial body:** Single 12-column grid; photo bands bleed full-bleed (no max-width).
+- **Card grids:** 3-up at desktop, 2-up at tablet, 1-up at mobile.
+- **Footer:** 4-column link list at desktop, 2-up at tablet, 1-up at mobile.
+
+### Whitespace Philosophy
+BMW M trusts photography to do the visual work. Whitespace around photography is restrained — the cars fill the frame, and copy sits below or beside them in tightly-aligned columns. Where whitespace appears (between body sections, around CTAs), it's always uniform `{spacing.section}` (96px). The system should avoid decorative atmospheric backdrops and ornamental gradients; functional contrast scrims are allowed when photo crops would make white text fail contrast.
+
+## 6. Depth & Elevation
+| Level | Treatment | Use |
+|---|---|---|
+| Flat | No shadow, no border | Body sections, top nav, footer, photo bands |
+| Soft hairline | 1px `{colors.hairline}` border | Section dividers, card outlines, table rows |
+| Card surface | `{colors.surface-card}` background over canvas — no shadow | Feature photo cards, magazine cards, chatbot launcher |
+| Photographic depth | Full-bleed photography with edge-to-edge crop | Hero bands, motorsport features — depth via subject matter, not chrome |
+
+The system uses no drop shadows and no layered chrome. Depth comes entirely from photography (subject + lens + lighting) and the contrast between black canvas and slightly-elevated `{colors.surface-card}`.
+
+### Decorative Depth
+- **M Stripe Divider** (`m-stripe-divider`): A 4px-tall horizontal divider carrying the M tricolor (`{colors.m-blue-light}` → `{colors.m-blue-dark}` → `{colors.m-red}`). Used on motorsport chrome, model-detail headers, and brand-identity moments. The stripe is the system's only true "decorative" element — used sparingly to mark significance.
+- **Carbon-fiber surfaces**: The technical-spec page uses `{colors.carbon-gray}` (#2b2b2b) cells with subtle texture overlay. This is a single-page treatment, not a system-wide pattern.
+- **Photographic depth**: Full-bleed cars are the depth. Lighting in the photography (track lights, sunset rim-light) does the elevation work that drop shadows would do in a SaaS system.
+
+## 7. Do's and Don'ts
+### Do
+- Anchor every page with full-bleed automotive photography. The cars are the brand voltage; chrome backs off.
+- Use UPPERCASE display headlines in `{typography.display-xl}` or `{typography.display-lg}`. Sentence-case display reads as off-brand.
+- Keep typography disciplined: Light display, regular body text, heavier weights only for short labels, buttons, card titles, or observed M-specific emphasis.
+- Reserve the M tricolor stripe for brand-identity moments — wordmark accents, motorsport chrome, model badges. Never as a button fill or surface.
+- Use 0px radius by default. Reserve full-circle geometry for circular icon buttons only.
+- Letter-space all-caps labels at 1.5px. The "machined" feel is non-negotiable.
+- Use `{spacing.section}` (96px) between major editorial bands for grid-aligned vertical rhythm.
+
+### Don't
+- Don't introduce a brand color outside the M tricolor (`{colors.m-blue-light}` / `{colors.m-blue-dark}` / `{colors.m-red}`) and the documented electric-blue accent.
+- Don't force body type into Light if readability suffers. Body should usually stay regular 400; reserve Light for large display and secondary editorial moments.
+- Don't use rounded buttons. The rectangular silhouette IS the brand. Rounded corners read as consumer-tech, not motorsport.
+- Don't put decorative gradient backdrops behind hero type. If a crop makes text fail contrast, add a functional black scrim, reposition the crop, or move the text into a solid black panel.
+- Don't repeat the same surface mode in two consecutive bands. Rhythm: photo band → spec table → photo band → magazine grid → photo band. Two text-only bands in a row read as a corporate site.
+- Don't use the M stripe as a button fill. The stripe is a divider / accent — never an action surface.
+- Don't bold uppercase tracking under 1.5px on button labels — the spacing is what makes them feel "machined."
+
+## 8. Responsive Behavior
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | < 768px | Hamburger nav; hero h1 scales 80→48px; demo grid 1-up; photo cards stack full-width; footer 4 cols → 1 |
+| Tablet | 768–1024px | Top nav stays horizontal but tightens; 2-up card grids; spec tables 2-up |
+| Desktop | 1024–1440px | Full top-nav; 3-up card grids; spec tables 4-up |
+| Wide | > 1440px | Same as desktop with more breathing room; max content 1440px |
+
+### Touch Targets
+- `button-primary` renders at 48 × 48px minimum where possible; never go below a 44 × 44px pointer target.
+- `button-icon` and `carousel-arrow` are exactly 48 × 48px — comfortably above the 44 × 44px minimum.
+- `text-input` height is 48px.
+- Category tabs render as text-only labels with at least 12px vertical padding and enough horizontal spacing to create a 44px minimum effective tap area.
+
+### Text Over Photography & Focus
+- White body text over photography must meet at least 4.5:1 contrast; large display text and icon strokes must meet at least 3:1.
+- First choice is crop discipline: place text over dark track, shadow, cockpit, or black bodywork regions. Avoid placing text over sky, headlights, white paint, concrete, or reflective highlights.
+- If crop discipline is not enough, use a functional black scrim (`rgba(0,0,0,0.45)` to `rgba(0,0,0,0.70)`) behind the text area. A left-to-right scrim is acceptable only as an accessibility layer, not as decoration.
+- If a scrim still fails contrast, move copy into a solid `{colors.canvas}` panel with 24px minimum padding.
+- Focus visibility on black or photo backgrounds must use a 2px white outline plus a 2px offset ring in `{colors.electric-blue}`. On light unresolved surfaces, invert to a 2px `{colors.electric-blue}` outline with visible offset.
+
+### Collapsing Strategy
+- Top nav collapses to a hamburger sheet at < 768px; the menu opens as a full-screen black overlay with the M tricolor stripe at the top.
+- Photography stays full-bleed at every breakpoint — never collapses to a margin'd container.
+- Card grids reduce columns rather than scaling cards down; photography retains its native aspect ratio.
+- Spec tables collapse from 4-up to 2-up to 1-up; spec values stay at `{typography.display-sm}` regardless of column count.
+- The M-stripe divider stays at 4px height across all breakpoints.
+
+### Image Behavior
+- Hero photography crops responsively — wider crops at desktop, vertical crops on mobile.
+- Lifestyle and motorsport photos retain native aspect ratios; the system never letterboxes or pillarboxes.
+- The M wordmark + tricolor logo scales proportionally with viewport width.
+
+## 9. Agent Prompt Guide
+1. Focus on ONE component at a time. Reference its component name (`hero-photo-band`, `spec-cell`).
+2. New components default to 0px radius. Only use full-circle geometry for circular icon buttons.
+3. Variants (`-active`, `-disabled`) live as separate prose entries next to the component name.
+4. Use `{token.refs}` everywhere — never inline hex.
+5. Never document hover states. Default and Active/Pressed only.
+6. Display headlines stay UPPERCASE and light/architectural by default; body stays sentence-case regular. Use 700 only for short emphasis and UI labels.
+7. The M tricolor is brand-identity-only — never extend it to system tokens for "primary action."
+8. White-on-photo text needs a contrast strategy every time: crop first, scrim second, solid panel if needed.
+9. When in doubt about emphasis: bigger photography before bigger type.
+
+### Known Gaps
+- The dembrandt frequency analyzer captured the white text (count 955) as the highest-frequency token. The black canvas was inferred from screenshot — dembrandt's body-background sampling didn't surface it as a top palette entry, but the page is unambiguously black-on-white-text.
+- The exact M tricolor stops are documented from public BMW brand guidelines; the screenshots show the stripe as a small element but pixel-sampling at this resolution doesn't reliably distinguish #0066b1 from #1c69d4. Treat the documented stops as canonical based on BMW Design Works' published brand spec.
+- BMW Type Next Latin weight evidence is incomplete. The broader BMW design system documents Light (300) display and regular (400) body/UI; BMW M-specific heavier label usage should be treated as observed emphasis, not a global replacement for BMW family typography.
+- Animation and transition timings (photo carousel transitions, hover-reveal effects, configurator interactions) are not in scope.
+- Form validation states beyond `text-input` defaults are not extracted — error / success input variants would need a configurator or order flow to confirm.
+- The configurator surface (vehicle build pages with color / wheel / interior pickers) was not in the analyzed URL set; its swatch grid, comparison panels, and price-summary card are not documented here.
+- The cookie consent overlay obscured part of the homepage hero in the captured screenshot; secondary hero treatments (different car models cycling through the hero band) may carry variations not captured.

vibn-frontend/lib/scaffold/open-design/design-systems/bmw/DESIGN.md

@@ -0,0 +1,183 @@
+# Design System Inspired by BMW
+
+> Category: Automotive
+> Luxury automotive. Dark premium surfaces, precise German engineering aesthetic.
+
+## 1. Visual Theme & Atmosphere
+
+BMW's website is automotive engineering made visual — a design system that communicates precision, performance, and German industrial confidence. The page alternates between deep dark hero sections (featuring full-bleed automotive photography) and clean white content areas, creating a cinematic rhythm reminiscent of a luxury car showroom where vehicles are lit against darkness. The BMW CI2020 design language (their corporate identity refresh) defines every element.
+
+The typography is built on BMWTypeNextLatin — a proprietary typeface in two variants: BMWTypeNextLatin Light (weight 300) for massive uppercase display headings, and BMWTypeNextLatin Regular for body and UI text. The 60px uppercase headline at weight 300 is the defining typographic gesture — light-weight type that whispers authority rather than shouting it. The fallback stack includes Helvetica and Japanese fonts (Hiragino, Meiryo), reflecting BMW's global presence.
+
+What makes BMW distinctive is its CSS variable-driven theming system. Context-aware variables (`--site-context-highlight-color: #1c69d4`, `--site-context-focus-color: #0653b6`, `--site-context-metainfo-color: #757575`) suggest a design system built for multi-brand, multi-context deployment where colors can be swapped globally. The blue highlight color (`#1c69d4`) is BMW's signature blue — used sparingly for interactive elements and focus states, never decoratively. Zero border-radius was detected — BMW's design is angular, sharp-cornered, and uncompromisingly geometric.
+
+**Key Characteristics:**
+- BMWTypeNextLatin Light (weight 300) uppercase for display — whispered authority
+- BMW Blue (`#1c69d4`) as singular accent — used only for interactive elements
+- Zero border-radius detected — angular, sharp-cornered, industrial geometry
+- Dark hero photography + white content sections — showroom lighting rhythm
+- CSS variable-driven theming: `--site-context-*` tokens for brand flexibility
+- Weight 900 for navigation emphasis — extreme contrast with 300 display
+- Tight line-heights (1.15–1.30) throughout — compressed, efficient, German engineering
+- Full-bleed automotive photography as primary visual content
+
+## 2. Color Palette & Roles
+
+### Primary Brand
+- **Pure White** (`#ffffff`): `--site-context-theme-color`, primary surface, card backgrounds
+- **BMW Blue** (`#1c69d4`): `--site-context-highlight-color`, primary interactive accent
+- **BMW Focus Blue** (`#0653b6`): `--site-context-focus-color`, keyboard focus and active states
+
+### Neutral Scale
+- **Near Black** (`#262626`): Primary text on light surfaces, dark link text
+- **Meta Gray** (`#757575`): `--site-context-metainfo-color`, secondary text, metadata
+- **Silver** (`#bbbbbb`): Tertiary text, muted links, footer elements
+
+### Interactive States
+- All links hover to white (`#ffffff`) — suggesting primarily dark-surface navigation
+- Text links use underline: none on hover — clean interaction
+
+### Shadows
+- Minimal shadow system — depth through photography and dark/light section contrast
+
+## 3. Typography Rules
+
+### Font Families
+- **Display Light**: `BMWTypeNextLatin Light`, fallbacks: `Helvetica, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo`
+- **Body / UI**: `BMWTypeNextLatin`, same fallback stack
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | BMWTypeNextLatin Light | 60px (3.75rem) | 300 | 1.30 (tight) | `text-transform: uppercase` |
+| Section Heading | BMWTypeNextLatin | 32px (2.00rem) | 400 | 1.30 (tight) | Major section titles |
+| Nav Emphasis | BMWTypeNextLatin | 18px (1.13rem) | 900 | 1.30 (tight) | Navigation bold items |
+| Body | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard body text |
+| Button Bold | BMWTypeNextLatin | 16px (1.00rem) | 700 | 1.20–2.88 | CTA buttons |
+| Button | BMWTypeNextLatin | 16px (1.00rem) | 400 | 1.15 (tight) | Standard buttons |
+
+### Principles
+- **Light display, heavy navigation**: Weight 300 for hero headlines creates whispered elegance; weight 900 for navigation creates stark authority. This extreme weight contrast (300 vs 900) is the signature typographic tension.
+- **Universal uppercase display**: The 60px hero is always uppercase — creating a monumental, architectural quality.
+- **Tight everything**: Line-heights from 1.15 to 1.30 across the entire system. Nothing breathes — every line is compressed, efficient, German-engineered.
+- **Single font family**: BMWTypeNextLatin handles everything from 60px display to 16px body — unity through one typeface at different weights.
+
+## 4. Component Stylings
+
+### Buttons
+- Text: 16px BMWTypeNextLatin, weight 700 for primary, 400 for secondary
+- Line-height: 1.15–2.88 (large variation suggests padding-driven sizing)
+- Border: white bottom-border on dark surfaces (`1px solid #ffffff`)
+- No border-radius — sharp rectangular buttons
+
+### Cards & Containers
+- No border-radius — all containers are sharp-cornered rectangles
+- White backgrounds on light sections
+- Dark backgrounds for hero/feature sections
+- No visible borders on most elements
+
+### Navigation
+- BMWTypeNextLatin 18px weight 900 for primary nav links
+- White text on dark header
+- BMW logo 54x54px
+- Hover: remains white, text-decoration none
+- "Home" text link in header
+
+### Image Treatment
+- Full-bleed automotive photography
+- Dark cinematic lighting
+- Edge-to-edge hero images
+- Car photography as primary visual content
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 30px, 32px, 40px, 45px, 56px, 60px
+
+### Grid & Container
+- Full-width hero photography
+- Centered content sections
+- Footer: multi-column link grid
+
+### Whitespace Philosophy
+- **Showroom pacing**: Dark hero sections with generous padding create the feeling of walking through a showroom where each vehicle is spotlit in its own space.
+- **Compressed content**: Body text areas use tight line-heights and compact spacing — information-dense, no waste.
+
+### Border Radius Scale
+- **None detected.** BMW uses sharp corners exclusively — every element is a precise rectangle. This is the most angular design system analyzed.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Photography (Level 0) | Full-bleed dark imagery | Hero backgrounds |
+| Flat (Level 1) | White surface, no shadow | Content sections |
+| Focus (Accessibility) | BMW Focus Blue (`#0653b6`) | Focus states |
+
+**Shadow Philosophy**: BMW uses virtually no shadows. Depth is created entirely through the contrast between dark photographic sections and white content sections — the automotive lighting does the elevation work.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use BMWTypeNextLatin Light (300) uppercase for all display headings
+- Keep ALL corners sharp (0px radius) — angular geometry is non-negotiable
+- Use BMW Blue (`#1c69d4`) only for interactive elements — never decoratively
+- Apply weight 900 for navigation emphasis — the extreme weight contrast is intentional
+- Use full-bleed automotive photography for hero sections
+- Keep line-heights tight (1.15–1.30) throughout
+- Use `--site-context-*` CSS variables for theming
+
+### Don't
+- Don't round corners — zero radius is the BMW identity
+- Don't use BMW Blue for backgrounds or large surfaces — it's an accent only
+- Don't use medium font weights (500–600) — the system uses 300, 400, 700, 900 extremes
+- Don't add decorative elements — the photography and typography carry everything
+- Don't use relaxed line-heights — BMW text is always compressed
+- Don't lighten the dark hero sections — the contrast with white IS the design
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <375px | Minimum supported |
+| Mobile | 375–480px | Single column |
+| Mobile Large | 480–640px | Slight adjustments |
+| Tablet Small | 640–768px | 2-column begins |
+| Tablet | 768–920px | Standard tablet |
+| Desktop Small | 920–1024px | Desktop layout begins |
+| Desktop | 1024–1280px | Standard desktop |
+| Large Desktop | 1280–1440px | Expanded |
+| Ultra-wide | 1440–1600px | Maximum layout |
+
+### Collapsing Strategy
+- Hero: 60px → scales down, maintains uppercase
+- Navigation: horizontal → hamburger
+- Photography: full-bleed maintained at all sizes
+- Content sections: stack vertically
+- Footer: multi-column → stacked
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`)
+- Text: Near Black (`#262626`)
+- Secondary text: Meta Gray (`#757575`)
+- Accent: BMW Blue (`#1c69d4`)
+- Focus: BMW Focus Blue (`#0653b6`)
+- Muted: Silver (`#bbbbbb`)
+
+### Example Component Prompts
+- "Create a hero: full-width dark automotive photography background. Heading at 60px BMWTypeNextLatin Light weight 300, uppercase, line-height 1.30, white text. No border-radius anywhere."
+- "Design navigation: dark background. BMWTypeNextLatin 18px weight 900 for links, white text. BMW logo 54x54. Sharp rectangular layout."
+- "Build a button: 16px BMWTypeNextLatin weight 700, line-height 1.20. Sharp corners (0px radius). White bottom border on dark surface."
+- "Create content section: white background. Heading at 32px weight 400, line-height 1.30, #262626. Body at 16px weight 400, line-height 1.15."
+
+### Iteration Guide
+1. Zero border-radius — every corner is sharp, no exceptions
+2. Weight extremes: 300 (display), 400 (body), 700 (buttons), 900 (nav)
+3. BMW Blue for interactive only — never as background or decoration
+4. Photography carries emotion — the UI is pure precision
+5. Tight line-heights everywhere — 1.15 to 1.30 is the range

vibn-frontend/lib/scaffold/open-design/design-systems/bold/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Bold
+
+> Category: Bold & Expressive
+> Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
+
+## 1. Visual Theme & Atmosphere
+
+Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
+
+- **Visual style:** bold
+- **Color stance:** primary, secondary
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#0077BC` — Token from style foundations.
+- **Secondary:** `#009866` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#111111` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#111111` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#0077BC) for CTA emphasis.
+- Use Surface (#111111) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Archivo Black, display=Archivo Black, 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 `#0077BC`; 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 (#0077BC) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/brutalism/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Brutalism
+
+> Category: Bold & Expressive
+> Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
+
+## 1. Visual Theme & Atmosphere
+
+Raw, anti-design aesthetic inspired by concrete architecture with unadorned elements, jarring layouts, and functional minimalism.
+
+- **Visual style:** bold
+- **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:** `#DD614C` — Token from style foundations.
+- **Secondary:** `#DAA144` — 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 (#DD614C) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Darker Grotesque, display=Darker Grotesque, 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 `#DD614C`; 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 (#DD614C) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/bugatti/DESIGN.md

@@ -0,0 +1,271 @@
+# Design System Inspired by Bugatti
+
+> Category: Automotive
+> Hypercar brand. Cinema-black canvas, monochrome austerity, monumental display type.
+
+## 1. Visual Theme & Atmosphere
+
+Bugatti.com does not behave like a website — it behaves like a feature-length car film that a visitor happens to be standing inside. The canvas is pure `#000000`, the only color that appears at rest is white, and the entire page is carried by full-bleed hero video and photography with a single typographic moment laid over the top. There are no cards, no grids, no promotional modules, no newsletter signups, no three-column editorial layouts. It is one continuous cinema-black channel, interrupted only by the cars themselves and a few pill-shaped calls to action that quietly say things like "EXPLORE OUR OPPORTUNITIES" in ALL CAPS monospace.
+
+The single most distinctive move in the entire system is **scale**: the `Bugatti Display` typeface runs at **288px** at hero moments. Two hundred and eighty-eight pixels. That is not a typo — the dembrandt sweep extracted a heading style rendered at an 18rem size, ALL CAPS, line-height 1.0, meant to be read the way you read a brand mark on the front of a Chiron: from across a showroom floor. At 288px the headline is no longer text, it is architecture. The secondary display scale of 60px feels almost miniature next to it, and the 36px mid-display feels like fine print. This typographic hierarchy is the most extreme of any production brand website in this catalog, and it is what gives Bugatti.com its sculptural, couture-showroom presence.
+
+The other signature is **monochromatic austerity**. The entire homepage uses exactly three colors at rest: `#000000`, `#ffffff`, and `#999999` (mid gray for disabled/tertiary states). There is no accent, no brand blue, no hazard color, no commerce orange, no gradient wash. The designers have made a conscious decision that Bugatti's color system should be the car paint itself — the page is a black velvet display stand, and the only color that exists is whatever blue-on-black lacquer the hero vehicle happens to be wearing today. This discipline is the exact opposite of PlayStation's PlayStation Blue or The Verge's Jelly Mint: Bugatti refuses to compete with its own product.
+
+**Key Characteristics:**
+- Cinema-black `#000000` canvas for the entire page — no gradients, no tints, no accents
+- 288px `Bugatti Display` ALL-CAPS headline — the most extreme display scale in the catalog
+- Three-font custom family: `Bugatti Display` (sculptural), `Bugatti Monospace` (UI labels), `Bugatti Text Regular` (body)
+- Monochrome-only palette: black, white, and a single `#999999` mid gray for tertiary/disabled
+- Pill buttons at `9999px` radius — transparent with a 1px white border, padding `12px 24px`
+- Video- and photography-first page — the chrome is almost silent so the product can speak
+- Mono UPPERCASE labels with 1.2–1.4px letter-spacing on every CTA, navigation link, and caption
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Velvet Black** (`#000000`): The entire canvas. Not near-black, not warm black — the pure HTML `#000`. Bugatti treats this as a display-stand surface, the way a jewelry brand treats a black velvet cloth.
+- **Showroom White** (`#ffffff`): All text, all borders, all CTAs. White is the only color that appears at rest on the chrome. It has the weight of typeset print on a matte museum label.
+
+### Secondary & Accent
+- **Silver Mist** (`#999999`): The single gray in the system. Used for secondary button borders, disabled states, and the thinnest hairline dividers. Treat this as the "75%-volume" version of white — never a color, just a quieter version of the same voice.
+
+### Surface & Background
+- **Velvet Black** (`#000000`): The only surface. There is no secondary surface, no elevated card, no modal backdrop. If something needs to feel "separate", it sits on the same black and is marked with a thin `#999999` border — no color change.
+
+### Neutrals & Text
+- **Primary Text** (`#ffffff`): All headlines, body copy, button labels, and navigation items.
+- **Tertiary Text** (`#999999`): Disclaimer text, placeholder labels, and the faintest supporting metadata. Used sparingly — Bugatti prefers to hide secondary content rather than dim it.
+
+### Semantic & Accent
+- **Tailwind Ring Leak** (`rgba(59, 130, 246, 0.5)`): A Tailwind default `--tw-ring-color` leaks into the extracted tokens from the build system — this is **not** part of the Bugatti brand palette. Ignore it. If a real focus state is needed, use a 1px `#ffffff` ring instead.
+
+### Gradient System
+None. There are zero decorative gradients on Bugatti.com. The only "gradient" on the page is whatever natural light gradient exists inside the hero video of the car itself. The brand refuses to apply any chrome gradient that could compete with the atmospheric lighting of the product photography.
+
+## 3. Typography Rules
+
+### Font Family
+- **Bugatti Display** — fallback: `ui-sans-serif`, `system-ui`. A proprietary custom display typeface used only at very large sizes for hero and mid-display headlines. Designed to be read at architectural scale — at 288px, its geometry doubles as a visual element, not just text. The face carries a faint hint of early-20th-century Grand Prix typography (the period when Ettore Bugatti was racing) without ever becoming nostalgic.
+- **Bugatti Monospace** — fallback: `ui-sans-serif`, `system-ui`. A custom monospaced face reserved for every UI label on the site. It handles all navigation links, all button labels, all captions, and all UPPERCASE metadata. The strict mono tracking (1.2–1.4px letter-spacing on all usages) gives the UI the appearance of a technical dossier or dashboard telemetry printout — appropriate for a company that builds 1600-horsepower hypercars.
+- **Bugatti Text Regular** — fallback: `ui-sans-serif`, `system-ui`. The body copy workhorse, used for the rare paragraph and inline reading text. Weights and styles are restrained — this font exists to be invisible when the display type is shouting and the monospace is whispering.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|---|---|---|---|---|---|---|
+| Hero Display (Monumental) | Bugatti Display | 288px / 18.00rem | 400 | 1.00 | — | ALL CAPS — the largest display scale in this catalog, architectural in presence |
+| Mid Display (Feature) | Bugatti Display | 60px / 3.75rem | 400 | 1.00 | 1.4px | Feature-panel headlines, ALL CAPS optional |
+| Mid Display (Subfeature) | Bugatti Display | 60px / 3.75rem | 400 | 1.00 | — | Secondary feature headlines |
+| Section Heading | Bugatti Display | 36px / 2.25rem | 400 | 1.11 | — | Section-level title |
+| Monumental Mono Headline | Bugatti Monospace | 60px / 3.75rem | 400 | 1.00 | — | UPPERCASE — reserved for technical/section labels at hero scale |
+| Body Small (Display) | Bugatti Display | 16px / 1.00rem | 400 | 1.50 | — | Display face used sparingly at body size for marketing copy |
+| Lead Body | Bugatti Text Regular | 20px / 1.25rem | 400 | 1.40 | — | Paragraph lead |
+| Body Regular | Bugatti Text Regular | 16px / 1.00rem | 400 | 1.50 | — | Standard reading body |
+| Body Compact | Bugatti Text Regular | 14px / 0.88rem | 400 | 1.43 | — | Dense body |
+| UI Link (Caps) | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | UPPERCASE — primary navigation and primary link style |
+| UI Link (Mono Plain) | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | — | Plain-case mono link — rare, used for disclaimer links |
+| Button Label (CAPS) | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | UPPERCASE — primary pill-button label |
+| Button Label (Compact) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | 1.2px | UPPERCASE — small pill-button label |
+| Button Label (Unstyled) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | — | Plain-case mono — footer microbutton |
+| Caption CAPS Wide | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | UPPERCASE — section eyebrows and tech-spec labels |
+| Caption Plain Wide | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | 1.4px | Plain-case with 1.4px tracking — the "mid-formal" register |
+| Caption Plain | Bugatti Monospace | 14px / 0.88rem | 400 | 1.43 | — | Plain mono caption |
+| Caption Micro (Text) | Bugatti Text Regular | 14px / 0.88rem | 400 | 1.43 | — | Body-face caption |
+| Caption Micro (CAPS) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | 1.2px | UPPERCASE — smallest tagging label |
+| Caption Micro (Plain) | Bugatti Monospace | 12px / 0.75rem | 400 | 1.33 | — | Smallest plain-case mono |
+
+### Principles
+- **Bugatti Display is a sculpture, not a font.** If you find yourself typesetting body copy or a button in Bugatti Display, you're using the wrong tool. Reserve this face for headlines at **36px minimum**, ideally 60px+, and at least once per page use it at 200px+ to create the monumental effect the brand is built around.
+- **Bugatti Monospace owns the UI.** Every navigation link, every button, every caption, every eyebrow runs in Bugatti Monospace — usually UPPERCASE with 1.2–1.4px tracking. This mono-caps discipline is what makes the UI read like a Grand Prix telemetry panel rather than a luxury shopping cart.
+- **Bugatti Text Regular is invisible.** It appears only in short paragraphs and inline reading copy, usually at 14–20px. It is never used for labels, buttons, or display.
+- **There is no bold.** Every weight in the extracted tokens is regular (400). Bugatti does not use weight for hierarchy — it uses scale. When you need emphasis, make the type bigger, not heavier.
+- **Tracking has two registers.** Mono caps always carry 1.2–1.4px letter-spacing. Display type at 60px+ sometimes carries 1.4px tracking at the hero scale. Body type has no tracking.
+- **Line-height is brutally tight at display.** Every Bugatti Display usage runs at line-height 1.00 or 1.11. Headlines touch each other when they wrap — that's the design. Do not relax the leading.
+
+### Note on Font Substitutes
+The 1.00 line-height and 288px display scale both assume the **proprietary Bugatti Display face**, which is drawn with compact vertical metrics purpose-built for architectural scale. If you substitute with open-source extended geometric displays like **Unbounded**, **Big Shoulders Display**, or **Archivo Black**, make two adjustments: (1) **loosen line-height to ~1.05–1.10** to prevent ascender collisions, and (2) **cap the maximum display size at ~104–128px** on most viewports — these substitutes have wider horizontal metrics than Bugatti Display, so a 288px monumental headline will wrap across 4+ lines and overwhelm the layout. Reserve the 200px+ scale only for single-word monumental moments (e.g., "BUGATTI" alone). Bugatti Monospace substitutes (Space Mono, JetBrains Mono) and Bugatti Text Regular substitutes (Inter, DM Sans) work at the token values without adjustment.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary — White Outlined Pill**
+- Background: transparent
+- Text: `#ffffff`, Bugatti Monospace 14px / 400 / 1.4px tracking, UPPERCASE
+- Border: `1px solid #ffffff`
+- Border radius: `9999px` — full pill
+- Padding: `12px 24px`
+- Outline: `rgb(255, 255, 255) none 0px` at rest
+- Hover: likely background fill to `#ffffff` with black text, or a subtle opacity dim (the extracted token set did not capture a bespoke hover — treat this as a safe assumption since the default Bugatti interaction is restraint)
+- Active: opacity drop to ~0.7
+- Focus: use a 1px `#ffffff` outer ring via `box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #000000` for contrast
+- Transition: 200–300ms ease on background/color — quiet, never bouncy
+
+**Secondary — Gray Rounded Button**
+- Background: transparent
+- Text: `#ffffff`, Bugatti Monospace 12px / 400 / 1.2px tracking, UPPERCASE
+- Border: `1px solid #999999` (Silver Mist)
+- Border radius: `6px` — subtle corner, the only non-pill non-zero radius in the system
+- Padding: `6px 12px`
+- Hover: border transitions to `#ffffff`, text stays white
+- Active: opacity 0.7
+- Used for compact utility buttons (menu toggles, closed-dialog buttons)
+
+**Ghost — Unbordered Link Button**
+- Background: transparent
+- Text: `#ffffff`, Bugatti Monospace 12px / 400 — plain or UPPERCASE
+- No border, no padding beyond inline
+- Used in the footer and tertiary nav
+
+### Cards & Containers
+- **There are no cards.** Bugatti.com has no card component. The entire page is a sequence of full-bleed media blocks with a headline and optional CTA overlaid — more akin to a film chapter than a card grid.
+- The closest thing to a "container" is the rare bordered section that uses a `1px solid #999999` frame, a `6px` border radius, and `#000000` interior. These are reserved for cookie-consent notices and modal-style dialogues, not editorial content.
+- Hover state on media blocks: none. The video plays, the CTA becomes clickable, and that is the entire interaction vocabulary.
+
+### Inputs & Forms
+- The extracted tokens captured **zero input styles** (`⚠ Inputs: 0 styles`). This is because Bugatti.com has essentially no forms on the homepage — no newsletter signup, no search bar, no contact form, no email capture. When forms do appear (on deeper pages), apply these defaults consistent with the rest of the system:
+  - **Default**: `#000000` background, `1px solid #999999` border, `6px` radius, `#ffffff` text in Bugatti Text Regular 16px, placeholder `#999999`.
+  - **Focus**: border transitions to `#ffffff`, no glow — the border change IS the focus signal.
+  - **Error**: border stays white; add a `#999999` inline message below. Bugatti does not use red error colors — it stays in the monochrome palette.
+  - **Transition**: ~250ms ease on border-color.
+
+### Navigation
+
+- **Top nav**: black (`#000000`) thin strip with the Bugatti "EB" monogram or full "BUGATTI" wordmark centered, a hamburger "MENU" link left, and a "STORE" link right. Both nav links are Bugatti Monospace 14px UPPERCASE with 1.4px tracking.
+- **Logo**: 128×29px at desktop scale — smaller than nearly every other brand in this catalog. Bugatti does not need to shout its name.
+- **Hover on nav links**: color stays `#ffffff` — the hover signal is a subtle text-decoration underline or an opacity shift to ~0.75. No color change.
+- **Mobile**: the full nav collapses to just three elements — "MENU", the wordmark, and "STORE" — which is basically the desktop layout minus the separator spacing.
+- **Sticky behavior**: the nav is pinned at the top on scroll and stays black-on-black. When it overlaps a dark video, it becomes nearly invisible, which is by design.
+
+### Image & Video Treatment
+- **Aspect ratios**: 16:9 and 21:9 for hero video, 4:3 for mid-feature photography, 1:1 for rare portrait shots.
+- **Corners**: rare — most media is full-bleed with zero border radius. When radius appears, it's `6px`.
+- **Full-bleed**: yes, always. The hero video fills the viewport. Secondary feature video fills 100% of the section width.
+- **Captions**: Bugatti Monospace 12px UPPERCASE in `#ffffff` at ~1.2px tracking, placed below the media or in the lower-left corner.
+- **Hover**: no zoom, no scale, no scrim. The video plays, that is the hover state.
+- **Lazy loading**: `loading="lazy"` on every image below the fold; hero video is preloaded.
+
+### Atmospheric Overlay
+- When type sits over photography or video that might threaten legibility, Bugatti uses a subtle `rgba(0, 0, 0, 0.4)` linear gradient from bottom (40% black) to top (transparent) — the only "shadow-like" effect in the system. It's a vignette, not a drop shadow.
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px.
+- **Scale** (from tokens): 4, 6, 12, 36, 48, 64px. Six values. **Six.** This is one of the smallest spacing scales of any major brand site — Bugatti uses a handful of discrete gaps and refuses to invent in-between values.
+- **Section padding**: typically 48–64px vertical. Hero panels are full-viewport-height, which bypasses the scale entirely.
+- **Button padding**: 6px 12px (compact) or 12px 24px (primary). Nothing else.
+- **Inline spacing**: 4–12px between stacked labels; the big jump to 36/48/64 happens between content blocks.
+
+### Grid & Container
+- **Max width**: 1720px (dembrandt detected breakpoints up to 1720). The site scales to ultra-wide for luxury showroom displays and wide cinema monitors.
+- **Column patterns**: there is essentially no multi-column grid on the homepage — it is a stack of single full-width blocks. When deeper pages need columns (configurator, atelier, technical specs), they use a 12-column Tailwind-based grid.
+- **Outer padding**: minimal. Most sections bleed to the viewport edge, with padding only applied to the overlaid text and CTA block (typically 48–64px from the bottom-center).
+
+### Whitespace Philosophy
+Bugatti's whitespace philosophy is **cinematic negative space** — the page is 90% empty even when content is present, because the content is usually a video or photograph of a single car. The rhythm is: full-bleed media → monumental headline → single pill CTA → scroll → next full-bleed media. There is no "information density" anywhere. The page breathes the way a museum breathes, with each exhibit getting its own silent room.
+
+### Border Radius Scale
+- **0** — default for all media and the hero canvas
+- **6px** — secondary rounded buttons, bordered frames, small utility containers
+- **9999px** — primary pill buttons
+
+Three values. No `12px`, no `24px`, no `20px`. Bugatti's radius system is the most restrained of any site in this catalog — the brand has made an active decision that "slightly rounded rectangle" is a vulgar shape, and committed to either true rectangle or true pill.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 | No shadow, no border | Default text and media on `#000000` |
+| 1 | `1px solid #999999` | Secondary containers, cookie-style dialogs |
+| 2 | `1px solid #ffffff` | Primary button outline, active state indicators |
+| 3 | Bottom-to-top `rgba(0, 0, 0, 0.4) → transparent` vignette | Text-legibility gradient when type sits over video |
+
+**That is the entire depth system.** There are 1 shadows in the extracted token set (zero meaningful `box-shadow` values — just a placeholder). Bugatti does not use drop shadows. It does not use elevation rings. It does not use glowing focus states. Depth is implied by the 1px hairline of a border or the presence of a vignette gradient — nothing more.
+
+### Decorative Depth
+None. Zero gradients (except the subtle text-legibility vignette), zero blurs, zero glows, zero atmospheric effects. The decorative depth of Bugatti's site comes entirely from the lighting baked into the product photography. The chrome does not compete.
+
+## 7. Do's and Don'ts
+
+### Do
+- **Do** keep the entire canvas `#000000`. No off-black, no near-black, no warm black. Bugatti is pure black.
+- **Do** use Bugatti Display at architectural scale — minimum 36px, ideally 60px+, and once per page land a monumental 200px+ headline.
+- **Do** use Bugatti Monospace UPPERCASE with 1.2–1.4px tracking for every button, link, nav item, and caption.
+- **Do** use only white text at rest. `#999999` is only for disabled, tertiary, and thin borders.
+- **Do** use 9999px border radius for primary buttons — full pill, thin 1px white outline, transparent fill.
+- **Do** use full-bleed video and photography for every hero section. The product is the UI.
+- **Do** maintain line-height 1.00–1.11 on display headlines. Tight leading is the architecture.
+- **Do** treat whitespace like cinematic negative space — give every block its own silent room.
+
+### Don't
+- **Don't** introduce accent colors. No blue, no red, no commerce orange, no hover cyan, no warning red. The palette is black, white, and one gray.
+- **Don't** use bold weights for hierarchy. Scale is the only hierarchy device — make it bigger, not heavier.
+- **Don't** use drop shadows on any element. Bugatti has no `box-shadow` in its chrome.
+- **Don't** use cards or elevated surfaces. Bugatti has no card component.
+- **Don't** use rounded rectangles between 6px and 9999px. The radius system is rectangle, slightly-rounded utility, or full pill — nothing in between.
+- **Don't** use Bugatti Display for body, buttons, or UI labels. Reserve it for headlines at 36px+.
+- **Don't** use Bugatti Monospace in lowercase for primary UI. Buttons and nav links are always ALL CAPS.
+- **Don't** add gradients, glows, blurs, or glassmorphism anywhere. The chrome is silent.
+- **Don't** put text over photography without a `rgba(0, 0, 0, 0.4)` bottom-up vignette if legibility is at risk.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Mobile | <640px | Single column, hamburger "MENU", hero video locked to 9:16 or 16:9, hero headline scales to ~48–72px |
+| Small Tablet | 640–767px | Still single column, padding opens slightly, typography scales up |
+| Tablet | 768–1023px | Still single column for content, nav expands to include wordmark, headline scales to ~120px |
+| Small Desktop | 1024–1279px | Full desktop nav, headline scales to ~200px |
+| Desktop | 1280–1535px | Full layout, headline at 240–260px |
+| Large Desktop | 1536–1719px | Max headline scale (288px), ultra-wide hero video |
+| Ultra-Wide | ≥1720px | Container caps, hero video locks at 21:9 or wider, everything else stays proportional |
+
+The dembrandt sweep detected 6 breakpoints (1720 → 1536 → 1280 → 1024 → 768 → 640). This is a narrower responsive set than PlayStation's 30 — Bugatti tunes for six clean thresholds rather than micro-adjusting every device boundary. The brand's assumption is that its visitors are either on a high-end laptop, a desktop monitor, or a phone, and the site doesn't need to fuss over everything in between.
+
+### Touch Targets
+- Primary pill buttons are `12px 24px` padded with 14px text — approximately 38–42px tall. **This falls slightly below WCAG AAA 44px recommendations**. For derivative work, bump vertical padding to 14–16px to hit 44px+.
+- Secondary buttons at `6px 12px` padding are about 28–32px tall — definitely below touch-target minimums. Use these only on desktop pointer contexts.
+- Navigation links have no explicit padding — the tap area is the text box, which at 14px is too small. Add `12–14px` vertical padding on mobile to make them touchable.
+
+### Collapsing Strategy
+- **Nav**: desktop shows `MENU / BUGATTI wordmark / STORE`. Mobile keeps the same layout — there is no drawer, because there are only three items.
+- **Grid**: no grid to collapse. The page is already single-column at every breakpoint.
+- **Spacing**: section padding tightens from 64 → 48 → 36 → 12px as viewport narrows.
+- **Type**: Bugatti Display scales from 288px → 200px → 120px → 60px → 48px as viewport narrows. The scale curve is aggressive — losing 240px between the max and mobile hero.
+- **Video**: art-direction swap between 21:9 desktop and 16:9 or 9:16 mobile hero cuts.
+
+### Image & Video Behavior
+- Hero video uses adaptive bitrate streaming and `poster=` fallback.
+- Below-the-fold media uses `loading="lazy"` with `srcset` art direction.
+- Bugatti serves high-density imagery through `imgix` — you'll see `bugatti.imgix.net` URLs with transformation parameters.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- **Primary Canvas**: "Velvet Black (`#000000`)"
+- **Primary Text**: "Showroom White (`#ffffff`)"
+- **Secondary Text / Disabled / Hairline Border**: "Silver Mist (`#999999`)"
+- **Accent**: None. Do not add one.
+- **Hover Signal**: Opacity shift or border-color shift — no color change
+
+### Example Component Prompts
+1. *"Create a monumental hero headline using Bugatti Display at 288px, ALL CAPS, `#ffffff` text on a pure `#000000` canvas, line-height 1.0, no letter-spacing. Place a full-bleed 21:9 hero video behind it with a `rgba(0, 0, 0, 0.4) → transparent` bottom-up vignette for legibility."*
+2. *"Design a primary pill CTA button: transparent background, 1px solid `#ffffff` border, `9999px` border radius, 12px × 24px padding, Bugatti Monospace 14px / 400 / 1.4px letter-spacing UPPERCASE label in `#ffffff`. Hover state fills the background white with black text, 250ms ease."*
+3. *"Build a navigation bar: pure `#000000` background, `MENU` link left, centered `BUGATTI` wordmark (128×29px), `STORE` link right. All links in Bugatti Monospace 14px UPPERCASE with 1.4px letter-spacing in `#ffffff`. No dividers, no hover color — just a slight opacity dim on hover."*
+4. *"Create a mid-feature section heading: Bugatti Display 60px ALL CAPS in `#ffffff`, line-height 1.0, centered over a full-bleed photograph. Place a single primary pill CTA 48–64px below the headline."*
+5. *"Design a secondary utility button for a cookie dialog: transparent background, 1px solid `#999999` border, 6px border radius, 6px × 12px padding, Bugatti Monospace 12px / 400 / 1.2px tracking UPPERCASE label in `#ffffff`."*
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. **Audit the canvas.** If the background isn't pure `#000000`, change it. Bugatti does not tolerate off-black.
+2. **Audit the palette.** Any color that isn't `#000000`, `#ffffff`, or `#999999` is drift. Remove it — that includes ALL accent colors, including common defaults like `#0070cc` Tailwind blue.
+3. **Audit display scale.** If the largest headline on a page is smaller than 60px, it's under-scaled. Bugatti's minimum "monumental moment" is 60px; the maximum is 288px. Aim for the upper half.
+4. **Audit mono-caps discipline.** Every button, every nav link, every caption, every CTA should be Bugatti Monospace UPPERCASE with 1.2–1.4px letter-spacing. If you see sentence case or mixed case on a button, that's drift.
+5. **Audit shadows and gradients.** Strip every `box-shadow`. Strip every gradient except the one legibility vignette over video. Bugatti's chrome is silent.
+6. **Audit radius.** Every container should land on `0`, `6px`, or `9999px`. If you see `12px`, `16px`, `20px`, `24px`, correct to the nearest Bugatti value (almost always `6px` or `9999px`).
+7. **Audit type weight.** All weights should be 400. If you see `bold` or `700` anywhere, change it. Scale, not weight, is the hierarchy.
+8. **Audit whitespace.** If a section feels cramped, add 48–64px. If it feels airy, leave it — Bugatti's negative space is a feature.
+9. **Audit product presence.** Every hero section should have a vehicle — video or photograph — as the primary visual. The chrome should feel like it's framing the car, not competing with it.

vibn-frontend/lib/scaffold/open-design/design-systems/cafe/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Cafe
+
+> Category: Creative & Artistic
+> Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
+
+## 1. Visual Theme & Atmosphere
+
+Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.
+
+- **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:** `#5D4432` — Token from style foundations.
+- **Secondary:** `#E9E3DD` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#F9F7F5` — Token from style foundations.
+- **Text:** `#3E2B1E` — Token from style foundations.
+- **Neutral:** `#F9F7F5` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#5D4432) for CTA emphasis.
+- Use Surface (#F9F7F5) for large backgrounds and cards.
+- Keep body copy on Text (#3E2B1E) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Poppins, display=Poppins, 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:** 2/4/8/12/16/24/32/48
+- 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 `#5D4432`; 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 (#5D4432) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/cal/DESIGN.md

@@ -0,0 +1,262 @@
+# Design System Inspired by Cal.com
+
+> Category: Productivity & SaaS
+> Open-source scheduling. Clean neutral UI, developer-oriented simplicity.
+
+## 1. Visual Theme & Atmosphere
+
+Cal.com's website is a masterclass in monochromatic restraint — a grayscale world where boldness comes not from color but from the sheer confidence of black text on white space. Inspired by Uber's minimal aesthetic, the palette is deliberately stripped of hue: near-black headings (`#242424`), mid-gray secondary text (`#898989`), and pure white surfaces. Color is treated as a foreign substance — when it appears (a rare blue link, a green trust badge), it feels like a controlled accent in an otherwise black-and-white photograph.
+
+Cal Sans, the brand's custom geometric display typeface designed by Mark Davis, is the visual centerpiece. Letters are intentionally spaced extremely close at large sizes, creating dense, architectural headlines that feel like they're carved into the page. At 64px and 48px, Cal Sans headings sit at weight 600 with a tight 1.10 line-height — confident, compressed, and immediately recognizable. For body text, the system switches to Inter, providing "rock-solid" readability that complements Cal Sans's display personality. The typography pairing creates a clear division: Cal Sans speaks, Inter explains.
+
+The elevation system is notably sophisticated for a minimal site — 11 shadow definitions create a nuanced depth hierarchy using multi-layered shadows that combine ring borders (`0px 0px 0px 1px`), soft diffused shadows, and inset highlights. This shadow-first approach to depth (rather than border-first) gives surfaces a subtle three-dimensionality that feels modern and polished. Built on Framer with a border-radius scale from 2px to 9999px (pill), Cal.com balances geometric precision with soft, rounded interactive elements.
+
+**Key Characteristics:**
+- Purely grayscale brand palette — no brand colors, boldness through monochrome
+- Cal Sans custom geometric display font with extremely tight default letter-spacing
+- Multi-layered shadow system (11 definitions) with ring borders + diffused shadows + inset highlights
+- Cal Sans for headings, Inter for body — clean typographic division
+- Wide border-radius scale from 2px to 9999px (pill) — versatile rounding
+- White canvas with near-black (#242424) text — maximum contrast, zero decoration
+- Product screenshots as primary visual content — the scheduling UI sells itself
+- Built on Framer platform
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Charcoal** (`#242424`): Primary heading and button text — Cal.com's signature near-black, warmer than pure black
+- **Midnight** (`#111111`): Deepest text/overlay color — used at 50% opacity for subtle overlays
+- **White** (`#ffffff`): Primary background and surface — the dominant canvas
+
+### Secondary & Accent
+- **Link Blue** (`#0099ff`): In-text links with underline decoration — the only blue in the system, reserved strictly for hyperlinks
+- **Focus Ring** (`#3b82f6` at 50% opacity): Keyboard focus indicator — accessibility-only, invisible in normal interaction
+- **Default Link** (`#0000ee`): Browser-default link color on some elements — unmodified, signaling openness
+
+### Surface & Background
+- **Pure White** (`#ffffff`): Primary page background and card surfaces
+- **Light Gray** (approx `#f5f5f5`): Subtle section differentiation — barely visible tint
+- **Mid Gray** (`#898989`): Secondary text, descriptions, and muted labels
+
+### Neutrals & Text
+- **Charcoal** (`#242424`): Headlines, buttons, primary UI text
+- **Midnight** (`#111111`): Deep black for high-contrast links and nav text
+- **Mid Gray** (`#898989`): Descriptions, secondary labels, muted content
+- **Pure Black** (`#000000`): Certain link text elements
+- **Border Gray** (approx `rgba(34, 42, 53, 0.08–0.10)`): Shadow-based borders using ring shadows instead of CSS borders
+
+### Semantic & Accent
+- Cal.com is deliberately colorless for brand elements — "a grayscale brand to emphasise on boldness and professionalism"
+- Product UI screenshots show color (blues, greens in the scheduling interface), but the marketing site itself stays monochrome
+- The philosophy mirrors Uber's approach: let the content carry color, the frame stays neutral
+
+### Gradient System
+- No gradients on the marketing site — the design is fully flat and monochrome
+- Depth is achieved entirely through shadows, not color transitions
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `Cal Sans` — custom geometric sans-serif by Mark Davis. Open-source, available on Google Fonts and GitHub. Extremely tight default letter-spacing designed for large headlines. Has 6 character variants (Cc, j, t, u, 0, 1)
+- **Body**: `Inter` — "rock-solid" standard body font. Fallback: `Inter Placeholder`
+- **UI Light**: `Cal Sans UI Variable Light` — light-weight variant (300) for softer UI text with -0.2px letter-spacing
+- **UI Medium**: `Cal Sans UI Medium` — medium-weight variant (500) for emphasized captions
+- **Mono**: `Roboto Mono` — for code blocks and technical content
+- **Tertiary**: `Matter Regular` / `Matter SemiBold` / `Matter Medium` — additional body fonts for specific contexts
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Cal Sans | 64px | 600 | 1.10 | 0px | Maximum impact, tight default spacing |
+| Section Heading | Cal Sans | 48px | 600 | 1.10 | 0px | Large section titles |
+| Feature Heading | Cal Sans | 24px | 600 | 1.30 | 0px | Feature block headlines |
+| Sub-heading | Cal Sans | 20px | 600 | 1.20 | +0.2px | Positive spacing for readability at smaller size |
+| Sub-heading Alt | Cal Sans | 20px | 600 | 1.50 | 0px | Relaxed line-height variant |
+| Card Title | Cal Sans | 16px | 600 | 1.10 | 0px | Smallest Cal Sans usage |
+| Caption Label | Cal Sans | 12px | 600 | 1.50 | 0px | Small labels in Cal Sans |
+| Body Light | Cal Sans UI Light | 18px | 300 | 1.30 | -0.2px | Light-weight body intro text |
+| Body Light Standard | Cal Sans UI Light | 16px | 300 | 1.50 | -0.2px | Light-weight body text |
+| Caption Light | Cal Sans UI Light | 14px | 300 | 1.40–1.50 | -0.2 to -0.28px | Light captions and descriptions |
+| UI Label | Inter | 16px | 600 | 1.00 | 0px | UI buttons and nav labels |
+| Caption Inter | Inter | 14px | 500 | 1.14 | 0px | Small UI text |
+| Micro | Inter | 12px | 500 | 1.00 | 0px | Smallest Inter text |
+| Code | Roboto Mono | 14px | 600 | 1.00 | 0px | Code snippets, technical text |
+| Body Matter | Matter Regular | 14px | 400 | 1.14 | 0px | Alternate body text (product UI) |
+
+### Principles
+- **Cal Sans at large, Inter at small**: Cal Sans is exclusively for headings and display — never for body text. The system enforces this division strictly
+- **Tight by default, space when small**: Cal Sans letters are "intentionally spaced to be extremely close" at large sizes. At 20px and below, positive letter-spacing (+0.2px) must be applied to prevent cramming
+- **Weight 300 body variant**: Cal Sans UI Variable Light at 300 weight creates an elegant, airy body text that contrasts with the dense 600-weight headlines
+- **Weight 600 dominance**: Nearly all Cal Sans usage is at weight 600 (semi-bold) — the font was designed to perform at this weight
+- **Negative tracking on light text**: Cal Sans UI Light uses -0.2px to -0.28px letter-spacing, subtly tightening the already-compact letterforms
+
+## 4. Component Stylings
+
+### Buttons
+- **Dark Primary**: `#242424` (or `#1e1f23`) background, white text, 6–8px radius. Hover: opacity reduction to 0.7. The signature CTA — maximally dark on white
+- **White/Ghost**: White background with shadow-ring border, dark text. Uses the multi-layered shadow system for subtle elevation
+- **Pill**: 9999px radius for rounded pill-shaped actions and badges
+- **Compact**: 4px padding, small text — utility actions within product UI
+- **Inset highlight**: Some buttons feature `rgba(255, 255, 255, 0.15) 0px 2px 0px inset` — a subtle inner-top highlight creating a 3D pressed effect
+
+### Cards & Containers
+- **Shadow Card**: White background, multi-layered shadow — `rgba(19, 19, 22, 0.7) 0px 1px 5px -4px, rgba(34, 42, 53, 0.08) 0px 0px 0px 1px, rgba(34, 42, 53, 0.05) 0px 4px 8px 0px`. The ring shadow (0px 0px 0px 1px) acts as a shadow-border
+- **Product UI Cards**: Screenshots of the scheduling interface displayed in card containers with shadow elevation
+- **Radius**: 8px for standard cards, 12px for larger containers, 16px for prominent sections
+- **Hover**: Likely subtle shadow deepening or scale transform
+
+### Inputs & Forms
+- **Select dropdown**: White background, `#000000` text, 1px solid `rgb(118, 118, 118)` border
+- **Focus**: Uses Framer's focus outline system (`--framer-focus-outline`)
+- **Text input**: 8px radius, standard border treatment
+- **Minimal form presence**: The marketing site prioritizes CTA buttons over complex forms
+
+### Navigation
+- **Top nav**: White/transparent background, Cal Sans links at near-black
+- **Nav text**: `#111111` (Midnight) for primary links, `#000000` for emphasis
+- **CTA button**: Dark Primary in the nav — high contrast call-to-action
+- **Mobile**: Collapses to hamburger with simplified navigation
+- **Sticky**: Fixed on scroll
+
+### Image Treatment
+- **Product screenshots**: Large scheduling UI screenshots — the product is the primary visual
+- **Trust logos**: Grayscale company logos in a horizontal trust bar
+- **Aspect ratios**: Wide landscape for product UI screenshots
+- **No decorative imagery**: No illustrations, photos, or abstract graphics — pure product + typography
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 80px, 96px
+- **Section padding**: 80px–96px vertical between major sections (generous)
+- **Card padding**: 12px–24px internal
+- **Component gaps**: 4px–8px between related elements
+- **Notable jump**: From 28px to 80px — a deliberate gap emphasizing the section-level spacing tier
+
+### Grid & Container
+- **Max width**: ~1200px content container, centered
+- **Column patterns**: Full-width hero, centered text blocks, 2-3 column feature grids
+- **Feature showcase**: Product screenshots flanked by description text
+- **Breakpoints**: 98px, 640px, 768px, 810px, 1024px, 1199px — Framer-generated
+
+### Whitespace Philosophy
+- **Lavish section spacing**: 80px–96px between sections creates a breathable, premium feel
+- **Product-first content**: Screenshots dominate the visual space — minimal surrounding decoration
+- **Centered headlines**: Cal Sans headings centered with generous margins above and below
+
+### Border Radius Scale
+- **2px**: Subtle rounding on inline elements
+- **4px**: Small UI components
+- **6px–7px**: Buttons, small cards, images
+- **8px**: Standard interactive elements — buttons, inputs, images
+- **12px**: Medium containers — links, larger cards, images
+- **16px**: Large section containers
+- **29px**: Special rounded elements
+- **100px**: Large rounding — nearly circular on small elements
+- **1000px**: Very large rounding
+- **9999px**: Full pill shape — badges, links
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow | Page canvas, basic text containers |
+| Level 1 (Inset) | `rgba(0,0,0,0.16) 0px 1px 1.9px 0px inset` | Pressed/recessed elements, input wells |
+| Level 2 (Ring + Soft) | `rgba(19,19,22,0.7) 0px 1px 5px -4px, rgba(34,42,53,0.08) 0px 0px 0px 1px, rgba(34,42,53,0.05) 0px 4px 8px` | Cards, containers — the workhorse shadow |
+| Level 3 (Ring + Soft Alt) | `rgba(36,36,36,0.7) 0px 1px 5px -4px, rgba(36,36,36,0.05) 0px 4px 8px` | Alt card elevation without ring border |
+| Level 4 (Inset Highlight) | `rgba(255,255,255,0.15) 0px 2px 0px inset` or `rgb(255,255,255) 0px 2px 0px inset` | Button inner highlight — 3D pressed effect |
+| Level 5 (Soft Only) | `rgba(34,42,53,0.05) 0px 4px 8px` | Subtle ambient shadow |
+
+### Shadow Philosophy
+Cal.com's shadow system is the most sophisticated element of the design — 11 shadow definitions using a multi-layered compositing technique:
+- **Ring borders**: `0px 0px 0px 1px` shadows act as borders, avoiding CSS `border` entirely. This creates hairline containment without affecting layout
+- **Diffused soft shadows**: `0px 4px 8px` at 5% opacity add gentle ambient depth
+- **Sharp contact shadows**: `0px 1px 5px -4px` at 70% opacity create tight bottom-edge shadows for grounding
+- **Inset highlights**: White inset shadows at the top of buttons create a subtle 3D bevel
+- Shadows are composed in comma-separated stacks — each surface gets 2-3 layered shadow definitions working together
+
+### Decorative Depth
+- No gradients or glow effects
+- All depth comes from the sophisticated shadow compositing system
+- The overall effect is subtle but precise — surfaces feel like physical cards sitting on a table
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Cal Sans exclusively for headings (24px+) and never for body text — it's a display font with tight default spacing
+- Apply positive letter-spacing (+0.2px) when using Cal Sans below 24px — the font cramps at small sizes without it
+- Maintain the grayscale palette — boldness comes from contrast, not color
+- Use the multi-layered shadow system for card elevation — ring shadow + diffused shadow + contact shadow
+- Keep backgrounds pure white — the monochrome philosophy requires a clean canvas
+- Use Inter for all body text at weight 300–600 — it's the reliable counterpart to Cal Sans's display personality
+- Let product screenshots be the visual content — no illustrations, no decorative graphics
+- Apply generous section spacing (80px–96px) — the breathing room is essential to the premium feel
+
+### Don't
+- Use Cal Sans for body text or text below 16px — it wasn't designed for extended reading
+- Add brand colors — Cal.com is intentionally grayscale, color is reserved for links and UI states only
+- Use CSS borders when shadows can achieve the same containment — the ring-shadow technique is the system's approach
+- Apply negative letter-spacing to Cal Sans at small sizes — it needs positive spacing (+0.2px) below 24px
+- Create heavy, dark shadows — Cal.com's shadows are subtle (5% opacity diffused) with sharp contact edges
+- Use illustrations, abstract graphics, or decorative elements — the visual language is typography + product UI only
+- Mix Cal Sans weights — the font is designed for weight 600, other weights break the intended character
+- Reduce section spacing below 48px — the generous whitespace is core to the premium monochrome aesthetic
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hero text ~36px, stacked features, hamburger nav |
+| Tablet Small | 640px–768px | 2-column begins for some elements |
+| Tablet | 768px–810px | Layout adjustments, fuller grid |
+| Tablet Large | 810px–1024px | Multi-column feature grids |
+| Desktop | 1024px–1199px | Full layout, expanded navigation |
+| Large Desktop | >1199px | Max-width container, centered content |
+
+### Touch Targets
+- Buttons: 8px radius with comfortable padding (10px+ vertical)
+- Nav links: Dark text with adequate spacing
+- Mobile CTAs: Full-width dark buttons for easy thumb access
+- Pill badges: 9999px radius creates large, tappable targets
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger on mobile
+- **Hero**: 64px Cal Sans display → ~36px on mobile
+- **Feature grids**: Multi-column → 2-column → single stacked column
+- **Product screenshots**: Scale within containers, maintaining aspect ratios
+- **Section spacing**: Reduces from 80px–96px to ~48px on mobile
+
+### Image Behavior
+- Product screenshots scale responsively
+- Trust logos reflow to multi-row grid on mobile
+- No art direction changes — same compositions at all sizes
+- Images use 7px–12px border-radius for consistent rounded corners
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: Charcoal (`#242424`)
+- Deep Text: Midnight (`#111111`)
+- Secondary Text: Mid Gray (`#898989`)
+- Background: Pure White (`#ffffff`)
+- Link: Link Blue (`#0099ff`)
+- CTA Button: Charcoal (`#242424`) bg, white text
+- Shadow Border: `rgba(34, 42, 53, 0.08)` ring
+
+### Example Component Prompts
+- "Create a hero section with white background, 64px Cal Sans heading at weight 600, line-height 1.10, #242424 text, centered layout with a dark CTA button (#242424, 8px radius, white text)"
+- "Design a scheduling card with white background, multi-layered shadow (0px 1px 5px -4px rgba(19,19,22,0.7), 0px 0px 0px 1px rgba(34,42,53,0.08), 0px 4px 8px rgba(34,42,53,0.05)), 12px radius"
+- "Build a navigation bar with white background, Inter links at 14px weight 500 in #111111, a dark CTA button (#242424), sticky positioning"
+- "Create a trust bar with grayscale company logos, horizontally centered, 16px gap between logos, on white background"
+- "Design a feature section with 48px Cal Sans heading (weight 600, #242424), 16px Inter body text (weight 300, #898989, line-height 1.50), and a product screenshot with 12px radius and the card shadow"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Verify headings use Cal Sans at weight 600, body uses Inter — never mix them
+2. Check that the palette is purely grayscale — if you see brand colors, remove them
+3. Ensure card elevation uses the multi-layered shadow stack, not CSS borders
+4. Confirm section spacing is generous (80px+) — if sections feel cramped, add more space
+5. The overall tone should feel like a clean, professional scheduling tool — monochrome confidence without any decorative flourishes

vibn-frontend/lib/scaffold/open-design/design-systems/canva/DESIGN.md

@@ -0,0 +1,157 @@
+# Design System Inspired by Canva
+
+> Category: Design & Creative
+> Visual creation platform. Vivid purple-blue gradient, generous spacing, friendly geometry.
+
+## 1. Visual Theme & Atmosphere
+
+Canva is the friendly face of design tools — the brand makes a point of looking inviting where Adobe looks intimidating. The page is built on a clean white canvas (`#ffffff`) with a signature **purple-to-blue gradient** (`#7d2ae8` → `#00c4cc`) used in the brand mark, hero buttons, and Pro/Magic moments. Surfaces are generously padded, edges are gently rounded (8–16px), and shadows are soft and cool-toned.
+
+Typography uses **Canva Sans** (a custom geometric sans) for chrome and prose, with rounded letterforms that share DNA with brands like Airbnb and Asana. Weight contrast does the heavy lifting — 800 for hero display, 700 for section heads, 400 for body — while size hierarchy is more compressed than typical product brands so cards and templates read at a glance.
+
+The shape system is ultra-soft: 12px on most cards, 16–20px on larger panels, 9999px on chips. Buttons are rectangles with a subtle elevation shadow (`0 2px 8px rgba(0,0,0,0.06)`) that grows on hover. Iconography is filled and rounded, never line-only — Canva's icons speak the same shape language as its UI.
+
+**Key Characteristics:**
+- White canvas with a violet-to-cyan gradient (`#7d2ae8` → `#00c4cc`)
+- Canva Sans (rounded geometric) for everything; weight contrast over color
+- 12–20px radii everywhere; 9999px pills for chips and tags
+- Soft cool-toned shadows that grow on hover
+- Filled rounded iconography — never outlined
+- Vibrant secondary palette (coral, mint, tangerine) for category tags
+- Pro/Magic moments lit by a static gradient — no animation
+
+## 2. Color Palette & Roles
+
+### Brand Gradient
+- **Canva Purple** (`#7d2ae8`): Brand primary; gradient origin.
+- **Canva Cyan** (`#00c4cc`): Brand secondary; gradient terminus.
+- **Canva Pink** (`#ff5757`): Tertiary brand accent (Magic Studio).
+
+### Surface
+- **Canvas** (`#ffffff`): Primary background.
+- **Surface Subtle** (`#f4f5f7`): Section break, sidebar.
+- **Surface Inset** (`#e8eaed`): Disabled, inset block.
+- **Surface Cool** (`#eef0fc`): Hover tint on purple-themed cards.
+
+### Ink & Text
+- **Ink Primary** (`#0e1318`): Primary text.
+- **Ink Secondary** (`#3c4043`): Body prose.
+- **Ink Muted** (`#5f6368`): Captions, descriptions.
+- **Ink Faint** (`#9aa0a6`): Placeholder, disabled label.
+
+### Semantic
+- **Success** (`#00b894`): Saved, exported.
+- **Warning** (`#ffb020`): Storage limit, advisory.
+- **Error** (`#ff5757`): Validation, destructive.
+- **Info** (`#0d99ff`): Tip, link.
+
+### Category Accents (Template Tags)
+- **Coral** (`#ff7059`): Social posts.
+- **Tangerine** (`#ff9633`): Marketing.
+- **Mint** (`#48c997`): Education.
+- **Sky** (`#3ea6ff`): Business.
+- **Lavender** (`#9b87f5`): Personal.
+
+### Border
+- **Border Default** (`#e1e3e6`): Standard hairline.
+- **Border Strong** (`#c7cdd3`): Emphasized border, hover state.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / UI / Body**: `Canva Sans`, with fallback: `'YS Text', system-ui, -apple-system, sans-serif`
+- **Editorial (rare)**: `Canva Sans Display`, with fallback: `'Canva Sans', sans-serif`
+- **Code (devtools only)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, Consolas, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero | Canva Sans | 64px (4rem) | 800 | 1.05 | -0.02em | Marketing hero, "Design anything." |
+| H1 | Canva Sans | 36px (2.25rem) | 700 | 1.15 | -0.01em | Page heading |
+| H2 | Canva Sans | 24px (1.5rem) | 700 | 1.2 | -0.005em | Section heading |
+| H3 | Canva Sans | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section, card title |
+| Body Large | Canva Sans | 16px (1rem) | 400 | 1.55 | normal | Lede, marketing body |
+| Body | Canva Sans | 14px (0.875rem) | 400 | 1.5 | normal | Standard UI prose |
+| Caption | Canva Sans | 12px (0.75rem) | 500 | 1.4 | 0.005em | Metadata, hint text |
+| Button | Canva Sans | 14px (0.875rem) | 600 | 1.2 | normal | Default button label |
+| Tag | Canva Sans | 11px (0.6875rem) | 600 | 1.2 | 0.04em | Uppercase category chip |
+
+### Principles
+- **Weight contrast over color contrast**: hierarchy steps via 800→700→600→400; the surface stays neutral.
+- **Tight line-height for cards**: card titles use 1.15–1.2 so a 3-line title still fits a 4:3 thumbnail.
+- **No display serif**: Canva is sans-only across all surfaces; serifs appear only as user-selectable template fonts inside the editor.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Gradient)**
+- Background: `linear-gradient(135deg, #7d2ae8, #00c4cc)`
+- Text: `#ffffff`
+- Padding: 12px 20px
+- Radius: 8px
+- Shadow: `0 2px 8px rgba(125, 42, 232, 0.2)`
+- Hover: shadow grows to `0 4px 14px rgba(125, 42, 232, 0.3)`
+- Use: hero CTAs, "Try Canva Pro"
+
+**Primary (Solid Purple)**
+- Background: `#7d2ae8`
+- Text: `#ffffff`
+- Padding: 12px 20px
+- Radius: 8px
+- Hover: `#6815d4`
+
+**Secondary**
+- Background: `#ffffff`
+- Text: `#0e1318`
+- Border: 1px solid `#e1e3e6`
+- Radius: 8px
+- Hover: background `#f4f5f7`, border `#c7cdd3`
+
+**Subtle / Tertiary**
+- Background: `rgba(125, 42, 232, 0.08)`
+- Text: `#7d2ae8`
+- Hover: background `rgba(125, 42, 232, 0.14)`
+
+### Cards / Template Tiles
+- Background: `#ffffff`
+- Border: 1px solid `#e1e3e6`
+- Radius: 12px
+- Shadow at rest: `0 1px 3px rgba(0,0,0,0.04)`
+- Shadow on hover: `0 8px 24px rgba(0,0,0,0.08)`, lift 2px
+- Aspect ratio: thumbnail respects template (1:1, 4:3, 9:16)
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e1e3e6`
+- Radius: 8px
+- Padding: 10px 14px
+- Focus: border `#7d2ae8`, ring `0 0 0 3px rgba(125, 42, 232, 0.16)`
+
+### Chips / Tags
+- Background: category-tinted soft.
+- Text: matching strong category color.
+- Padding: 4px 10px
+- Radius: 9999px
+- Font: 11px / 600 / uppercase
+
+### Pro Badge
+- Background: `linear-gradient(135deg, #7d2ae8, #ff5757)`
+- Text: `#ffffff`
+- Padding: 2px 8px
+- Radius: 9999px
+- Font: 10px / 700 / uppercase
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
+- **Container**: max 1320px, 32px gutter.
+- **Sidebar (editor)**: 320px wide; collapses to 56px icons.
+- **Card grid gap**: 16px on mobile, 24px on desktop.
+
+## 6. Motion
+
+- **Duration**: 180ms for hover; 280ms for menu open; 420ms for editor sidebar collapse.
+- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` (Material-style).
+- **Card lift**: translateY(-2px) + shadow grow on hover, single transition.

vibn-frontend/lib/scaffold/open-design/design-systems/cisco/DESIGN.md

@@ -0,0 +1,201 @@
+# Design System Inspired by Cisco
+
+> Category: Backend & Data
+> Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.
+
+## 1. Visual Theme & Atmosphere
+
+Cisco's current public web presence is enterprise infrastructure rendered with cinematic restraint. The canvas is dark but not pure black: layered navy-charcoal surfaces create depth without resorting to glossy startup gradients. Bright Cisco Blue is used as a precise signal color rather than a wash across the page. The overall impression is "serious global platform" rather than "friendly SaaS app" — large high-confidence headlines, quiet chrome, and product imagery that emphasizes scale, networking, observability, and resilience.
+
+Typography is disciplined and corporate. Cisco's internal and presentation ecosystem points to `CiscoSansTT` as the preferred brand face, while the web experience remains compatible with modern grotesk fallbacks. Headings should feel concise and engineered. Body copy should read clearly and directly, not editorially. Geometrically, the system prefers soft pills for calls to action, rounded-but-not-playful cards, and glass-dark navigation shells floating over large atmospheric sections.
+
+What makes Cisco distinct is the combination of **deep infrastructure darkness** with a **single electric trust signal**. Use blue for the moment that matters: primary action, focus, active tab, chart highlight, or key data edge. Let the rest of the interface stay disciplined.
+
+**Key Characteristics:**
+- Dark navy-charcoal surfaces instead of flat black
+- Cisco Blue (`#049fd9`) as the primary signal color
+- Restrained neutral system built from grays and pale technical whites
+- Enterprise-scale headlines with compact, factual body copy
+- Pill CTAs and rounded control shells, but never toy-like UI
+- Product and platform imagery should suggest networks, telemetry, and systems at scale
+- Motion should feel controlled and infrastructural, not playful
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cisco Blue** (`#049fd9`): High-signal accent, outline CTA, active state, key link.
+- **Status Blue** (`#64bbe3`): Focus halo, secondary emphasis, lightweight chart signal.
+- **Cisco Indigo** (`#005073`): Filled primary CTA, dense accent, deeper data emphasis.
+- **Dark Blue** (`#2b5592`): Secondary brand accent for graphics, charts, and layered blue compositions.
+
+### Neutral / Surface
+- **Dark Gray 1** (`#39393b`): Mid-dark container surface, panel base, dense modules.
+- **Dark Gray 2** (`#58585b`): Borders, separators, secondary shells.
+- **Medium Gray 2** (`#9e9ea2`): Muted labels and low-emphasis metadata.
+- **Pale Gray 1** (`#e8ebf1`): Light text support, cool technical background tint, separators on dark.
+- **Core White** (`#ffffff`): Primary inverse text, bright UI foreground, light surface content.
+
+### Support
+- **Sage Green** (`#abc233`): Positive outcome or infrastructure-health accent.
+- **Status Green** (`#6cc04a`): Success state.
+- **Status Yellow** (`#ffcc00`): Warning or caution state.
+- **Status Orange** (`#ff7300`): Alert or escalation state.
+- **Status Red** (`#cf2030`): Error or critical state.
+
+### Recommended Surface Roles
+- **Primary canvas**: a blue-black or charcoal blend built around `#0f1720` to `#1b2530` using the Cisco palette as anchor.
+- **Elevated card**: Dark Gray 1 (`#39393b`) or a slightly bluer variant.
+- **Border / outline**: Dark Gray 2 (`#58585b`) with subtle transparency when needed.
+- **Primary text on dark**: Core White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`).
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `CiscoSansTT`, fallbacks: `Inter, Arial, Helvetica Neue, Helvetica, sans-serif`
+- **Mono / Technical**: `IBM Plex Mono`, `SF Mono`, or `ui-monospace` if a code-supporting mono face is needed for metrics and IDs
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Hero Display | CiscoSansTT | 72px | 500 | 1.05 | -1.6px | Large launch/positioning headline |
+| Section Display | CiscoSansTT | 56px | 500 | 1.08 | -1.1px | Major section statement |
+| Heading | CiscoSansTT | 32px | 500 | 1.20 | -0.4px | Feature title, card header |
+| Subheading | CiscoSansTT | 24px | 500 | 1.30 | -0.2px | Supporting header |
+| Body | CiscoSansTT | 16px | 400 | 1.55 | normal | Default body copy |
+| Body Small | CiscoSansTT | 14px | 400 | 1.50 | normal | Metadata, nav, helper text |
+| Label / Eyebrow | CiscoSansTT | 12px | 700 | 1.30 | 0.24px | Tags, overlines, section labels |
+| Button | CiscoSansTT | 16px | 500 | 1.20 | normal | CTA labels |
+
+### Principles
+- Keep display typography decisive and compressed, but not ultra-light or editorial.
+- Body copy should be practical and highly legible, with no clever type effects.
+- Use bold weight mainly for short labels, status tags, and compact emphasis.
+- Favor one-family coherence over showy font mixing.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Action Pill**
+- Background: Cisco Indigo (`#005073`)
+- Text: White (`#ffffff`)
+- Radius: full pill
+- Padding: generous horizontal padding, medium vertical height
+- Hover: Dark Blue (`#2b5592`)
+- Active: a darker indigo tone around `#00364d`
+- Focus ring: 2px outer halo in Status Blue (`#64bbe3`) with a 1px white inner keyline on dark surfaces
+- Use case: high-priority submit, deploy, or "learn more" action on dark Cisco surfaces
+
+**Signal Outline Pill**
+- Background: transparent
+- Text: Cisco Blue (`#049fd9`) on dark surfaces, Cisco Indigo (`#005073`) on light surfaces
+- Border: 1.5px Cisco Blue (`#049fd9`)
+- Radius: full pill
+- Hover: blue-tinted surface fill with the text color preserved
+- Focus ring: same visible halo pairing as the primary button
+- Use case: brand-forward secondary action that keeps Cisco Blue prominent without sacrificing contrast
+
+**Secondary Dark Pill**
+- Background: transparent or dark surface
+- Text: White or Pale Gray 1
+- Border: Dark Gray 2 (`#58585b`)
+- Radius: full pill
+- Purpose: low-noise secondary CTA
+
+### Cards & Containers
+- Background: layered dark surface based on `#39393b` or a cooler navy-charcoal adaptation
+- Border: 1px subtle border using `#58585b`
+- Radius: 16px to 20px
+- Shadow: minimal; depth should come mostly from surface contrast and spacing
+
+### Navigation
+- Dark glass-like masthead or shell over a dark hero
+- Text: White / Pale Gray 1
+- Active state: Cisco Blue underline, chip, or glow
+- Navigation should feel like product chrome, not marketing candy
+
+### Data / Product Modules
+- Charts and diagrams should use Cisco Blue as primary highlight and keep supporting colors minimal
+- Use green/yellow/red only for actual operational meaning
+- Dense technical blocks should still preserve breathing room and hierarchy
+
+### Brand-Specific Recipes
+
+**Network Telemetry Card**
+- Anatomy: eyebrow label, large metric, delta chip, 12-24h sparkline, quiet footer metadata
+- Density: compact but not cramped; 16px-24px padding with clear alignment to chart axes
+- States: normal, selected, degraded, critical, loading skeleton
+- Brand behavior: use Cisco Blue for the selected edge or sparkline, and semantic colors only for health state
+
+**Topology / Product Diagram Module**
+- Anatomy: title, system canvas, node chips, connection lines, side legend
+- Visual rule: dark field first, blue path highlight second, all other nodes muted until active
+- States: idle overview, hovered path, selected node, degraded route
+
+**Dense Control Panel**
+- Anatomy: left nav rail, filter bar, split metric region, log/event table, contextual right rail
+- Control sizing: compact 36px inputs are acceptable on desktop, but action buttons remain 44px minimum height
+- States: quiet default, blue active filter, clear warning/error escalation
+
+## 5. Layout Principles
+
+### Spacing & Grid
+- Base rhythm: 8px
+- Common scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
+- Prefer wide desktop containers and large sectional spacing
+- 12-column desktop layout with generous gutters works well for the brand
+- Breakpoints: mobile up to 767px, tablet 768px-1199px, desktop 1200px and above
+
+### Composition
+- Alternate expansive hero/outcome sections with denser information bands
+- Use asymmetry where it serves product imagery or system diagrams
+- Large dark fields with one blue focal point are more on-brand than many small colorful fragments
+- On tablet, reduce wide split layouts to 2-column modules and keep telemetry cards in pairs
+- On mobile, collapse hero side-by-sides to a single column, stack data panels vertically, and convert dense control rows into progressive disclosure panels
+- Navigation should collapse from a full masthead to a compact menu button plus one primary CTA on tablet/mobile
+
+### Accessibility & Responsiveness
+- Minimum touch target: 44px by 44px for any tappable control
+- Keyboard focus must remain visible on every interactive element via the blue outer halo plus white inner keyline pairing
+- Do not rely on hover-only disclosure; show essential state and actions on focus and touch
+- Preserve readable line lengths on desktop and avoid more than 3 cards per row on tablet or 1 card per row on small phones
+
+## 6. Motion & Interaction
+
+- Motion should be controlled, smooth, and systems-like
+- Use fade, rise, subtle slide, and restrained glow
+- Interaction timing: roughly 160ms–260ms for control response, 320ms–500ms for larger section reveals
+- Avoid bouncy springs, elastic easing, or playful overshoot
+- Respect `prefers-reduced-motion`: remove parallax and staged reveals, keep only instant state swaps or short opacity transitions under 120ms
+
+## 7. Voice & Brand
+
+- Voice is confident, technical, and outcome-oriented
+- Headlines should sound like platform positioning or systems value, not consumer lifestyle copy
+- Use language that suggests trust, resilience, infrastructure, AI readiness, and operational scale
+- The brand should feel global, mission-critical, and composed under pressure
+
+## 8. Anti-patterns
+
+- Do not turn Cisco into a generic gradient startup site
+- Do not flood the page with many equally loud accent colors
+- Do not use pastel palettes or lifestyle-illustration aesthetics
+- Do not use overly rounded, bubbly controls
+- Do not rely on pure black alone; use layered charcoals and deep blue-blacks instead
+- Do not make body copy feel whimsical, editorial, or ironic
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary signal: Cisco Blue (`#049fd9`)
+- Hover / secondary signal: Status Blue (`#64bbe3`)
+- Deep accent: Cisco Indigo (`#005073`)
+- Mid-dark surface: Dark Gray 1 (`#39393b`)
+- Border: Dark Gray 2 (`#58585b`)
+- Inverse text: White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`)
+
+### Example Component Prompts
+- "Create a Cisco-style dark enterprise landing page with layered navy-charcoal surfaces, a bright Cisco Blue primary CTA, and a 72px high-confidence hero headline."
+- "Design a technical dashboard card on a dark surface with a subtle gray border, white text, and Cisco Blue chart highlights."
+- "Build a dark glass navigation bar with restrained white labels and one Cisco Blue active indicator."

vibn-frontend/lib/scaffold/open-design/design-systems/claude/DESIGN.md

@@ -0,0 +1,315 @@
+# Design System Inspired by Claude (Anthropic)
+
+> Category: AI & LLM
+> Anthropic's AI assistant. Warm terracotta accent, clean editorial layout.
+
+## 1. Visual Theme & Atmosphere
+
+Claude's interface is a literary salon reimagined as a product page — warm, unhurried, and quietly intellectual. The entire experience is built on a parchment-toned canvas (`#f5f4ed`) that deliberately evokes the feeling of high-quality paper rather than a digital surface. Where most AI product pages lean into cold, futuristic aesthetics, Claude's design radiates human warmth, as if the AI itself has good taste in interior design.
+
+The signature move is the custom Anthropic Serif typeface — a medium-weight serif with generous proportions that gives every headline the gravitas of a book title. Combined with organic, hand-drawn-feeling illustrations in terracotta (`#c96442`), black, and muted green, the visual language says "thoughtful companion" rather than "powerful tool." The serif headlines breathe at tight-but-comfortable line-heights (1.10–1.30), creating a cadence that feels more like reading an essay than scanning a product page.
+
+What makes Claude's design truly distinctive is its warm neutral palette. Every gray has a yellow-brown undertone (`#5e5d59`, `#87867f`, `#4d4c48`) — there are no cool blue-grays anywhere. Borders are cream-tinted (`#f0eee6`, `#e8e6dc`), shadows use warm transparent blacks, and even the darkest surfaces (`#141413`, `#30302e`) carry a barely perceptible olive warmth. This chromatic consistency creates a space that feels lived-in and trustworthy.
+
+**Key Characteristics:**
+- Warm parchment canvas (`#f5f4ed`) evoking premium paper, not screens
+- Custom Anthropic type family: Serif for headlines, Sans for UI, Mono for code
+- Terracotta brand accent (`#c96442`) — warm, earthy, deliberately un-tech
+- Exclusively warm-toned neutrals — every gray has a yellow-brown undertone
+- Organic, editorial illustrations replacing typical tech iconography
+- Ring-based shadow system (`0px 0px 0px 1px`) creating border-like depth without visible borders
+- Magazine-like pacing with generous section spacing and serif-driven hierarchy
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Anthropic Near Black** (`#141413`): The primary text color and dark-theme surface — not pure black but a warm, almost olive-tinted dark that's gentler on the eyes. The warmest "black" in any major tech brand.
+- **Terracotta Brand** (`#c96442`): The core brand color — a burnt orange-brown used for primary CTA buttons, brand moments, and the signature accent. Deliberately earthy and un-tech.
+- **Coral Accent** (`#d97757`): A lighter, warmer variant of the brand color used for text accents, links on dark surfaces, and secondary emphasis.
+
+### Secondary & Accent
+- **Error Crimson** (`#b53333`): A deep, warm red for error states — serious without being alarming.
+- **Focus Blue** (`#3898ec`): Standard blue for input focus rings — the only cool color in the entire system, used purely for accessibility.
+
+### Surface & Background
+- **Parchment** (`#f5f4ed`): The primary page background — a warm cream with a yellow-green tint that feels like aged paper. The emotional foundation of the entire design.
+- **Ivory** (`#faf9f5`): The lightest surface — used for cards and elevated containers on the Parchment background. Barely distinguishable but creates subtle layering.
+- **Pure White** (`#ffffff`): Reserved for specific button surfaces and maximum-contrast elements.
+- **Warm Sand** (`#e8e6dc`): Button backgrounds and prominent interactive surfaces — a noticeably warm light gray.
+- **Dark Surface** (`#30302e`): Dark-theme containers, nav borders, and elevated dark elements — warm charcoal.
+- **Deep Dark** (`#141413`): Dark-theme page background and primary dark surface.
+
+### Neutrals & Text
+- **Charcoal Warm** (`#4d4c48`): Button text on light warm surfaces — the go-to dark-on-light text.
+- **Olive Gray** (`#5e5d59`): Secondary body text — a distinctly warm medium-dark gray.
+- **Stone Gray** (`#87867f`): Tertiary text, footnotes, and de-emphasized metadata.
+- **Dark Warm** (`#3d3d3a`): Dark text links and emphasized secondary text.
+- **Warm Silver** (`#b0aea5`): Text on dark surfaces — a warm, parchment-tinted light gray.
+
+### Semantic & Accent
+- **Border Cream** (`#f0eee6`): Standard light-theme border — barely visible warm cream, creating the gentlest possible containment.
+- **Border Warm** (`#e8e6dc`): Prominent borders, section dividers, and emphasized containment on light surfaces.
+- **Border Dark** (`#30302e`): Standard border on dark surfaces — maintains the warm tone.
+- **Ring Warm** (`#d1cfc5`): Shadow ring color for button hover/focus states.
+- **Ring Subtle** (`#dedc01`): Secondary ring variant for lighter interactive surfaces.
+- **Ring Deep** (`#c2c0b6`): Deeper ring for active/pressed states.
+
+### Gradient System
+- Claude's design is **gradient-free** in the traditional sense. Depth and visual richness come from the interplay of warm surface tones, organic illustrations, and light/dark section alternation. The warm palette itself creates a "gradient" effect as the eye moves through cream → sand → stone → charcoal → black sections.
+
+## 3. Typography Rules
+
+### Font Family
+- **Headline**: `Anthropic Serif`, with fallback: `Georgia`
+- **Body / UI**: `Anthropic Sans`, with fallback: `Arial`
+- **Code**: `Anthropic Mono`, with fallback: `Arial`
+
+*Note: These are custom typefaces. For external implementations, Georgia serves as the serif substitute and system-ui/Inter as the sans substitute.*
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Anthropic Serif | 64px (4rem) | 500 | 1.10 (tight) | normal | Maximum impact, book-title presence |
+| Section Heading | Anthropic Serif | 52px (3.25rem) | 500 | 1.20 (tight) | normal | Feature section anchors |
+| Sub-heading Large | Anthropic Serif | 36–36.8px (~2.3rem) | 500 | 1.30 | normal | Secondary section markers |
+| Sub-heading | Anthropic Serif | 32px (2rem) | 500 | 1.10 (tight) | normal | Card titles, feature names |
+| Sub-heading Small | Anthropic Serif | 25–25.6px (~1.6rem) | 500 | 1.20 | normal | Smaller section titles |
+| Feature Title | Anthropic Serif | 20.8px (1.3rem) | 500 | 1.20 | normal | Small feature headings |
+| Body Serif | Anthropic Serif | 17px (1.06rem) | 400 | 1.60 (relaxed) | normal | Serif body text (editorial passages) |
+| Body Large | Anthropic Sans | 20px (1.25rem) | 400 | 1.60 (relaxed) | normal | Intro paragraphs |
+| Body / Nav | Anthropic Sans | 17px (1.06rem) | 400–500 | 1.00–1.60 | normal | Navigation links, UI text |
+| Body Standard | Anthropic Sans | 16px (1rem) | 400–500 | 1.25–1.60 | normal | Standard body, button text |
+| Body Small | Anthropic Sans | 15px (0.94rem) | 400–500 | 1.00–1.60 | normal | Compact body text |
+| Caption | Anthropic Sans | 14px (0.88rem) | 400 | 1.43 | normal | Metadata, descriptions |
+| Label | Anthropic Sans | 12px (0.75rem) | 400–500 | 1.25–1.60 | 0.12px | Badges, small labels |
+| Overline | Anthropic Sans | 10px (0.63rem) | 400 | 1.60 | 0.5px | Uppercase overline labels |
+| Micro | Anthropic Sans | 9.6px (0.6rem) | 400 | 1.60 | 0.096px | Smallest text |
+| Code | Anthropic Mono | 15px (0.94rem) | 400 | 1.60 | -0.32px | Inline code, terminal |
+
+### Principles
+- **Serif for authority, sans for utility**: Anthropic Serif carries all headline content with medium weight (500), giving every heading the gravitas of a published title. Anthropic Sans handles all functional UI text — buttons, labels, navigation — with quiet efficiency.
+- **Single weight for serifs**: All Anthropic Serif headings use weight 500 — no bold, no light. This creates a consistent "voice" across all headline sizes, as if the same author wrote every heading.
+- **Relaxed body line-height**: Most body text uses 1.60 line-height — significantly more generous than typical tech sites (1.4–1.5). This creates a reading experience closer to a book than a dashboard.
+- **Tight-but-not-compressed headings**: Line-heights of 1.10–1.30 for headings are tight but never claustrophobic. The serif letterforms need breathing room that sans-serif fonts don't.
+- **Micro letter-spacing on labels**: Small sans text (12px and below) uses deliberate letter-spacing (0.12px–0.5px) to maintain readability at tiny sizes.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Warm Sand (Secondary)**
+- Background: Warm Sand (`#e8e6dc`)
+- Text: Charcoal Warm (`#4d4c48`)
+- Padding: 0px 12px 0px 8px (asymmetric — icon-first layout)
+- Radius: comfortably rounded (8px)
+- Shadow: ring-based (`#e8e6dc 0px 0px 0px 0px, #d1cfc5 0px 0px 0px 1px`)
+- The workhorse button — warm, unassuming, clearly interactive
+
+**White Surface**
+- Background: Pure White (`#ffffff`)
+- Text: Anthropic Near Black (`#141413`)
+- Padding: 8px 16px 8px 12px
+- Radius: generously rounded (12px)
+- Hover: shifts to secondary background color
+- Clean, elevated button for light surfaces
+
+**Dark Charcoal**
+- Background: Dark Surface (`#30302e`)
+- Text: Ivory (`#faf9f5`)
+- Padding: 0px 12px 0px 8px
+- Radius: comfortably rounded (8px)
+- Shadow: ring-based (`#30302e 0px 0px 0px 0px, ring 0px 0px 0px 1px`)
+- The inverted variant for dark-on-light emphasis
+
+**Brand Terracotta**
+- Background: Terracotta Brand (`#c96442`)
+- Text: Ivory (`#faf9f5`)
+- Radius: 8–12px
+- Shadow: ring-based (`#c96442 0px 0px 0px 0px, #c96442 0px 0px 0px 1px`)
+- The primary CTA — the only button with chromatic color
+
+**Dark Primary**
+- Background: Anthropic Near Black (`#141413`)
+- Text: Warm Silver (`#b0aea5`)
+- Padding: 9.6px 16.8px
+- Radius: generously rounded (12px)
+- Border: thin solid Dark Surface (`1px solid #30302e`)
+- Used on dark theme surfaces
+
+### Cards & Containers
+- Background: Ivory (`#faf9f5`) or Pure White (`#ffffff`) on light surfaces; Dark Surface (`#30302e`) on dark
+- Border: thin solid Border Cream (`1px solid #f0eee6`) on light; `1px solid #30302e` on dark
+- Radius: comfortably rounded (8px) for standard cards; generously rounded (16px) for featured; very rounded (32px) for hero containers and embedded media
+- Shadow: whisper-soft (`rgba(0,0,0,0.05) 0px 4px 24px`) for elevated content
+- Ring shadow: `0px 0px 0px 1px` patterns for interactive card states
+- Section borders: `1px 0px 0px` (top-only) for list item separators
+
+### Inputs & Forms
+- Text: Anthropic Near Black (`#141413`)
+- Padding: 1.6px 12px (very compact vertical)
+- Border: standard warm borders
+- Focus: ring with Focus Blue (`#3898ec`) border-color — the only cool color moment
+- Radius: generously rounded (12px)
+
+### Navigation
+- Sticky top nav with warm background
+- Logo: Claude wordmark in Anthropic Near Black
+- Links: mix of Near Black (`#141413`), Olive Gray (`#5e5d59`), and Dark Warm (`#3d3d3a`)
+- Nav border: `1px solid #30302e` (dark) or `1px solid #f0eee6` (light)
+- CTA: Terracotta Brand button or White Surface button
+- Hover: text shifts to foreground-primary, no decoration
+
+### Image Treatment
+- Product screenshots showing the Claude chat interface
+- Generous border-radius on media (16–32px)
+- Embedded video players with rounded corners
+- Dark UI screenshots provide contrast against warm light canvas
+- Organic, hand-drawn illustrations for conceptual sections
+
+### Distinctive Components
+
+**Model Comparison Cards**
+- Opus 4.5, Sonnet 4.5, Haiku 4.5 presented in a clean card grid
+- Each model gets a bordered card with name, description, and capability badges
+- Border Warm (`#e8e6dc`) separation between items
+
+**Organic Illustrations**
+- Hand-drawn-feeling vector illustrations in terracotta, black, and muted green
+- Abstract, conceptual rather than literal product diagrams
+- The primary visual personality — no other AI company uses this style
+
+**Dark/Light Section Alternation**
+- The page alternates between Parchment light and Near Black dark sections
+- Creates a reading rhythm like chapters in a book
+- Each section feels like a distinct environment
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 3px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 30px
+- Button padding: asymmetric (0px 12px 0px 8px) or balanced (8px 16px)
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: generous (estimated 80–120px between major sections)
+
+### Grid & Container
+- Max container width: approximately 1200px, centered
+- Hero: centered with editorial layout
+- Feature sections: single-column or 2–3 column card grids
+- Model comparison: clean 3-column grid
+- Full-width dark sections breaking the container for emphasis
+
+### Whitespace Philosophy
+- **Editorial pacing**: Each section breathes like a magazine spread — generous top/bottom margins create natural reading pauses.
+- **Serif-driven rhythm**: The serif headings establish a literary cadence that demands more whitespace than sans-serif designs.
+- **Content island approach**: Sections alternate between light and dark environments, creating distinct "rooms" for each message.
+
+### Border Radius Scale
+- Sharp (4px): Minimal inline elements
+- Subtly rounded (6–7.5px): Small buttons, secondary interactive elements
+- Comfortably rounded (8–8.5px): Standard buttons, cards, containers
+- Generously rounded (12px): Primary buttons, input fields, nav elements
+- Very rounded (16px): Featured containers, video players, tab lists
+- Highly rounded (24px): Tag-like elements, highlighted containers
+- Maximum rounded (32px): Hero containers, embedded media, large cards
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Parchment background, inline text |
+| Contained (Level 1) | `1px solid #f0eee6` (light) or `1px solid #30302e` (dark) | Standard cards, sections |
+| Ring (Level 2) | `0px 0px 0px 1px` ring shadows using warm grays | Interactive cards, buttons, hover states |
+| Whisper (Level 3) | `rgba(0,0,0,0.05) 0px 4px 24px` | Elevated feature cards, product screenshots |
+| Inset (Level 4) | `inset 0px 0px 0px 1px` at 15% opacity | Active/pressed button states |
+
+**Shadow Philosophy**: Claude communicates depth through **warm-toned ring shadows** rather than traditional drop shadows. The signature `0px 0px 0px 1px` pattern creates a border-like halo that's softer than an actual border — it's a shadow pretending to be a border, or a border that's technically a shadow. When drop shadows do appear, they're extremely soft (0.05 opacity, 24px blur) — barely visible lifts that suggest floating rather than casting.
+
+### Decorative Depth
+- **Light/Dark alternation**: The most dramatic depth effect comes from alternating between Parchment (`#f5f4ed`) and Near Black (`#141413`) sections — entire sections shift elevation by changing the ambient light level.
+- **Warm ring halos**: Button and card interactions use ring shadows that match the warm palette — never cool-toned or generic gray.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Parchment (`#f5f4ed`) as the primary light background — the warm cream tone IS the Claude personality
+- Use Anthropic Serif at weight 500 for all headlines — the single-weight consistency is intentional
+- Use Terracotta Brand (`#c96442`) only for primary CTAs and the highest-signal brand moments
+- Keep all neutrals warm-toned — every gray should have a yellow-brown undertone
+- Use ring shadows (`0px 0px 0px 1px`) for interactive element states instead of drop shadows
+- Maintain the editorial serif/sans hierarchy — serif for content headlines, sans for UI
+- Use generous body line-height (1.60) for a literary reading experience
+- Alternate between light and dark sections to create chapter-like page rhythm
+- Apply generous border-radius (12–32px) for a soft, approachable feel
+
+### Don't
+- Don't use cool blue-grays anywhere — the palette is exclusively warm-toned
+- Don't use bold (700+) weight on Anthropic Serif — weight 500 is the ceiling for serifs
+- Don't introduce saturated colors beyond Terracotta — the palette is deliberately muted
+- Don't use sharp corners (< 6px radius) on buttons or cards — softness is core to the identity
+- Don't apply heavy drop shadows — depth comes from ring shadows and background color shifts
+- Don't use pure white (`#ffffff`) as a page background — Parchment (`#f5f4ed`) or Ivory (`#faf9f5`) are always warmer
+- Don't use geometric/tech-style illustrations — Claude's illustrations are organic and hand-drawn-feeling
+- Don't reduce body line-height below 1.40 — the generous spacing supports the editorial personality
+- Don't use monospace fonts for non-code content — Anthropic Mono is strictly for code
+- Don't mix in sans-serif for headlines — the serif/sans split is the typographic identity
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <479px | Minimum layout, stacked everything, compact typography |
+| Mobile | 479–640px | Single column, hamburger nav, reduced heading sizes |
+| Large Mobile | 640–767px | Slightly wider content area |
+| Tablet | 768–991px | 2-column grids begin, condensed nav |
+| Desktop | 992px+ | Full multi-column layout, expanded nav, maximum hero typography (64px) |
+
+### Touch Targets
+- Buttons use generous padding (8–16px vertical minimum)
+- Navigation links adequately spaced for thumb navigation
+- Card surfaces serve as large touch targets
+- Minimum recommended: 44x44px
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav collapses to hamburger on mobile
+- **Feature sections**: Multi-column → stacked single column
+- **Hero text**: 64px → 36px → ~25px progressive scaling
+- **Model cards**: 3-column → stacked vertical
+- **Section padding**: Reduces proportionally but maintains editorial rhythm
+- **Illustrations**: Scale proportionally, maintain aspect ratios
+
+### Image Behavior
+- Product screenshots scale proportionally within rounded containers
+- Illustrations maintain quality at all sizes
+- Video embeds maintain 16:9 aspect ratio with rounded corners
+- No art direction changes between breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand CTA: "Terracotta Brand (#c96442)"
+- Page Background: "Parchment (#f5f4ed)"
+- Card Surface: "Ivory (#faf9f5)"
+- Primary Text: "Anthropic Near Black (#141413)"
+- Secondary Text: "Olive Gray (#5e5d59)"
+- Tertiary Text: "Stone Gray (#87867f)"
+- Borders (light): "Border Cream (#f0eee6)"
+- Dark Surface: "Dark Surface (#30302e)"
+
+### Example Component Prompts
+- "Create a hero section on Parchment (#f5f4ed) with a headline at 64px Anthropic Serif weight 500, line-height 1.10. Use Anthropic Near Black (#141413) text. Add a subtitle in Olive Gray (#5e5d59) at 20px Anthropic Sans with 1.60 line-height. Place a Terracotta Brand (#c96442) CTA button with Ivory text, 12px radius."
+- "Design a feature card on Ivory (#faf9f5) with a 1px solid Border Cream (#f0eee6) border and comfortably rounded corners (8px). Title in Anthropic Serif at 25px weight 500, description in Olive Gray (#5e5d59) at 16px Anthropic Sans. Add a whisper shadow (rgba(0,0,0,0.05) 0px 4px 24px)."
+- "Build a dark section on Anthropic Near Black (#141413) with Ivory (#faf9f5) headline text in Anthropic Serif at 52px weight 500. Use Warm Silver (#b0aea5) for body text. Borders in Dark Surface (#30302e)."
+- "Create a button in Warm Sand (#e8e6dc) with Charcoal Warm (#4d4c48) text, 8px radius, and a ring shadow (0px 0px 0px 1px #d1cfc5). Padding: 0px 12px 0px 8px."
+- "Design a model comparison grid with three cards on Ivory surfaces. Each card gets a Border Warm (#e8e6dc) top border, model name in Anthropic Serif at 25px, and description in Olive Gray at 15px Anthropic Sans."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Reference specific color names — "use Olive Gray (#5e5d59)" not "make it gray"
+3. Always specify warm-toned variants — no cool grays
+4. Describe serif vs sans usage explicitly — "Anthropic Serif for the heading, Anthropic Sans for the label"
+5. For shadows, use "ring shadow (0px 0px 0px 1px)" or "whisper shadow" — never generic "drop shadow"
+6. Specify the warm background — "on Parchment (#f5f4ed)" or "on Near Black (#141413)"
+7. Keep illustrations organic and conceptual — describe "hand-drawn-feeling" style

vibn-frontend/lib/scaffold/open-design/design-systems/clay/DESIGN.md

@@ -0,0 +1,307 @@
+# Design System Inspired by Clay
+
+> Category: Design & Creative
+> Creative agency. Organic shapes, soft gradients, art-directed layout.
+
+## 1. Visual Theme & Atmosphere
+
+Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.
+
+The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.
+
+What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.
+
+**Key Characteristics:**
+- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical
+- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
+- Roobert font with 5 OpenType stylistic sets — quirky geometric character
+- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
+- Space Mono for code and technical labels
+- Generous border radius: 24px cards, 40px sections, 1584px pills
+- Mixed border styles: solid + dashed in the same interface
+- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
+- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
+- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
+
+### Swatch Palette — Named Colors
+
+**Matcha (Green)**
+- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent
+- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
+- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections
+
+**Slushie (Cyan)**
+- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent
+- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
+
+**Lemon (Gold)**
+- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
+- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
+- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
+- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
+
+**Ube (Purple)**
+- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
+- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
+- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
+
+**Pomegranate (Pink/Red)**
+- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink
+
+**Blueberry (Navy Blue)**
+- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
+
+### Neutral Scale (Warm)
+- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
+- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
+- **Dark Charcoal** (`#333333`): Link text on light backgrounds
+
+### Surface & Border
+- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
+- **Oat Light** (`#eee9df`): Secondary lighter border
+- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
+- **Dark Border** (`#525a69`): Border on dark sections
+- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
+
+### Badges
+- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
+- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
+- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
+
+### Shadows
+- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
+- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Roobert`, fallback: `Arial`
+- **Monospace**: `Space Mono`
+- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
+| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
+| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
+| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
+| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
+| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
+| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
+| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
+| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
+| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
+| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
+| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
+| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
+| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
+| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
+| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
+
+### Principles
+- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
+- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
+- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.
+- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Transparent with Hover Animation)**
+- Background: transparent (`rgba(239, 241, 243, 0)`)
+- Text: `#000000`
+- Padding: 6.4px 12.8px
+- Border: none (or `1px solid #717989` for outlined variant)
+- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
+- Focus: `rgb(20, 110, 245) solid 2px` outline
+
+**White Solid**
+- Background: `#ffffff`
+- Text: `#000000`
+- Padding: 6.4px
+- Hover: oat-200 swatch color, animated rotation + shadow
+- Use: Primary CTA on colored sections
+
+**Ghost Outlined**
+- Background: transparent
+- Text: `#000000`
+- Padding: 8px
+- Border: `1px solid #717989`
+- Radius: 4px
+- Hover: dragonfruit swatch color, white text, animated rotation
+
+### Cards & Containers
+- Background: `#ffffff` on cream canvas
+- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
+- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
+- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
+- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)
+
+### Inputs & Forms
+- Text: `#000000`
+- Border: `1px solid #717989`
+- Radius: 4px
+- Focus: `rgb(20, 110, 245) solid 2px` outline
+
+### Navigation
+- Sticky top nav on cream background
+- Roobert 15px weight 500 for nav links
+- Clay logo left-aligned
+- CTA buttons right-aligned with pill radius
+- Border bottom: `1px solid #dad4c8`
+- Mobile: hamburger collapse at 767px
+
+### Image Treatment
+- Product screenshots in white cards with oat borders
+- Colorful illustrated sections with swatch background colors
+- 8px–24px radius on images
+- Full-width colorful section backgrounds
+
+### Distinctive Components
+
+**Swatch Color Sections**
+- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
+- White text on dark swatches, black text on light swatches
+- Each section tells a distinct product story through its color
+
+**Playful Hover Buttons**
+- Rotate -8deg + translate upward on hover
+- Hard offset shadow (`-7px 7px`) instead of soft blur
+- Background transitions to contrasting swatch color
+- Creates a physical, toy-like interaction quality
+
+**Dashed Border Elements**
+- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
+- Used for secondary containers and decorative elements
+- Adds a hand-drawn, craft-like quality
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
+
+### Grid & Container
+- Max content width centered
+- Feature sections alternate between white cards and colorful swatch backgrounds
+- Card grids: 2–3 columns on desktop
+- Full-width colorful sections break the grid
+- Footer with generous 40px radius container
+
+### Whitespace Philosophy
+- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
+- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
+- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.
+
+### Border Radius Scale
+- Sharp (4px): Ghost buttons, inputs
+- Standard (8px): Small cards, images, links
+- Badge (11px): Tag badges
+- Card (12px): Standard cards, buttons
+- Feature (24px): Feature cards, images, panels
+- Section (40px): Large sections, footer, containers
+- Pill (1584px): CTAs, pill-shaped buttons
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, cream canvas | Page background |
+| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
+| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
+| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
+
+**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.
+
+### Decorative Depth
+- Full-width swatch-colored sections create dramatic depth through color contrast
+- Dashed borders add visual texture alongside solid borders
+- Product illustrations with warm, organic art style
+
+## 7. Do's and Don'ts
+
+### Do
+- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
+- Apply all 5 OpenType stylistic sets on Roobert headings: `"ss01", "ss03", "ss10", "ss11", "ss12"`
+- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
+- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`
+- Use warm oat borders (`#dad4c8`) — not neutral gray
+- Mix solid and dashed borders for visual variety
+- Use generous radius: 24px for cards, 40px for sections
+- Use weight 600 exclusively for headings, 500 for UI, 400 for body
+
+### Don't
+- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
+- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones
+- Don't mix more than 2 swatch colors in the same section
+- Don't skip the OpenType stylistic sets — they define Roobert's character
+- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
+- Don't use small border radius (<12px) on feature cards — the generous rounding is structural
+- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
+- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <479px | Single column, tight padding |
+| Mobile | 479–767px | Standard mobile, stacked layout |
+| Tablet | 768–991px | 2-column grids, condensed nav |
+| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
+
+### Touch Targets
+- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
+- Nav links: 15px font with generous spacing
+- Mobile: full-width buttons for easy tapping
+
+### Collapsing Strategy
+- Hero: 80px → 60px → smaller display text
+- Navigation: horizontal → hamburger at 767px
+- Feature sections: multi-column → stacked
+- Colorful sections: maintain full-width but compress padding
+- Card grids: 3-column → 2-column → single column
+
+### Image Behavior
+- Product screenshots scale proportionally
+- Colorful section illustrations adapt to viewport width
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Warm Cream (`#faf9f7`)
+- Text: Clay Black (`#000000`)
+- Secondary text: Warm Silver (`#9f9b93`)
+- Border: Oat Border (`#dad4c8`)
+- Green accent: Matcha 600 (`#078a52`)
+- Cyan accent: Slushie 500 (`#3bd3fd`)
+- Gold accent: Lemon 500 (`#fbbd41`)
+- Purple accent: Ube 800 (`#43089f`)
+- Pink accent: Pomegranate 400 (`#fc7981`)
+
+### Example Component Prompts
+- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
+- "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
+- "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
+- "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
+- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
+
+### Iteration Guide
+1. Start with warm cream (#faf9f7) — never cool white
+2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
+3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
+4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
+5. Hover animations are the signature — rotation + hard shadow, not subtle fades
+6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
+7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles

vibn-frontend/lib/scaffold/open-design/design-systems/claymorphism/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Claymorphism
+
+> Category: Morphism & Effects
+> Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
+
+## 1. Visual Theme & Atmosphere
+
+Soft, rounded 3D-like shapes mimicking malleable clay with playful, puffy elements and colorful surfaces.
+
+- **Visual style:** modern, high-contrast, playful
+- **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:** `#FFFFFF` — 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:** `#1C398E` — 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 (#1C398E) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Montserrat, display=Poppins, 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.

vibn-frontend/lib/scaffold/open-design/design-systems/clean/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Clean
+
+> Category: Modern & Minimal
+> Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
+
+## 1. Visual Theme & Atmosphere
+
+Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.
+
+- **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=Roboto, display=Poppins, mono=Inconsolata
+- **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 `#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.

vibn-frontend/lib/scaffold/open-design/design-systems/clickhouse/DESIGN.md

@@ -0,0 +1,284 @@
+# Design System Inspired by ClickHouse
+
+> Category: Backend & Data
+> Fast analytics database. Yellow-accented, technical documentation style.
+
+## 1. Visual Theme & Atmosphere
+
+ClickHouse's interface is a high-performance cockpit rendered in acid yellow-green on obsidian black — a design that screams "speed" before you read a single word. The entire experience lives in darkness: pure black backgrounds (`#000000`) with dark charcoal cards (`#414141` borders) creating a terminal-grade aesthetic where the only chromatic interruption is the signature neon yellow-green (`#faff69`) that slashes across CTAs, borders, and highlighted moments like a highlighter pen on a dark console.
+
+The typography is aggressively heavy — Inter at weight 900 (Black) for the hero headline at 96px creates text blocks that feel like they have physical mass. This "database for AI" site communicates raw power through visual weight: thick type, high-contrast neon accents, and performance stats displayed as oversized numbers. There's nothing subtle about ClickHouse's design, and that's entirely the point — it mirrors the product's promise of extreme speed and performance.
+
+What makes ClickHouse distinctive is the electrifying tension between the near-black canvas and the neon yellow-green accent. This color combination (`#faff69` on `#000000`) creates one of the highest-contrast pairings in any tech brand, making every CTA button, every highlighted card, and every accent border impossible to miss. Supporting this is a forest green (`#166534`) for secondary CTAs that adds depth to the action hierarchy without competing with the neon.
+
+**Key Characteristics:**
+- Pure black canvas (#000000) with neon yellow-green (#faff69) accent — maximum contrast
+- Extra-heavy display typography: Inter at weight 900 (Black) up to 96px
+- Dark charcoal card system with #414141 borders at 80% opacity
+- Forest green (#166534) secondary CTA buttons
+- Performance stats as oversized display numbers
+- Uppercase labels with wide letter-spacing (1.4px) for navigation structure
+- Active/pressed state shifts text to pale yellow (#f4f692)
+- All links hover to neon yellow-green — unified interactive signal
+- Inset shadows on select elements creating "pressed into the surface" depth
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Neon Volt** (`#faff69`): The signature brand color — a vivid acid yellow-green that's the sole chromatic accent on the black canvas. Used for primary CTAs, accent borders, link hovers, and highlighted moments.
+- **Forest Green** (`#166534`): Secondary CTA color — a deep, saturated green for "Get Started" and primary action buttons that need distinction from the neon.
+- **Dark Forest** (`#14572f`): A darker green variant for borders and secondary accents.
+
+### Secondary & Accent
+- **Pale Yellow** (`#f4f692`): Active/pressed state text color — a softer, more muted version of Neon Volt for state feedback.
+- **Border Olive** (`#4f5100`): A dark olive-yellow for ghost button borders — the neon's muted sibling.
+- **Olive Dark** (`#161600`): The darkest neon-tinted color for subtle brand text.
+
+### Surface & Background
+- **Pure Black** (`#000000`): The primary page background — absolute black for maximum contrast.
+- **Near Black** (`#141414`): Button backgrounds and slightly elevated dark surfaces.
+- **Charcoal** (`#414141`): The primary border color at 80% opacity — the workhorse for card and container containment.
+- **Deep Charcoal** (`#343434`): Darker border variant for subtle division lines.
+- **Hover Gray** (`#3a3a3a`): Button hover state background — slightly lighter than Near Black.
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`): Primary text on dark surfaces.
+- **Silver** (`#a0a0a0`): Secondary body text and muted content.
+- **Mid Gray** (`#585858` at 28%): Subtle gray overlay for depth effects.
+- **Border Gray** (`#e5e7eb`): Light border variant (used in rare light contexts).
+
+### Gradient System
+- **None in the traditional sense.** ClickHouse uses flat color blocks and high-contrast borders. The "gradient" is the contrast itself — neon yellow-green against pure black creates a visual intensity that gradients would dilute.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter` (Next.js optimized variant `__Inter_d1b8ee`)
+- **Secondary Display**: `Basier` (`__basier_a58b65`), with fallbacks: `Arial, Helvetica`
+- **Code**: `Inconsolata` (`__Inconsolata_a25f62`)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Mega | Inter | 96px (6rem) | 900 | 1.00 (tight) | normal | Maximum impact, extra-heavy |
+| Display / Hero | Inter | 72px (4.5rem) | 700 | 1.00 (tight) | normal | Section hero titles |
+| Feature Heading | Basier | 36px (2.25rem) | 600 | 1.30 (tight) | normal | Feature section anchors |
+| Sub-heading | Inter / Basier | 24px (1.5rem) | 600–700 | 1.17–1.38 | normal | Card headings |
+| Feature Title | Inter / Basier | 20px (1.25rem) | 600–700 | 1.40 | normal | Small feature titles |
+| Body Large | Inter | 18px (1.13rem) | 400–700 | 1.56 | normal | Intro paragraphs, button text |
+| Body / Button | Inter | 16px (1rem) | 400–700 | 1.50 | normal | Standard body, nav, buttons |
+| Caption | Inter | 14px (0.88rem) | 400–700 | 1.43 | normal | Metadata, descriptions, links |
+| Uppercase Label | Inter | 14px (0.88rem) | 600 | 1.43 | 1.4px | Section overlines, wide-tracked |
+| Code | Inconsolata | 16px (1rem) | 600 | 1.50 | normal | Code blocks, commands |
+| Small | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Smallest text |
+| Micro | Inter | 11.2px (0.7rem) | 500 | 1.79 (relaxed) | normal | Tags, tiny labels |
+
+### Principles
+- **Weight 900 is the weapon**: The display headline uses Inter Black (900) — a weight most sites never touch. Combined with 96px size, this creates text with a physical, almost architectural presence.
+- **Full weight spectrum**: The system uses 400, 500, 600, 700, and 900 — covering the full gamut. Weight IS hierarchy.
+- **Uppercase with maximum tracking**: Section overlines use 1.4px letter-spacing — wider than most systems — creating bold structural labels that stand out against the dense dark background.
+- **Dual sans-serif**: Inter handles display and body; Basier handles feature section headings at 600 weight. This creates a subtle personality shift between "data/performance" (Inter) and "product/feature" (Basier) contexts.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Neon Primary**
+- Background: Neon Volt (`#faff69`)
+- Text: Near Black (`#151515`)
+- Padding: 0px 16px
+- Radius: sharp (4px)
+- Border: `1px solid #faff69`
+- Hover: background shifts to dark (`rgb(29, 29, 29)`), text stays
+- Active: text shifts to Pale Yellow (`#f4f692`)
+- The eye-catching CTA — neon on black
+
+**Dark Solid**
+- Background: Near Black (`#141414`)
+- Text: Pure White (`#ffffff`)
+- Padding: 12px 16px
+- Radius: 4px or 8px
+- Border: `1px solid #141414`
+- Hover: bg shifts to Hover Gray (`#3a3a3a`), text to 80% opacity
+- Active: text to Pale Yellow
+- The standard action button
+
+**Forest Green**
+- Background: Forest Green (`#166534`)
+- Text: Pure White (`#ffffff`)
+- Padding: 12px 16px
+- Border: `1px solid #141414`
+- Hover: same dark shift
+- Active: Pale Yellow text
+- The "Get Started" / primary conversion button
+
+**Ghost / Outlined**
+- Background: transparent
+- Text: Pure White (`#ffffff`)
+- Padding: 0px 32px
+- Radius: 4px
+- Border: `1px solid #4f5100` (olive-tinted)
+- Hover: dark bg shift
+- Active: Pale Yellow text
+- Secondary actions with neon-tinted border
+
+**Pill Toggle**
+- Background: transparent
+- Radius: pill (9999px)
+- Used for toggle/switch elements
+
+### Cards & Containers
+- Background: transparent or Near Black
+- Border: `1px solid rgba(65, 65, 65, 0.8)` — the signature charcoal containment
+- Radius: 4px (small elements) or 8px (cards, containers)
+- Shadow Level 1: subtle (`rgba(0,0,0,0.1) 0px 1px 3px, rgba(0,0,0,0.1) 0px 1px 2px -1px`)
+- Shadow Level 2: medium (`rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.1) 0px 4px 6px -4px`)
+- Shadow Level 3: inset (`rgba(0,0,0,0.06) 0px 4px 4px, rgba(0,0,0,0.14) 0px 4px 25px inset`) — the "pressed" effect
+- Neon-highlighted cards: selected/active cards get neon yellow-green border or accent
+
+### Navigation
+- Dark nav on black background
+- Logo: ClickHouse wordmark + icon in yellow/neon
+- Links: white text, hover to Neon Volt (#faff69)
+- CTA: Neon Volt button or Forest Green button
+- Uppercase labels for categories
+
+### Distinctive Components
+
+**Performance Stats**
+- Oversized numbers (72px+, weight 700–900)
+- Brief descriptions beneath
+- High-contrast neon accents on key metrics
+- The primary visual proof of performance claims
+
+**Neon-Highlighted Card**
+- Standard dark card with neon yellow-green border highlight
+- Creates "selected" or "featured" treatment
+- The accent border makes the card pop against the dark canvas
+
+**Code Blocks**
+- Dark surface with Inconsolata at weight 600
+- Neon and white syntax highlighting
+- Terminal-like aesthetic
+
+**Trust Bar**
+- Company logos on dark background
+- Monochrome/white logo treatment
+- Horizontal layout
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 25px, 32px, 40px, 44px, 48px, 64px
+- Button padding: 12px 16px (standard), 0px 16px (compact), 0px 32px (wide ghost)
+- Section vertical spacing: generous (48–64px)
+
+### Grid & Container
+- Max container width: up to 2200px (extra-wide) with responsive scaling
+- Hero: full-width dark with massive typography
+- Feature sections: multi-column card grids with dark borders
+- Stats: horizontal metric bar
+- Full-dark page — no light sections
+
+### Whitespace Philosophy
+- **Dark void as canvas**: The pure black background provides infinite depth — elements float in darkness.
+- **Dense information**: Feature cards and stats are packed with data, reflecting the database product's performance focus.
+- **Neon highlights as wayfinding**: Yellow-green accents guide the eye through the dark interface like runway lights.
+
+### Border Radius Scale
+- Sharp (4px): Buttons, badges, small elements, code blocks
+- Comfortable (8px): Cards, containers, dividers
+- Pill (9999px): Toggle buttons, status indicators
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Black background, text blocks |
+| Bordered (Level 1) | `1px solid rgba(65,65,65,0.8)` | Standard cards, containers |
+| Subtle (Level 2) | `0px 1px 3px rgba(0,0,0,0.1)` | Subtle card lift |
+| Elevated (Level 3) | `0px 10px 15px -3px rgba(0,0,0,0.1)` | Feature cards, hover states |
+| Pressed/Inset (Level 4) | `0px 4px 25px rgba(0,0,0,0.14) inset` | Active/pressed elements — "sunk into the surface" |
+| Neon Highlight (Level 5) | Neon Volt border (`#faff69`) | Featured/selected cards, maximum emphasis |
+
+**Shadow Philosophy**: ClickHouse uses shadows on a black canvas, where they're barely visible — they exist more for subtle dimensionality than obvious elevation. The most distinctive depth mechanism is the **inset shadow** (Level 4), which creates a "pressed into the surface" effect unique to ClickHouse. The neon border highlight (Level 5) is the primary attention-getting depth mechanism.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Neon Volt (#faff69) as the sole chromatic accent — it must pop against pure black
+- Use Inter at weight 900 for hero display text — the extreme weight IS the personality
+- Keep everything on pure black (#000000) — never use dark gray as the page background
+- Use charcoal borders (rgba(65,65,65,0.8)) for all card containment
+- Apply Forest Green (#166534) for primary CTA buttons — distinct from neon for action hierarchy
+- Show performance stats as oversized display numbers — it's the core visual argument
+- Use uppercase with wide letter-spacing (1.4px) for section labels
+- Apply Pale Yellow (#f4f692) for active/pressed text states
+- Link hovers should ALWAYS shift to Neon Volt — unified interactive feedback
+
+### Don't
+- Don't introduce additional colors — the palette is strictly black, neon, green, and gray
+- Don't use the neon as a background fill — it's an accent and border color only (except on CTA buttons)
+- Don't reduce display weight below 700 — heavy weight is core to the personality
+- Don't use light/white backgrounds anywhere — the entire experience is dark
+- Don't round corners beyond 8px — the sharp geometry reflects database precision
+- Don't use soft/diffused shadows on black — they're invisible. Use border-based depth instead
+- Don't skip the inset shadow on active states — the "pressed" effect is distinctive
+- Don't use warm neutrals — all grays are perfectly neutral
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, stacked cards |
+| Small Tablet | 640–768px | Minor adjustments |
+| Tablet | 768–1024px | 2-column grids |
+| Desktop | 1024–1280px | Standard layout |
+| Large Desktop | 1280–1536px | Expanded content |
+| Ultra-wide | 1536–2200px | Maximum container width |
+
+### Touch Targets
+- Buttons with 12px 16px padding minimum
+- Card surfaces as touch targets
+- Adequate nav link spacing
+
+### Collapsing Strategy
+- **Hero text**: 96px → 72px → 48px → 36px
+- **Feature grids**: Multi-column → 2 → 1 column
+- **Stats**: Horizontal → stacked
+- **Navigation**: Full → hamburger
+
+### Image Behavior
+- Product screenshots maintain aspect ratio
+- Code blocks use horizontal scroll on narrow screens
+- All images on dark backgrounds
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand Accent: "Neon Volt (#faff69)"
+- Page Background: "Pure Black (#000000)"
+- CTA Green: "Forest Green (#166534)"
+- Card Border: "Charcoal (rgba(65,65,65,0.8))"
+- Primary Text: "Pure White (#ffffff)"
+- Secondary Text: "Silver (#a0a0a0)"
+- Active State: "Pale Yellow (#f4f692)"
+- Button Surface: "Near Black (#141414)"
+
+### Example Component Prompts
+- "Create a hero section on Pure Black (#000000) with a massive headline at 96px Inter weight 900, line-height 1.0. Pure White text. Add a Neon Volt (#faff69) CTA button (dark text, 4px radius, 0px 16px padding) and a ghost button (transparent, 1px solid #4f5100 border)."
+- "Design a feature card on black with 1px solid rgba(65,65,65,0.8) border and 8px radius. Title at 24px Inter weight 700, body at 16px in Silver (#a0a0a0). Add a neon-highlighted variant with 1px solid #faff69 border."
+- "Build a performance stats bar: large numbers at 72px Inter weight 700 in Pure White. Brief descriptions at 14px in Silver. On black background."
+- "Create a Forest Green (#166534) CTA button: white text, 12px 16px padding, 4px radius, 1px solid #141414 border. Hover: bg shifts to #3a3a3a, text to 80% opacity."
+- "Design an uppercase section label: 14px Inter weight 600, letter-spacing 1.4px, uppercase. Silver (#a0a0a0) text on black background."
+
+### Iteration Guide
+1. Keep everything on pure black — no dark gray alternatives
+2. Neon Volt (#faff69) is for accents and CTAs only — never large backgrounds
+3. Weight 900 for hero, 700 for headings, 600 for labels, 400-500 for body
+4. Active states use Pale Yellow (#f4f692) — not just opacity changes
+5. All links hover to Neon Volt — consistent interactive feedback
+6. Charcoal borders (rgba(65,65,65,0.8)) are the primary depth mechanism

vibn-frontend/lib/scaffold/open-design/design-systems/cohere/DESIGN.md

@@ -0,0 +1,269 @@
+# Design System Inspired by Cohere
+
+> Category: AI & LLM
+> Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic.
+
+## 1. Visual Theme & Atmosphere
+
+Cohere's interface is a polished enterprise command deck — confident, clean, and designed to make AI feel like serious infrastructure rather than a consumer toy. The experience lives on a bright white canvas where content is organized into generously rounded cards (22px radius) that create an organic, cloud-like containment language. This is a site that speaks to CTOs and enterprise architects: professional without being cold, sophisticated without being intimidating.
+
+The design language bridges two worlds with a dual-typeface system: CohereText, a custom display serif with tight tracking, gives headlines the gravitas of a technology manifesto, while Unica77 Cohere Web handles all body and UI text with geometric Swiss precision. This serif/sans pairing creates a "confident authority meets engineering clarity" personality that perfectly reflects an enterprise AI platform.
+
+Color is used with extreme restraint — the interface is almost entirely black-and-white with cool gray borders (`#d9d9dd`, `#e5e7eb`). Purple-violet appears only in photographic hero bands, gradient sections, and the interactive blue (`#1863dc`) that signals hover and focus states. This chromatic restraint means that when color DOES appear — in product screenshots, enterprise photography, and the deep purple section — it carries maximum visual weight.
+
+**Key Characteristics:**
+- Bright white canvas with cool gray containment borders
+- 22px signature border-radius — the distinctive "Cohere card" roundness
+- Dual custom typeface: CohereText (display serif) + Unica77 (body sans)
+- Enterprise-grade chromatic restraint: black, white, cool grays, minimal purple-blue accent
+- Deep purple/violet hero sections providing dramatic contrast
+- Ghost/transparent buttons that shift to blue on hover
+- Enterprise photography showing diverse real-world applications
+- CohereMono for code and technical labels with uppercase transforms
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cohere Black** (`#000000`): Primary headline text and maximum-emphasis elements.
+- **Near Black** (`#212121`): Standard body link color — slightly softer than pure black.
+- **Deep Dark** (`#17171c`): A blue-tinted near-black for navigation and dark-section text.
+
+### Secondary & Accent
+- **Interaction Blue** (`#1863dc`): The primary interactive accent — appears on button hover, focus states, and active links. The sole chromatic action color.
+- **Ring Blue** (`#4c6ee6` at 50%): Tailwind ring color for keyboard focus indicators.
+- **Focus Purple** (`#9b60aa`): Input focus border color — a muted violet.
+
+### Surface & Background
+- **Pure White** (`#ffffff`): The primary page background and card surface.
+- **Snow** (`#fafafa`): Subtle elevated surfaces and light-section backgrounds.
+- **Lightest Gray** (`#f2f2f2`): Card borders and the softest containment lines.
+
+### Neutrals & Text
+- **Muted Slate** (`#93939f`): De-emphasized footer links and tertiary text — a cool-toned gray with a slight blue-violet tint.
+- **Border Cool** (`#d9d9dd`): Standard section and list-item borders — a cool, slightly purple-tinted gray.
+- **Border Light** (`#e5e7eb`): Lighter border variant — Tailwind's standard gray-200.
+
+### Gradient System
+- **Purple-Violet Hero Band**: Deep purple gradient sections that create dramatic contrast against the white canvas. These appear as full-width bands housing product screenshots and key messaging.
+- **Dark Footer Gradient**: The page transitions through deep purple/charcoal to the black footer, creating a "dusk" effect.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `CohereText`, with fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Body / UI**: `Unica77 Cohere Web`, with fallbacks: `Inter, Arial, ui-sans-serif, system-ui`
+- **Code**: `CohereMono`, with fallbacks: `Arial, ui-sans-serif, system-ui`
+- **Icons**: `CohereIconDefault` (custom icon font)
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (tight) | -1.44px | Maximum impact, serif authority |
+| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (tight) | -1.2px | Large section headings |
+| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (tight) | -0.48px | Feature section titles |
+| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (tight) | -0.32px | Card headings, feature names |
+| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Smaller section titles |
+| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Intro paragraphs |
+| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Standard body, button text |
+| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxed) | normal | Smaller buttons, emphasized labels |
+| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadata, descriptions |
+| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Uppercase section labels |
+| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Smallest text, footer links |
+| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Tiny uppercase code labels |
+
+### Principles
+- **Serif for declaration, sans for utility**: CohereText carries the brand voice at display scale — its serif terminals give headlines the authority of published research. Unica77 handles everything functional with Swiss-geometric neutrality.
+- **Negative tracking at scale**: CohereText uses -1.2px to -1.44px letter-spacing at 60–72px, creating dense, impactful text blocks.
+- **Single body weight**: Nearly all Unica77 usage is weight 400. Weight 500 appears only for small button emphasis. The system relies on size and spacing, not weight contrast.
+- **Uppercase code labels**: CohereMono uses uppercase with positive letter-spacing (0.16–0.28px) for technical tags and section markers.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost / Transparent**
+- Background: transparent (`rgba(255, 255, 255, 0)`)
+- Text: Cohere Black (`#000000`)
+- No border visible
+- Hover: text shifts to Interaction Blue (`#1863dc`), opacity 0.8
+- Focus: solid 2px outline in Interaction Blue
+- The primary button style — invisible until interacted with
+
+**Dark Solid**
+- Background: dark/black
+- Text: Pure White
+- For CTA on light surfaces
+- Pill-shaped or standard radius
+
+**Outlined**
+- Border-based containment
+- Used in secondary actions
+
+### Cards & Containers
+- Background: Pure White (`#ffffff`)
+- Border: thin solid Lightest Gray (`1px solid #f2f2f2`) for subtle cards; Cool Border (`#d9d9dd`) for emphasized
+- Radius: **22px** — the signature Cohere radius for primary cards, images, and dialog containers. Also 4px, 8px, 16px, 20px for smaller elements
+- Shadow: minimal — Cohere relies on background color and borders rather than shadows
+- Special: `0px 0px 22px 22px` radius (bottom-only rounding) for section containers
+- Dialog: 8px radius for modal/dialog boxes
+
+### Inputs & Forms
+- Text: white on dark input, black on light
+- Focus border: Focus Purple (`#9b60aa`) with `1px solid`
+- Focus shadow: red ring (`rgb(179, 0, 0) 0px 0px 0px 2px`) — likely for error state indication
+- Focus outline: Interaction Blue solid 2px
+
+### Navigation
+- Clean horizontal nav on white or dark background
+- Logo: Cohere wordmark (custom SVG)
+- Links: Dark text at 16px Unica77
+- CTA: Dark solid button
+- Mobile: hamburger collapse
+
+### Image Treatment
+- Enterprise photography with diverse subjects and environments
+- Purple-tinted hero photography for dramatic sections
+- Product UI screenshots on dark surfaces
+- Images with 22px radius matching card system
+- Full-bleed purple gradient sections
+
+### Distinctive Components
+
+**22px Card System**
+- The 22px border-radius is Cohere's visual signature
+- All primary cards, images, and containers use this radius
+- Creates a cloud-like, organic softness that's distinctive from the typical 8–12px
+
+**Enterprise Trust Bar**
+- Company logos displayed in a horizontal strip
+- Demonstrates enterprise adoption
+- Clean, monochrome logo treatment
+
+**Purple Hero Bands**
+- Full-width deep purple sections housing product showcases
+- Create dramatic visual breaks in the white page flow
+- Product screenshots float within the purple environment
+
+**Uppercase Code Tags**
+- CohereMono in uppercase with letter-spacing
+- Used as section markers and categorization labels
+- Creates a technical, structured information hierarchy
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
+- Button padding varies by variant
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: generous (56–60px between sections)
+
+### Grid & Container
+- Max container width: up to 2560px (very wide) with responsive scaling
+- Hero: centered with dramatic typography
+- Feature sections: multi-column card grids
+- Enterprise sections: full-width purple bands
+- 26 breakpoints detected — extremely granular responsive system
+
+### Whitespace Philosophy
+- **Enterprise clarity**: Each section presents one clear proposition with breathing room between.
+- **Photography as hero**: Large photographic sections provide visual interest without requiring decorative design elements.
+- **Card grouping**: Related content is grouped into 22px-rounded cards, creating natural information clusters.
+
+### Border Radius Scale
+- Sharp (4px): Navigation elements, small tags, pagination
+- Comfortable (8px): Dialog boxes, secondary containers, small cards
+- Generous (16px): Featured containers, medium cards
+- Large (20px): Large feature cards
+- Signature (22px): Primary cards, hero images, main containers — THE Cohere radius
+- Pill (9999px): Buttons, tags, status indicators
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, text blocks |
+| Bordered (Level 1) | `1px solid #f2f2f2` or `#d9d9dd` | Standard cards, list separators |
+| Purple Band (Level 2) | Full-width dark purple background | Hero sections, feature showcases |
+
+**Shadow Philosophy**: Cohere is nearly shadow-free. Depth is communicated through **background color contrast** (white cards on purple bands, white surface on snow), **border containment** (cool gray borders), and the dramatic **light-to-dark section alternation**. When elements need elevation, they achieve it through being white-on-dark rather than through shadow casting.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use 22px border-radius on all primary cards and containers — it's the visual signature
+- Use CohereText for display headings (72px, 60px) with negative letter-spacing
+- Use Unica77 for all body and UI text at weight 400
+- Keep the palette black-and-white with cool gray borders
+- Use Interaction Blue (#1863dc) only for hover/focus interactive states
+- Use deep purple sections for dramatic visual breaks and product showcases
+- Apply uppercase + letter-spacing on CohereMono for section labels
+- Maintain enterprise-appropriate photography with diverse subjects
+
+### Don't
+- Don't use border-radius other than 22px on primary cards — the signature radius matters
+- Don't introduce warm colors — the palette is strictly cool-toned
+- Don't use heavy shadows — depth comes from color contrast and borders
+- Don't use bold (700+) weight on body text — 400–500 is the range
+- Don't skip the serif/sans hierarchy — CohereText for headlines, Unica77 for body
+- Don't use purple as a surface color for cards — purple is reserved for full-width sections
+- Don't reduce section spacing below 40px — enterprise layouts need breathing room
+- Don't use decoration on buttons by default — ghost/transparent is the base state
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <425px | Compact layout, minimal spacing |
+| Mobile | 425–640px | Single column, stacked cards |
+| Large Mobile | 640–768px | Minor spacing adjustments |
+| Tablet | 768–1024px | 2-column grids begin |
+| Desktop | 1024–1440px | Full multi-column layout |
+| Large Desktop | 1440–2560px | Maximum container width |
+
+*26 breakpoints detected — one of the most granularly responsive sites in the dataset.*
+
+### Touch Targets
+- Buttons adequately sized for touch interaction
+- Navigation links with comfortable spacing
+- Card surfaces as touch targets
+
+### Collapsing Strategy
+- **Navigation**: Full nav collapses to hamburger
+- **Feature grids**: Multi-column → 2-column → single column
+- **Hero text**: 72px → 48px → 32px progressive scaling
+- **Purple sections**: Maintain full-width, content stacks
+- **Card grids**: 3 → 2 → 1 column
+
+### Image Behavior
+- Photography scales proportionally within 22px-radius containers
+- Product screenshots maintain aspect ratio
+- Purple sections scale background proportionally
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Text: "Cohere Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Secondary Text: "Near Black (#212121)"
+- Hover Accent: "Interaction Blue (#1863dc)"
+- Muted Text: "Muted Slate (#93939f)"
+- Card Borders: "Lightest Gray (#f2f2f2)"
+- Section Borders: "Border Cool (#d9d9dd)"
+
+### Example Component Prompts
+- "Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4."
+- "Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f)."
+- "Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline."
+- "Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius."
+- "Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Always use 22px radius for primary cards — "the Cohere card roundness"
+3. Specify the typeface — CohereText for headlines, Unica77 for body, CohereMono for labels
+4. Interactive elements use Interaction Blue (#1863dc) on hover only
+5. Keep surfaces white with cool gray borders — no warm tones
+6. Purple is for full-width sections, never card backgrounds

vibn-frontend/lib/scaffold/open-design/design-systems/coinbase/DESIGN.md

@@ -0,0 +1,132 @@
+# Design System Inspired by Coinbase
+
+> Category: Fintech & Crypto
+> Crypto exchange. Clean blue identity, trust-focused, institutional feel.
+
+## 1. Visual Theme & Atmosphere
+
+Coinbase's website is a clean, trustworthy crypto platform that communicates financial reliability through a blue-and-white binary palette. The design uses Coinbase Blue (`#0052ff`) — a deep, saturated blue — as the singular brand accent against white and near-black surfaces. The proprietary font family includes CoinbaseDisplay for hero headlines, CoinbaseSans for UI text, CoinbaseText for body reading, and CoinbaseIcons for iconography — a comprehensive four-font system.
+
+The button system uses a distinctive 56px radius for pill-shaped CTAs with hover transitions to a lighter blue (`#578bfa`). The design alternates between white content sections and dark (`#0a0b0d`, `#282b31`) feature sections, creating a professional, financial-grade interface.
+
+**Key Characteristics:**
+- Coinbase Blue (`#0052ff`) as singular brand accent
+- Four-font proprietary family: Display, Sans, Text, Icons
+- 56px radius pill buttons with blue hover transition
+- Near-black (`#0a0b0d`) dark sections + white light sections
+- 1.00 line-height on display headings — ultra-tight
+- Cool gray secondary surface (`#eef0f3`) with blue tint
+- `text-transform: lowercase` on some button labels — unusual
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Coinbase Blue** (`#0052ff`): Primary brand, links, CTA borders
+- **Pure White** (`#ffffff`): Primary light surface
+- **Near Black** (`#0a0b0d`): Text, dark section backgrounds
+- **Cool Gray Surface** (`#eef0f3`): Secondary button background
+
+### Interactive
+- **Hover Blue** (`#578bfa`): Button hover background
+- **Link Blue** (`#0667d0`): Secondary link color
+- **Muted Blue** (`#5b616e`): Border color at 20% opacity
+
+### Surface
+- **Dark Card** (`#282b31`): Dark button/card backgrounds
+- **Light Surface** (`rgba(247,247,247,0.88)`): Subtle surface
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `CoinbaseDisplay` — hero headlines
+- **UI / Sans**: `CoinbaseSans` — buttons, headings, nav
+- **Body**: `CoinbaseText` — reading text
+- **Icons**: `CoinbaseIcons` — icon font
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Notes |
+|------|------|------|--------|-------------|-------|
+| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (tight) | Maximum impact |
+| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | Sub-hero |
+| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | Third tier |
+| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (tight) | Feature sections |
+| Card Title | CoinbaseSans | 32px | 400 | 1.13 | Card headings |
+| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | Feature emphasis |
+| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | Strong body |
+| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | Buttons, nav |
+| Body | CoinbaseText | 18px | 400 | 1.56 | Standard reading |
+| Body Small | CoinbaseText | 16px | 400 | 1.50 | Secondary reading |
+| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
+| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | Metadata |
+| Small | CoinbaseSans | 13px | 600 | 1.23 | Tags |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Pill (56px radius)**
+- Background: `#eef0f3` or `#282b31`
+- Radius: 56px
+- Border: `1px solid` matching background
+- Hover: `#578bfa` (light blue)
+- Focus: `2px solid black` outline
+
+**Full Pill (100000px radius)**
+- Used for maximum pill shape
+
+**Blue Bordered**
+- Border: `1px solid #0052ff`
+- Background: transparent
+
+### Cards & Containers
+- Radius: 8px–40px range
+- Borders: `1px solid rgba(91,97,110,0.2)`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base: 8px
+- Scale: 1px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 25px, 32px, 48px
+
+### Border Radius Scale
+- Small (4px–8px): Article links, small cards
+- Standard (12px–16px): Cards, menus
+- Large (24px–32px): Feature containers
+- XL (40px): Large buttons/containers
+- Pill (56px): Primary CTAs
+- Full (100000px): Maximum pill
+
+## 6. Depth & Elevation
+
+Minimal shadow system — depth from color contrast between dark/light sections.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Coinbase Blue (#0052ff) for primary interactive elements
+- Apply 56px radius for all CTA buttons
+- Use CoinbaseDisplay for hero headings only
+- Alternate dark (#0a0b0d) and white sections
+
+### Don't
+- Don't use the blue decoratively — it's functional only
+- Don't use sharp corners on CTAs — 56px minimum
+
+## 8. Responsive Behavior
+
+Breakpoints: 400px, 576px, 640px, 768px, 896px, 1280px, 1440px, 1600px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Coinbase Blue (`#0052ff`)
+- Background: White (`#ffffff`)
+- Dark surface: `#0a0b0d`
+- Secondary surface: `#eef0f3`
+- Hover: `#578bfa`
+- Text: `#0a0b0d`
+
+### Example Component Prompts
+- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
+- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."

vibn-frontend/lib/scaffold/open-design/design-systems/colorful/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Colorful
+
+> Category: Bold & Expressive
+> Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.
+
+## 1. Visual Theme & Atmosphere
+
+Vibrant, high-contrast palettes and gradients for engaging, memorable, and modern user experiences.
+
+- **Visual style:** high-contrast, 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=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:** 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 `#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.

vibn-frontend/lib/scaffold/open-design/design-systems/composio/DESIGN.md

@@ -0,0 +1,310 @@
+# Design System Inspired by Composio
+
+> Category: Backend & Data
+> Tool integration platform. Modern dark with colorful integration icons.
+
+## 1. Visual Theme & Atmosphere
+
+Composio's interface is a nocturnal command center — a dense, developer-focused darkness punctuated by electric cyan and deep cobalt signals. The entire experience is built on an almost-pure-black canvas (`#0f0f0f`) where content floats within barely-visible containment borders, creating the feeling of a high-tech control panel rather than a traditional marketing page. It's a site that whispers authority to developers who live in dark terminals.
+
+The visual language leans heavily into the aesthetic of code editors and terminal windows. JetBrains Mono appears alongside the geometric precision of abcDiatype, reinforcing the message that this is a tool built *by* developers *for* developers. Decorative elements are restrained but impactful — subtle cyan-blue gradient glows emanate from cards and sections like bioluminescent organisms in deep water, while hard-offset shadows (`4px 4px`) on select elements add a raw, brutalist edge that prevents the design from feeling sterile.
+
+What makes Composio distinctive is its tension between extreme minimalism and strategic bursts of luminous color. The site never shouts — headings use tight line-heights (0.87) that compress text into dense, authoritative blocks. Color is rationed like a rare resource: white text for primary content, semi-transparent white (`rgba(255,255,255,0.5-0.6)`) for secondary, and brand blue (`#0007cd`) or electric cyan (`#00ffff`) reserved exclusively for interactive moments and accent glows.
+
+**Key Characteristics:**
+- Pitch-black canvas with near-invisible white-border containment (4-12% opacity)
+- Dual-font identity: geometric sans-serif (abcDiatype) for content, monospace (JetBrains Mono) for technical credibility
+- Ultra-tight heading line-heights (0.87-1.0) creating compressed, impactful text blocks
+- Bioluminescent accent strategy — cyan and blue glows that feel like they're emitting light from within
+- Hard-offset brutalist shadows (`4px 4px`) on select interactive elements
+- Monochrome hierarchy with color used only at the highest-signal moments
+- Developer-terminal aesthetic that bridges marketing and documentation
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Composio Cobalt** (`#0007cd`): The core brand color — a deep, saturated blue used sparingly for high-priority interactive elements and brand moments. It anchors the identity with quiet intensity.
+
+### Secondary & Accent
+- **Electric Cyan** (`#00ffff`): The attention-grabbing accent — used at low opacity (`rgba(0,255,255,0.12)`) for glowing button backgrounds and card highlights. At full saturation, it serves as the energetic counterpoint to the dark canvas.
+- **Signal Blue** (`#0089ff` / `rgb(0,137,255)`): Used for select button borders and interactive focus states, bridging the gap between Cobalt and Cyan.
+- **Ocean Blue** (`#0096ff` / `rgb(0,150,255)`): Accent border color on CTA buttons, slightly warmer than Signal Blue.
+
+### Surface & Background
+- **Void Black** (`#0f0f0f`): The primary page background — not pure black, but a hair warmer, reducing eye strain on dark displays.
+- **Pure Black** (`#000000`): Used for card interiors and deep-nested containers, creating a subtle depth distinction from the page background.
+- **Charcoal** (`#2c2c2c` / `rgb(44,44,44)`): Used for secondary button borders and divider lines on dark surfaces.
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`): Primary heading and high-emphasis text color on dark surfaces.
+- **Muted Smoke** (`#444444`): De-emphasized body text, metadata, and tertiary content.
+- **Ghost White** (`rgba(255,255,255,0.6)`): Secondary body text and link labels — visible but deliberately receded.
+- **Whisper White** (`rgba(255,255,255,0.5)`): Tertiary button text and placeholder content.
+- **Phantom White** (`rgba(255,255,255,0.2)`): Subtle button backgrounds and deeply receded UI chrome.
+
+### Semantic & Accent
+- **Border Mist 12** (`rgba(255,255,255,0.12)`): Highest-opacity border treatment — used for prominent card edges and content separators.
+- **Border Mist 10** (`rgba(255,255,255,0.10)`): Standard container borders on dark surfaces.
+- **Border Mist 08** (`rgba(255,255,255,0.08)`): Subtle section dividers and secondary card edges.
+- **Border Mist 06** (`rgba(255,255,255,0.06)`): Near-invisible containment borders for background groupings.
+- **Border Mist 04** (`rgba(255,255,255,0.04)`): The faintest border — used for atmospheric separation only.
+- **Light Border** (`#e0e0e0` / `rgb(224,224,224)`): Reserved for light-surface contexts (rare on this site).
+
+### Gradient System
+- **Cyan Glow**: Radial gradients using `#00ffff` at very low opacity, creating bioluminescent halos behind cards and feature sections.
+- **Blue-to-Black Fade**: Linear gradients from Composio Cobalt (`#0007cd`) fading into Void Black (`#0f0f0f`), used in hero backgrounds and section transitions.
+- **White Fog**: Bottom-of-page gradient transitioning from dark to a diffused white/gray, creating an atmospheric "horizon line" effect near the footer.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `abcDiatype`, with fallbacks: `abcDiatype Fallback, ui-sans-serif, system-ui, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`
+- **Monospace**: `JetBrains Mono`, with fallbacks: `JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+- **System Monospace** (fallback): `Menlo`, `monospace` for smallest inline code
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | abcDiatype | 64px (4rem) | 400 | 0.87 (ultra-tight) | normal | Massive, compressed headings |
+| Section Heading | abcDiatype | 48px (3rem) | 400 | 1.00 (tight) | normal | Major feature section titles |
+| Sub-heading Large | abcDiatype | 40px (2.5rem) | 400 | 1.00 (tight) | normal | Secondary section markers |
+| Sub-heading | abcDiatype | 28px (1.75rem) | 400 | 1.20 (tight) | normal | Card titles, feature names |
+| Card Title | abcDiatype | 24px (1.5rem) | 500 | 1.20 (tight) | normal | Medium-emphasis card headings |
+| Feature Label | abcDiatype | 20px (1.25rem) | 500 | 1.20 (tight) | normal | Smaller card titles, labels |
+| Body Large | abcDiatype | 18px (1.125rem) | 400 | 1.20 (tight) | normal | Intro paragraphs |
+| Body / Button | abcDiatype | 16px (1rem) | 400 | 1.50 | normal | Standard body text, nav links, buttons |
+| Body Small | abcDiatype | 15px (0.94rem) | 400 | 1.63 (relaxed) | normal | Longer-form body text |
+| Caption | abcDiatype | 14px (0.875rem) | 400 | 1.63 (relaxed) | normal | Descriptions, metadata |
+| Label | abcDiatype | 13px (0.81rem) | 500 | 1.50 | normal | UI labels, badges |
+| Tag / Overline | abcDiatype | 12px (0.75rem) | 500 | 1.00 (tight) | 0.3px | Uppercase overline labels |
+| Micro | abcDiatype | 12px (0.75rem) | 400 | 1.00 (tight) | 0.3px | Smallest sans-serif text |
+| Code Body | JetBrains Mono | 16px (1rem) | 400 | 1.50 | -0.32px | Inline code, terminal output |
+| Code Small | JetBrains Mono | 14px (0.875rem) | 400 | 1.50 | -0.28px | Code snippets, technical labels |
+| Code Caption | JetBrains Mono | 12px (0.75rem) | 400 | 1.50 | -0.28px | Small code references |
+| Code Overline | JetBrains Mono | 14px (0.875rem) | 400 | 1.43 | 0.7px | Uppercase technical labels |
+| Code Micro | JetBrains Mono | 11px (0.69rem) | 400 | 1.33 | 0.55px | Tiny uppercase code tags |
+| Code Nano | JetBrains Mono | 9-10px | 400 | 1.33 | 0.45-0.5px | Smallest monospace text |
+
+### Principles
+- **Compression creates authority**: Heading line-heights are drastically tight (0.87-1.0), making large text feel dense and commanding rather than airy and decorative.
+- **Dual personality**: abcDiatype carries the marketing voice — geometric, precise, friendly. JetBrains Mono carries the technical voice — credible, functional, familiar to developers.
+- **Weight restraint**: Almost everything is weight 400 (regular). Weight 500 (medium) is reserved for small labels, badges, and select card titles. Weight 700 (bold) appears only in microscopic system-monospace contexts.
+- **Negative letter-spacing on code**: JetBrains Mono uses negative letter-spacing (-0.28px to -0.98px) for dense, compact code blocks that feel like a real IDE.
+- **Uppercase is earned**: The `uppercase` + `letter-spacing` treatment is reserved exclusively for tiny overline labels and technical tags — never for headings.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary CTA (White Fill)**
+- Background: Pure White (`#ffffff`)
+- Text: Near Black (`oklch(0.145 0 0)`)
+- Padding: comfortable (8px 24px)
+- Border: none
+- Radius: subtly rounded (likely 4px based on token scale)
+- Hover: likely subtle opacity reduction or slight gray shift
+
+**Cyan Accent CTA**
+- Background: Electric Cyan at 12% opacity (`rgba(0,255,255,0.12)`)
+- Text: Near Black (`oklch(0.145 0 0)`)
+- Padding: comfortable (8px 24px)
+- Border: thin solid Ocean Blue (`1px solid rgb(0,150,255)`)
+- Radius: subtly rounded (4px)
+- Creates a "glowing from within" effect on dark backgrounds
+
+**Ghost / Outline (Signal Blue)**
+- Background: transparent
+- Text: Near Black (`oklch(0.145 0 0)`)
+- Padding: balanced (10px)
+- Border: thin solid Signal Blue (`1px solid rgb(0,137,255)`)
+- Hover: likely fill or border color shift
+
+**Ghost / Outline (Charcoal)**
+- Background: transparent
+- Text: Near Black (`oklch(0.145 0 0)`)
+- Padding: balanced (10px)
+- Border: thin solid Charcoal (`1px solid rgb(44,44,44)`)
+- For secondary/tertiary actions on dark surfaces
+
+**Phantom Button**
+- Background: Phantom White (`rgba(255,255,255,0.2)`)
+- Text: Whisper White (`rgba(255,255,255,0.5)`)
+- No visible border
+- Used for deeply de-emphasized actions
+
+### Cards & Containers
+- Background: Pure Black (`#000000`) or transparent
+- Border: white at very low opacity, ranging from Border Mist 04 (`rgba(255,255,255,0.04)`) to Border Mist 12 (`rgba(255,255,255,0.12)`) depending on prominence
+- Radius: barely rounded corners (2px for inline elements, 4px for content cards)
+- Shadow: select cards use the hard-offset brutalist shadow (`rgba(0,0,0,0.15) 4px 4px 0px 0px`) — a distinctive design choice that adds raw depth
+- Elevation shadow: deeper containers use soft diffuse shadow (`rgba(0,0,0,0.5) 0px 8px 32px`)
+- Hover behavior: likely subtle border opacity increase or faint glow effect
+
+### Inputs & Forms
+- No explicit input token data extracted — inputs likely follow the dark-surface pattern with:
+  - Background: transparent or Pure Black
+  - Border: Border Mist 10 (`rgba(255,255,255,0.10)`)
+  - Focus: border shifts to Signal Blue (`#0089ff`) or Electric Cyan
+  - Text: Pure White with Ghost White placeholder
+
+### Navigation
+- Sticky top nav bar on dark/black background
+- Logo (white SVG): Composio wordmark on the left
+- Nav links: Pure White (`#ffffff`) at standard body size (16px, abcDiatype)
+- CTA button in the nav: White Fill Primary style
+- Mobile: collapses to hamburger menu, single-column layout
+- Subtle bottom border on nav (Border Mist 06-08)
+
+### Image Treatment
+- Dark-themed product screenshots and UI mockups dominate
+- Images sit within bordered containers matching the card system
+- Blue/cyan gradient glows behind or beneath feature images
+- No visible border-radius on images beyond container rounding (4px)
+- Full-bleed within their card containers
+
+### Distinctive Components
+
+**Stats/Metrics Display**
+- Large monospace numbers (JetBrains Mono) — "10k+" style
+- Tight layout with subtle label text beneath
+
+**Code Blocks / Terminal Previews**
+- Dark containers with JetBrains Mono
+- Syntax-highlighted content
+- Subtle bordered containers (Border Mist 10)
+
+**Integration/Partner Logos Grid**
+- Grid layout of tool logos on dark surface
+- Contained within bordered card
+- Demonstrates ecosystem breadth
+
+**"COMPOSIO" Brand Display**
+- Oversized brand typography — likely the largest text on the page
+- Used as a section divider/brand statement
+- Stark white on black
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 30px, 32px, 40px
+- Component padding: typically 10px (buttons) to 24px (CTA buttons horizontal)
+- Section padding: generous vertical spacing (estimated 80-120px between major sections)
+- Card internal padding: approximately 24-32px
+
+### Grid & Container
+- Max container width: approximately 1200px, centered
+- Content sections use single-column or 2-3 column grids for feature cards
+- Hero: centered single-column with maximum impact
+- Feature sections: asymmetric layouts mixing text blocks with product screenshots
+
+### Whitespace Philosophy
+- **Breathing room between sections**: Large vertical gaps create distinct "chapters" in the page scroll.
+- **Dense within components**: Cards and text blocks are internally compact (tight line-heights, minimal internal padding), creating focused information nodes.
+- **Contrast-driven separation**: Rather than relying solely on whitespace, Composio uses border opacity differences and subtle background shifts to delineate content zones.
+
+### Border Radius Scale
+- Nearly squared (2px): Inline code spans, small tags, pre blocks — the sharpest treatment, conveying technical precision
+- Subtly rounded (4px): Content cards, images, standard containers — the workhorse radius
+- Pill-shaped (37px): Select buttons and badges — creates a softer, more approachable feel for key CTAs
+- Full round (9999px+): Circular elements, avatar-like containers, decorative dots
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, no border | Page background, inline text |
+| Contained (Level 1) | Border Mist 04-08, no shadow | Background groupings, subtle sections |
+| Card (Level 2) | Border Mist 10-12, no shadow | Standard content cards, code blocks |
+| Brutalist (Level 3) | Hard offset shadow (`4px 4px`, 15% black) | Select interactive cards, distinctive feature highlights |
+| Floating (Level 4) | Soft diffuse shadow (`0px 8px 32px`, 50% black) | Modals, overlays, deeply elevated content |
+
+**Shadow Philosophy**: Composio uses shadows sparingly and with deliberate contrast. The hard-offset brutalist shadow is the signature — it breaks the sleek darkness with a raw, almost retro-computing feel. The soft diffuse shadow is reserved for truly floating elements. Most depth is communicated through border opacity gradations rather than shadows.
+
+### Decorative Depth
+- **Cyan Glow Halos**: Radial gradient halos using Electric Cyan at low opacity behind feature cards and images. Creates a "screen glow" effect as if the UI elements are emitting light.
+- **Blue-Black Gradient Washes**: Linear gradients from Composio Cobalt to Void Black used as section backgrounds, adding subtle color temperature shifts.
+- **White Fog Horizon**: A gradient from dark to diffused white/gray at the bottom of the page, creating an atmospheric "dawn" effect before the footer.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Void Black (`#0f0f0f`) as the primary page background — never pure white for main surfaces
+- Keep heading line-heights ultra-tight (0.87-1.0) for compressed, authoritative text blocks
+- Use white-opacity borders (4-12%) for containment — they're more important than shadows here
+- Reserve Electric Cyan (`#00ffff`) for high-signal moments only — CTAs, glows, interactive accents
+- Pair abcDiatype with JetBrains Mono to reinforce the developer-tool identity
+- Use the hard-offset shadow (`4px 4px`) intentionally on select elements for brutalist personality
+- Keep button text dark (`oklch(0.145 0 0)`) even on the darkest backgrounds — buttons carry their own surface
+- Layer opacity-based borders to create subtle depth without shadows
+- Use uppercase + letter-spacing only for tiny overline labels (12px or smaller)
+
+### Don't
+- Don't use bright backgrounds or light surfaces as primary containers
+- Don't apply heavy shadows everywhere — depth comes from border opacity, not box-shadow
+- Don't use Composio Cobalt (`#0007cd`) as a text color — it's too dark on dark and too saturated on light
+- Don't increase heading line-heights beyond 1.2 — the compressed feel is core to the identity
+- Don't use bold (700) weight for body or heading text — 400-500 is the ceiling
+- Don't mix warm colors — the palette is strictly cool (blue, cyan, white, black)
+- Don't use border-radius larger than 4px on content cards — the precision of near-square corners is intentional
+- Don't place Electric Cyan at full opacity on large surfaces — it's an accent, used at 12% max for backgrounds
+- Don't use decorative serif or handwritten fonts — the entire identity is geometric sans + monospace
+- Don't skip the monospace font for technical content — JetBrains Mono is not decorative, it's a credibility signal
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, hamburger nav, full-width cards, reduced section padding, hero text scales down to ~28-40px |
+| Tablet | 768-1024px | 2-column grid for cards, condensed nav, slightly reduced hero text |
+| Desktop | 1024-1440px | Full multi-column layout, expanded nav with all links visible, large hero typography (64px) |
+| Large Desktop | >1440px | Max-width container centered, generous horizontal margins |
+
+### Touch Targets
+- Minimum touch target: 44x44px for all interactive elements
+- Buttons use comfortable padding (8px 24px minimum) ensuring adequate touch area
+- Nav links spaced with sufficient gap for thumb navigation
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav on desktop collapses to hamburger on mobile
+- **Feature grids**: 3-column → 2-column → single-column stacking
+- **Hero text**: 64px → 40px → 28px progressive scaling
+- **Section padding**: Reduces proportionally but maintains generous vertical rhythm
+- **Cards**: Stack vertically on mobile with full-width treatment
+- **Code blocks**: Horizontal scroll on smaller viewports rather than wrapping
+
+### Image Behavior
+- Product screenshots scale proportionally within their containers
+- Dark-themed images maintain contrast on the dark background at all sizes
+- Gradient glow effects scale with container size
+- No visible art direction changes between breakpoints — same crops, proportional scaling
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Pure White (#ffffff)"
+- Page Background: "Void Black (#0f0f0f)"
+- Brand Accent: "Composio Cobalt (#0007cd)"
+- Glow Accent: "Electric Cyan (#00ffff)"
+- Heading Text: "Pure White (#ffffff)"
+- Body Text: "Ghost White (rgba(255,255,255,0.6))"
+- Card Border: "Border Mist 10 (rgba(255,255,255,0.10))"
+- Button Border: "Signal Blue (#0089ff)"
+
+### Example Component Prompts
+- "Create a feature card with a near-black background (#000000), barely visible white border at 10% opacity, subtly rounded corners (4px), and a hard-offset shadow (4px right, 4px down, 15% black). Use Pure White for the title in abcDiatype at 24px weight 500, and Ghost White (60% opacity) for the description at 16px."
+- "Design a primary CTA button with a solid white background, near-black text, comfortable padding (8px vertical, 24px horizontal), and subtly rounded corners. Place it next to a secondary button with transparent background, Signal Blue border, and matching padding."
+- "Build a hero section on Void Black (#0f0f0f) with a massive heading at 64px, line-height 0.87, in abcDiatype. Center the text. Add a subtle blue-to-black gradient glow behind the content. Include a white CTA button and a cyan-accented secondary button below."
+- "Create a code snippet display using JetBrains Mono at 14px with -0.28px letter-spacing on a black background. Add a Border Mist 10 border (rgba(255,255,255,0.10)) and 4px radius. Show syntax-highlighted content with white and cyan text."
+- "Design a navigation bar on Void Black with the Composio wordmark in white on the left, 4-5 nav links in white abcDiatype at 16px, and a white-fill CTA button on the right. Add a Border Mist 06 bottom border."
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document — "use Ghost White (rgba(255,255,255,0.6))" not "make it lighter"
+3. Use natural language descriptions — "make the border barely visible" = Border Mist 04-06
+4. Describe the desired "feel" alongside specific measurements — "compressed and authoritative heading at 48px with line-height 1.0"
+5. For glow effects, specify "Electric Cyan at 12% opacity as a radial gradient behind the element"
+6. Always specify which font — abcDiatype for marketing, JetBrains Mono for technical/code content

vibn-frontend/lib/scaffold/open-design/design-systems/contemporary/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Contemporary
+
+> Category: Modern & Minimal
+> Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
+
+## 1. Visual Theme & Atmosphere
+
+Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
+
+- **Visual style:** modern, minimal, bold, playful
+- **Color stance:** primary, secondary, neutral
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#C800DF` — Token from style foundations.
+- **Secondary:** `#E60076` — 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 (#C800DF) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Jost, display=Jost, mono=Overpass 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:** comfortable density mode
+- 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 `#C800DF`; 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 (#C800DF) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/corporate/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Corporate
+
+> Category: Professional & Corporate
+> Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
+
+## 1. Visual Theme & Atmosphere
+
+Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
+
+- **Visual style:** enterprise, 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:** desktop-first expressive scale
+- **Families:** primary=Open Sans, 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:** 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 `#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.

vibn-frontend/lib/scaffold/open-design/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.

vibn-frontend/lib/scaffold/open-design/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.

vibn-frontend/lib/scaffold/open-design/design-systems/cursor/DESIGN.md

@@ -0,0 +1,312 @@
+# Design System Inspired by Cursor
+
+> Category: Developer Tools
+> AI-first code editor. Sleek dark interface, gradient accents.
+
+## 1. Visual Theme & Atmosphere
+
+Cursor's website is a study in warm minimalism meets code-editor elegance. The entire experience is built on a warm off-white canvas (`#f2f1ed`) with dark warm-brown text (`#26251e`) -- not pure black, not neutral gray, but a deeply warm near-black with a yellowish undertone that evokes old paper, ink, and craft. This warmth permeates every surface: backgrounds lean toward cream (`#e6e5e0`, `#ebeae5`), borders dissolve into transparent warm overlays using `oklab` color space, and even the error state (`#cf2d56`) carries warmth rather than clinical red. The result feels more like a premium print publication than a tech website.
+
+The custom CursorGothic font is the typographic signature -- a gothic sans-serif with aggressive negative letter-spacing at display sizes (-2.16px at 72px) that creates a compressed, engineered feel. As a secondary voice, the jjannon serif font (with OpenType `"cswh"` contextual swash alternates) provides literary counterpoint for body copy and editorial passages. The monospace voice comes from berkeleyMono, a refined coding font that connects the marketing site to Cursor's core identity as a code editor. This three-font system (gothic display, serif body, mono code) gives Cursor one of the most typographically rich palettes in developer tooling.
+
+The border system is particularly distinctive -- Cursor uses `oklab()` color space for border colors, applying warm brown at various alpha levels (0.1, 0.2, 0.55) to create borders that feel organic rather than mechanical. The signature border color `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` is not a simple rgba value but a perceptually uniform color that maintains visual consistency across different backgrounds.
+
+**Key Characteristics:**
+- CursorGothic with aggressive negative letter-spacing (-2.16px at 72px, -0.72px at 36px) for compressed display headings
+- jjannon serif for body text with OpenType `"cswh"` (contextual swash alternates)
+- berkeleyMono for code and technical labels
+- Warm off-white background (`#f2f1ed`) instead of pure white -- the entire system is warm-shifted
+- Primary text color `#26251e` (warm near-black with yellow undertone)
+- Accent orange `#f54e00` for brand highlight and links
+- oklab-space borders at various alpha levels for perceptually uniform edge treatment
+- Pill-shaped elements with extreme radius (33.5M px, effectively full-pill)
+- 8px base spacing system with fine-grained sub-8px increments (1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cursor Dark** (`#26251e`): Primary text, headings, dark UI surfaces. A warm near-black with distinct yellow-brown undertone -- the defining color of the system.
+- **Cursor Cream** (`#f2f1ed`): Page background, primary surface. Not white but a warm cream that sets the entire warm tone.
+- **Cursor Light** (`#e6e5e0`): Secondary surface, button backgrounds, card fills. A slightly warmer, slightly darker cream.
+- **Pure White** (`#ffffff`): Used sparingly for maximum contrast elements and specific surface highlights.
+- **True Black** (`#000000`): Minimal use, specific code/console contexts.
+
+### Accent
+- **Cursor Orange** (`#f54e00`): Brand accent, `--color-accent`. A vibrant red-orange used for primary CTAs, active links, and brand moments. Warm and urgent.
+- **Gold** (`#c08532`): Secondary accent, warm gold for premium or highlighted contexts.
+
+### Semantic
+- **Error** (`#cf2d56`): `--color-error`. A warm crimson-rose rather than cold red.
+- **Success** (`#1f8a65`): `--color-success`. A muted teal-green, warm-shifted.
+
+### Timeline / Feature Colors
+- **Thinking** (`#dfa88f`): Warm peach for "thinking" state in AI timeline.
+- **Grep** (`#9fc9a2`): Soft sage green for search/grep operations.
+- **Read** (`#9fbbe0`): Soft blue for file reading operations.
+- **Edit** (`#c0a8dd`): Soft lavender for editing operations.
+
+### Surface Scale
+- **Surface 100** (`#f7f7f4`): Lightest button/card surface, barely tinted.
+- **Surface 200** (`#f2f1ed`): Primary page background.
+- **Surface 300** (`#ebeae5`): Button default background, subtle emphasis.
+- **Surface 400** (`#e6e5e0`): Card backgrounds, secondary surfaces.
+- **Surface 500** (`#e1e0db`): Tertiary button background, deeper emphasis.
+
+### Border Colors
+- **Border Primary** (`oklab(0.263084 -0.00230259 0.0124794 / 0.1)`): Standard border, 10% warm brown in oklab space.
+- **Border Medium** (`oklab(0.263084 -0.00230259 0.0124794 / 0.2)`): Emphasized border, 20% warm brown.
+- **Border Strong** (`rgba(38, 37, 30, 0.55)`): Strong borders, table rules.
+- **Border Solid** (`#26251e`): Full-opacity dark border for maximum contrast.
+- **Border Light** (`#f2f1ed`): Light border matching page background.
+
+### Shadows & Depth
+- **Card Shadow** (`rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab(0.263084 -0.00230259 0.0124794 / 0.1) 0px 0px 0px 1px`): Heavy elevated card with warm oklab border ring.
+- **Ambient Shadow** (`rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px`): Subtle ambient glow for floating elements.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display/Headlines**: `CursorGothic`, with fallbacks: `CursorGothic Fallback, system-ui, Helvetica Neue, Helvetica, Arial`
+- **Body/Editorial**: `jjannon`, with fallbacks: `Iowan Old Style, Palatino Linotype, URW Palladio L, P052, ui-serif, Georgia, Cambria, Times New Roman, Times`
+- **Code/Technical**: `berkeleyMono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New`
+- **UI/System**: `system-ui`, with fallbacks: `-apple-system, Segoe UI, Helvetica Neue, Arial`
+- **Icons**: `CursorIcons16` (icon font at 14px and 12px)
+- **OpenType Features**: `"cswh"` on jjannon body text, `"ss09"` on CursorGothic buttons/captions
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | CursorGothic | 72px (4.50rem) | 400 | 1.10 (tight) | -2.16px | Maximum compression, hero statements |
+| Section Heading | CursorGothic | 36px (2.25rem) | 400 | 1.20 (tight) | -0.72px | Feature sections, CTA headlines |
+| Sub-heading | CursorGothic | 26px (1.63rem) | 400 | 1.25 (tight) | -0.325px | Card headings, sub-sections |
+| Title Small | CursorGothic | 22px (1.38rem) | 400 | 1.30 (tight) | -0.11px | Smaller titles, list headings |
+| Body Serif | jjannon | 19.2px (1.20rem) | 500 | 1.50 | normal | Editorial body with `"cswh"` |
+| Body Serif SM | jjannon | 17.28px (1.08rem) | 400 | 1.35 | normal | Standard body text, descriptions |
+| Body Sans | CursorGothic | 16px (1.00rem) | 400 | 1.50 | normal/0.08px | UI body text |
+| Button Label | CursorGothic | 14px (0.88rem) | 400 | 1.00 (tight) | normal | Primary button text |
+| Button Caption | CursorGothic | 14px (0.88rem) | 400 | 1.50 | 0.14px | Secondary button with `"ss09"` |
+| Caption | CursorGothic | 11px (0.69rem) | 400-500 | 1.50 | normal | Small captions, metadata |
+| System Heading | system-ui | 20px (1.25rem) | 700 | 1.55 | normal | System UI headings |
+| System Caption | system-ui | 13px (0.81rem) | 500-600 | 1.33 | normal | System UI labels |
+| System Micro | system-ui | 11px (0.69rem) | 500 | 1.27 (tight) | 0.048px | Uppercase micro labels |
+| Mono Body | berkeleyMono | 12px (0.75rem) | 400 | 1.67 (relaxed) | normal | Code blocks |
+| Mono Small | berkeleyMono | 11px (0.69rem) | 400 | 1.33 | -0.275px | Inline code, terminal |
+| Lato Heading | Lato | 16px (1.00rem) | 600 | 1.33 | normal | Lato section headings |
+| Lato Caption | Lato | 14px (0.88rem) | 400-600 | 1.33 | normal | Lato captions |
+| Lato Micro | Lato | 12px (0.75rem) | 400-600 | 1.27 (tight) | 0.053px | Lato small labels |
+
+### Principles
+- **Gothic compression for impact**: CursorGothic at display sizes uses -2.16px letter-spacing at 72px, progressively relaxing: -0.72px at 36px, -0.325px at 26px, -0.11px at 22px, normal at 16px and below. The tracking creates a sense of precision engineering.
+- **Serif for soul**: jjannon provides literary warmth. The `"cswh"` feature adds contextual swash alternates that give body text a calligraphic quality.
+- **Three typographic voices**: Gothic (display/UI), serif (editorial/body), mono (code/technical). Each serves a distinct communication purpose.
+- **Weight restraint**: CursorGothic uses weight 400 almost exclusively, relying on size and tracking for hierarchy rather than weight. System-ui components use 500-700 for functional emphasis.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Warm Surface)**
+- Background: `#ebeae5` (Surface 300)
+- Text: `#26251e` (Cursor Dark)
+- Padding: 10px 12px 10px 14px
+- Radius: 8px
+- Outline: none
+- Hover: text shifts to `var(--color-error)` (`#cf2d56`)
+- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
+- Use: Primary actions, main CTAs
+
+**Secondary Pill**
+- Background: `#e6e5e0` (Surface 400)
+- Text: `oklab(0.263 / 0.6)` (60% warm brown)
+- Padding: 3px 8px
+- Radius: full pill (33.5M px)
+- Hover: text shifts to `var(--color-error)`
+- Use: Tags, filters, secondary actions
+
+**Tertiary Pill**
+- Background: `#e1e0db` (Surface 500)
+- Text: `oklab(0.263 / 0.6)` (60% warm brown)
+- Radius: full pill
+- Use: Active filter state, selected tags
+
+**Ghost (Transparent)**
+- Background: `rgba(38, 37, 30, 0.06)` (6% warm brown)
+- Text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
+- Padding: 6px 12px
+- Use: Tertiary actions, dismiss buttons
+
+**Light Surface**
+- Background: `#f7f7f4` (Surface 100) or `#f2f1ed` (Surface 200)
+- Text: `#26251e` or `oklab(0.263 / 0.9)` (90%)
+- Padding: 0px 8px 1px 12px
+- Use: Dropdown triggers, subtle interactive elements
+
+### Cards & Containers
+- Background: `#e6e5e0` or `#f2f1ed`
+- Border: `1px solid oklab(0.263 / 0.1)` (warm brown at 10%)
+- Radius: 8px (standard), 4px (compact), 10px (featured)
+- Shadow: `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px` for elevated cards
+- Hover: shadow intensification
+
+### Inputs & Forms
+- Background: transparent or surface
+- Text: `#26251e`
+- Padding: 8px 8px 6px (textarea)
+- Border: `1px solid oklab(0.263 / 0.1)`
+- Focus: border shifts to `oklab(0.263 / 0.2)` or accent orange
+
+### Navigation
+- Clean horizontal nav on warm cream background
+- Cursor logotype left-aligned (~96x24px)
+- Links: 14px CursorGothic or system-ui, weight 500
+- CTA button: warm surface with Cursor Dark text
+- Tab navigation: bottom border `1px solid oklab(0.263 / 0.1)` with active tab differentiation
+
+### Image Treatment
+- Code editor screenshots with `1px solid oklab(0.263 / 0.1)` border
+- Rounded corners: 8px standard
+- AI chat/timeline screenshots dominate feature sections
+- Warm gradient or solid cream backgrounds behind hero images
+
+### Distinctive Components
+
+**AI Timeline**
+- Vertical timeline showing AI operations: thinking (peach), grep (sage), read (blue), edit (lavender)
+- Each step uses its semantic color with matching text
+- Connected with vertical lines
+- Core visual metaphor for Cursor's AI-first coding experience
+
+**Code Editor Previews**
+- Dark code editor screenshots with warm cream border frame
+- berkeleyMono for code text
+- Syntax highlighting using timeline colors
+
+**Pricing Cards**
+- Warm surface backgrounds with bordered containers
+- Feature lists using jjannon serif for readability
+- CTA buttons with accent orange or primary dark styling
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Fine scale: 1.5px, 2px, 2.5px, 3px, 4px, 5px, 6px (sub-8px for micro-adjustments)
+- Standard scale: 8px, 10px, 12px, 14px (derived from extraction)
+- Extended scale (inferred): 16px, 24px, 32px, 48px, 64px, 96px
+- Notable: fine-grained sub-8px increments for precise icon/text alignment
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: centered single-column with generous top padding (80-120px)
+- Feature sections: 2-3 column grids for cards and features
+- Full-width sections with warm cream or slightly darker backgrounds
+- Sidebar layouts for documentation and settings pages
+
+### Whitespace Philosophy
+- **Warm negative space**: The cream background means whitespace has warmth and texture, unlike cold white minimalism. Large empty areas feel cozy rather than clinical.
+- **Compressed text, open layout**: Aggressive negative letter-spacing on CursorGothic headlines is balanced by generous surrounding margins. Text is dense; space around it breathes.
+- **Section variation**: Alternating surface tones (cream → lighter cream → cream) create subtle section differentiation without harsh boundaries.
+
+### Border Radius Scale
+- Micro (1.5px): Fine detail elements
+- Small (2px): Inline elements, code spans
+- Medium (3px): Small containers, inline badges
+- Standard (4px): Cards, images, compact buttons
+- Comfortable (8px): Primary buttons, cards, menus
+- Featured (10px): Larger containers, featured cards
+- Full Pill (33.5M px / 9999px): Pill buttons, tags, badges
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Border Ring (Level 1) | `oklab(0.263 / 0.1) 0px 0px 0px 1px` | Standard card/container border (warm oklab) |
+| Border Medium (Level 1b) | `oklab(0.263 / 0.2) 0px 0px 0px 1px` | Emphasized borders, active states |
+| Ambient (Level 2) | `rgba(0,0,0,0.02) 0px 0px 16px, rgba(0,0,0,0.008) 0px 0px 8px` | Floating elements, subtle glow |
+| Elevated Card (Level 3) | `rgba(0,0,0,0.14) 0px 28px 70px, rgba(0,0,0,0.1) 0px 14px 32px, oklab ring` | Modals, popovers, elevated cards |
+| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` on button focus | Interactive focus feedback |
+
+**Shadow Philosophy**: Cursor's depth system is built around two ideas. First, borders use perceptually uniform oklab color space rather than rgba, ensuring warm brown borders look consistent across different background tones. Second, elevation shadows use dramatically large blur values (28px, 70px) with moderate opacity (0.14, 0.1), creating a diffused, atmospheric lift rather than hard-edged drop shadows. Cards don't feel like they float above the page -- they feel like the page has gently opened a space for them.
+
+### Decorative Depth
+- Warm cream surface variations create subtle tonal depth without shadows
+- oklab borders at 10% and 20% create a spectrum of edge definition
+- No harsh divider lines -- section separation through background tone shifts and spacing
+
+## 7. Interaction & Motion
+
+### Hover States
+- Buttons: text color shifts to `--color-error` (`#cf2d56`) on hover -- a distinctive warm crimson that signals interactivity
+- Links: color shift to accent orange (`#f54e00`) or underline decoration with `rgba(38, 37, 30, 0.4)`
+- Cards: shadow intensification on hover (ambient → elevated)
+
+### Focus States
+- Shadow-based focus: `rgba(0,0,0,0.1) 0px 4px 12px` for depth-based focus indication
+- Border focus: `oklab(0.263 / 0.2)` (20% border) for input/form focus
+- Consistent warm tone in all focus states -- no cold blue focus rings
+
+### Transitions
+- Color transitions: 150ms ease for text/background color changes
+- Shadow transitions: 200ms ease for elevation changes
+- Transform: subtle scale or translate for interactive feedback
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <600px | Single column, reduced padding, stacked navigation |
+| Tablet Small | 600-768px | 2-column grids begin |
+| Tablet | 768-900px | Expanded card grids, sidebar appears |
+| Desktop Small | 900-1279px | Full layout forming |
+| Desktop | >1279px | Full layout, maximum content width |
+
+### Touch Targets
+- Buttons use comfortable padding (6px-14px vertical, 8px-14px horizontal)
+- Pill buttons maintain tap-friendly sizing with 3px-10px padding
+- Navigation links at 14px with adequate spacing for touch
+
+### Collapsing Strategy
+- Hero: 72px CursorGothic → 36px → 26px on smaller screens, maintaining proportional letter-spacing
+- Navigation: horizontal links → hamburger menu on mobile
+- Feature cards: 3-column → 2-column → single column stacked
+- Code editor screenshots: maintain aspect ratio, may shrink with border treatment preserved
+- Timeline visualization: horizontal → vertical stacking
+- Section spacing: 80px+ → 48px → 32px on mobile
+
+### Image Behavior
+- Editor screenshots maintain warm border treatment at all sizes
+- AI timeline adapts from horizontal to vertical layout
+- Product screenshots use responsive images with consistent border radius
+- Full-width hero images scale proportionally
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA background: `#ebeae5` (warm cream button)
+- Page background: `#f2f1ed` (warm off-white)
+- Text color: `#26251e` (warm near-black)
+- Secondary text: `rgba(38, 37, 30, 0.55)` (55% warm brown)
+- Accent: `#f54e00` (orange)
+- Error/hover: `#cf2d56` (warm crimson)
+- Success: `#1f8a65` (muted teal)
+- Border: `oklab(0.263084 -0.00230259 0.0124794 / 0.1)` or `rgba(38, 37, 30, 0.1)` as fallback
+
+### Example Component Prompts
+- "Create a hero section on `#f2f1ed` warm cream background. Headline at 72px CursorGothic weight 400, line-height 1.10, letter-spacing -2.16px, color `#26251e`. Subtitle at 17.28px jjannon weight 400, line-height 1.35, color `rgba(38,37,30,0.55)`. Primary CTA button (`#ebeae5` bg, 8px radius, 10px 14px padding) with hover text shift to `#cf2d56`."
+- "Design a card: `#e6e5e0` background, border `1px solid rgba(38,37,30,0.1)`. Radius 8px. Title at 22px CursorGothic weight 400, letter-spacing -0.11px. Body at 17.28px jjannon weight 400, color `rgba(38,37,30,0.55)`. Use `#f54e00` for link accents."
+- "Build a pill tag: `#e6e5e0` background, `rgba(38,37,30,0.6)` text, full-pill radius (9999px), 3px 8px padding, 14px CursorGothic weight 400."
+- "Create navigation: sticky `#f2f1ed` background with backdrop-filter blur. 14px system-ui weight 500 for links, `#26251e` text. CTA button right-aligned with `#ebeae5` bg and 8px radius. Bottom border `1px solid rgba(38,37,30,0.1)`."
+- "Design an AI timeline showing four steps: Thinking (`#dfa88f`), Grep (`#9fc9a2`), Read (`#9fbbe0`), Edit (`#c0a8dd`). Each step: 14px system-ui label + 16px CursorGothic description + vertical connecting line in `rgba(38,37,30,0.1)`."
+
+### Iteration Guide
+1. Always use warm tones -- `#f2f1ed` background, `#26251e` text, never pure white/black for primary surfaces
+2. Letter-spacing scales with font size for CursorGothic: -2.16px at 72px, -0.72px at 36px, -0.325px at 26px, normal at 16px
+3. Use `rgba(38, 37, 30, alpha)` as a CSS-compatible fallback for oklab borders
+4. Three fonts, three voices: CursorGothic (display/UI), jjannon (editorial), berkeleyMono (code)
+5. Pill shapes (9999px radius) for tags and filters; 8px radius for primary buttons and cards
+6. Hover states use `#cf2d56` text color -- the warm crimson shift is a signature interaction
+7. Shadows use large blur values (28px, 70px) for diffused atmospheric depth
+8. The sub-8px spacing scale (1.5, 2, 2.5, 3, 4, 5, 6px) is critical for icon/text micro-alignment

vibn-frontend/lib/scaffold/open-design/design-systems/cursor/components.html

@@ -0,0 +1,654 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Cursor — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/cursor. Every visible
+        value comes from tokens.css; if the agent paste-replaces the
+        :root block and reuses the component selectors below verbatim,
+        the artifact passes lint without further audit. Cursor's
+        signature moves: warm cream surfaces, three typographic voices
+        (CursorGothic / jjannon / berkeleyMono), oklab borders rendered
+        as rgba fallback, hover-text shifts to --danger crimson, and
+        diffused atmospheric shadows."
+    />
+
+    <style>
+      /* :root paste — sourced verbatim from
+         design-systems/cursor/tokens.css. Keep this block in sync
+         when tokens.css changes. The agent prompt instructs the
+         Designer panelist to paste this block as the FIRST thing in
+         their <style>, then reference everything below via var(...). */
+      :root {
+        --bg: #f2f1ed;
+        --surface: #e6e5e0;
+        --surface-warm: #ebeae5;
+
+        --fg: #26251e;
+        --fg-2: rgba(38, 37, 30, 0.9);
+        --muted: rgba(38, 37, 30, 0.55);
+        --meta: rgba(38, 37, 30, 0.4);
+
+        --border: rgba(38, 37, 30, 0.1);
+        --border-soft: rgba(38, 37, 30, 0.06);
+
+        --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%);
+
+        --success: #1f8a65;
+        --warn: #eab308;
+        --danger: #cf2d56;
+
+        --font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+        --font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+        --text-xs: 11px;
+        --text-sm: 14px;
+        --text-base: 16px;
+        --text-lg: 19.2px;
+        --text-xl: 22px;
+        --text-2xl: 26px;
+        --text-3xl: 36px;
+        --text-4xl: 72px;
+
+        --leading-body: 1.5;
+        --leading-tight: 1.10;
+        --tracking-display: -0.03em;
+
+        --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: 80px;
+        --section-y-tablet: 48px;
+        --section-y-phone: 32px;
+
+        --radius-sm: 8px;
+        --radius-md: 10px;
+        --radius-lg: 12px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised:
+          0 28px 70px rgba(0, 0, 0, 0.14),
+          0 14px 32px rgba(0, 0, 0, 0.1),
+          0 0 0 1px var(--border);
+
+        --focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+        --motion-fast: 150ms;
+        --motion-base: 200ms;
+        --ease-standard: ease;
+
+        --container-max: 1200px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet: 16px;
+        --container-gutter-phone: 12px;
+      }
+
+      /* ─── Reset (minimal) ───────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        /* Body uses jjannon serif. The three-voice system is a brand
+           signature; do not collapse to one font for "simplicity". */
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        font-feature-settings: "cswh"; /* contextual swash alternates */
+        -webkit-font-smoothing: antialiased;
+      }
+
+      /* ─── Layout primitives ─────────────────────────────────── */
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section {
+        /* Cursor's section separation is via tone shift + spacing,
+           not hard rules. The ring is intentionally faint. */
+        border-top: 1px solid var(--border);
+      }
+      @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); }
+      }
+
+      /* ─── Typography ────────────────────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        line-height: var(--leading-tight);
+        margin: 0;
+        /* CursorGothic uses weight 400 almost exclusively; size +
+           tracking carry hierarchy, not weight (DESIGN.md §3.4). */
+        font-weight: 400;
+      }
+      h1 {
+        /* Hero uses --text-4xl=72px with the full -0.03em tracking. */
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-3xl);
+        /* 36px section heading: line-height 1.20, tracking -0.72px (-0.02em).
+           Overrides the shared 1.10 (--leading-tight) set on h1/h2/h3 above. */
+        line-height: 1.20;
+        letter-spacing: -0.02em;
+      }
+      h3 {
+        font-size: var(--text-2xl);
+        /* 26px sub-heading: line-height 1.25, tracking -0.325px (-0.0125em).
+           Overrides the shared 1.10 (--leading-tight) set on h1/h2/h3 above. */
+        line-height: 1.25;
+        letter-spacing: -0.0125em;
+      }
+      p { margin: 0; }
+      .lead {
+        /* Lead body in serif voice — Cursor's editorial signature. */
+        font-family: var(--font-body);
+        font-size: var(--text-lg);
+        line-height: 1.35;
+        color: var(--muted);
+      }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      .body-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
+      /* `.eyebrow` — uppercase micro label, system-ui voice. Letter
+         spacing is well above craft/typography.md's 0.06em floor. */
+      .eyebrow {
+        font-family: var(--font-display);
+        font-size: var(--text-xs);
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 500;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ───────────────────────────────────────────── */
+      /* Cursor's primary CTA is NOT accent-bg — it is warm-surface bg
+         with dark text, signature for the brand. The accent orange
+         appears on link decoration and on the "accent pill" CTA used
+         sparingly (≤1 per screen). The hover signature is a text-color
+         shift to --danger (warm crimson), not bg-darken. */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 14px;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-display);
+        font-size: var(--text-sm);
+        font-weight: 400;
+        line-height: 1;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition:
+          color var(--motion-fast) var(--ease-standard),
+          background-color var(--motion-fast) var(--ease-standard),
+          box-shadow var(--motion-base) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:focus-visible {
+        outline: none;
+        /* DESIGN.md §7: focus is depth (4 12 0.1), not halo. */
+        box-shadow: var(--focus-ring);
+      }
+      /* Primary — warm-surface CTA. */
+      .btn-primary {
+        background: var(--surface-warm);
+        color: var(--fg);
+      }
+      .btn-primary:hover { color: var(--danger); }
+      .btn-primary:active { background: var(--surface); }
+      /* Secondary — ghost on warm surface. */
+      .btn-secondary {
+        background: transparent;
+        color: var(--muted);
+        border-color: var(--border);
+      }
+      .btn-secondary:hover {
+        color: var(--danger);
+        border-color: rgba(38, 37, 30, 0.2);
+      }
+      /* Accent pill — used at most once per screen for the loudest CTA.
+         This is the only place on the page where --accent is a bg. */
+      .btn-accent {
+        background: var(--accent);
+        color: var(--accent-on);
+        border-radius: var(--radius-pill);
+        padding: 10px 18px;
+      }
+      .btn-accent:hover { background: var(--accent-hover); }
+      .btn-accent:active { background: var(--accent-active); }
+
+      /* ─── Pill tags ─────────────────────────────────────────── */
+      /* Cursor's full-pill (9999px) badges/filters — DESIGN.md §4.1. */
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 3px 10px;
+        border-radius: var(--radius-pill);
+        background: var(--surface);
+        color: var(--meta);
+        font-family: var(--font-display);
+        font-size: var(--text-sm);
+        font-weight: 400;
+        line-height: 1.5;
+      }
+      .pill-active {
+        background: rgba(38, 37, 30, 0.06); /* deeper surface for selected state */
+        color: var(--fg);
+      }
+
+      /* ─── Inputs ────────────────────────────────────────────── */
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+      .field label {
+        font-family: var(--font-display);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        color: var(--fg);
+      }
+      .field input {
+        padding: 10px 12px;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        outline: none;
+        transition:
+          border-color var(--motion-fast) var(--ease-standard),
+          box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .field input:focus-visible {
+        outline: none;
+        border-color: rgba(38, 37, 30, 0.2);
+        box-shadow: var(--focus-ring);
+      }
+      .field input::placeholder { color: var(--meta); }
+      .field-help {
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        color: var(--muted);
+      }
+
+      /* ─── Cards ─────────────────────────────────────────────── */
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: var(--space-5);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        transition: box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .card:hover {
+        /* DESIGN.md §7: hover shadow intensification (ambient → elevated). */
+        box-shadow: var(--elev-raised);
+      }
+      .card-featured {
+        /* Featured card uses the larger 10px radius (DESIGN.md §5.4). */
+        border-radius: var(--radius-md);
+        background: var(--bg);
+      }
+
+      /* ─── Badges ────────────────────────────────────────────── */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 2px var(--space-3);
+        border-radius: var(--radius-pill);
+        font-family: var(--font-display);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        line-height: 1.6;
+      }
+      .badge-success {
+        color: var(--success);
+        background: color-mix(in oklab, var(--success), transparent 90%);
+      }
+      .badge-muted {
+        color: var(--muted);
+        background: color-mix(in oklab, var(--muted), transparent 88%);
+      }
+      .badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      /* ─── Links ─────────────────────────────────────────────── */
+      a {
+        color: var(--accent);
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+        text-decoration-color: var(--meta);
+      }
+
+      /* ─── Kbd ───────────────────────────────────────────────── */
+      kbd {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        padding: 2px 6px;
+        border-radius: 4px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--muted);
+      }
+
+      /* ─── AI timeline (decorative, signature element) ──────── */
+      /* DESIGN.md §4.7 — Cursor's AI timeline shows four states with
+         soft "warm pastel" colors. These are decorative state markers,
+         intentionally NOT promoted to brand surface tokens. */
+      .timeline {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        padding: var(--space-4);
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+      }
+      .timeline-step {
+        display: flex;
+        align-items: center;
+        gap: var(--space-3);
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--fg-2);
+      }
+      .timeline-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .timeline-thinking .timeline-dot { background: #dfa88f; }
+      .timeline-grep     .timeline-dot { background: #9fc9a2; }
+      .timeline-read     .timeline-dot { background: #9fbbe0; }
+      .timeline-edit     .timeline-dot { background: #c0a8dd; }
+
+      /* ─── Section-specific layout ───────────────────────────── */
+      .hero-grid {
+        display: grid;
+        /* Asymmetric hero — keeps the page from looking like an
+           AI-default centered template. */
+        grid-template-columns: 1.4fr 1fr;
+        gap: var(--space-12);
+        align-items: end;
+      }
+      @media (max-width: 1023px) {
+        .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
+      }
+      .hero-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-6);
+      }
+      .hero-meta {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        padding: var(--space-4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--bg);
+      }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+      }
+      @media (max-width: 1023px) {
+        .features-grid { grid-template-columns: 1fr 1fr; }
+      }
+      @media (max-width: 639px) {
+        .features-grid { grid-template-columns: 1fr; }
+      }
+      .form-row {
+        display: grid;
+        grid-template-columns: 1.4fr 1fr;
+        gap: var(--space-12);
+        align-items: start;
+      }
+      @media (max-width: 1023px) {
+        .form-row { grid-template-columns: 1fr; }
+      }
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        max-width: 420px;
+      }
+      .form-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-2);
+      }
+      .filter-row {
+        display: flex;
+        gap: var(--space-2);
+        flex-wrap: wrap;
+      }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+      .row-between {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-3);
+      }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- ════════════════════════════════════════════════════════════
+           HERO — exercises: h1 (CursorGothic 72px / -0.03em),
+           .lead (jjannon serif), .eyebrow, .btn-primary (warm-surface
+           CTA + crimson hover), .btn-accent (orange pill, used once
+           per page max), kbd (berkeleyMono), .badge-success.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · cursor</p>
+            <h1>The editor your team writes through, not at.</h1>
+            <p class="lead" style="max-width: 52ch">
+              Cursor pairs a serif voice with gothic compression so
+              feature copy reads like a publication and headlines hit
+              like an engineered statement. Three fonts, one warm cream
+              canvas, every value below comes from tokens.css.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-accent">
+                View tokens
+                <svg
+                  class="icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M5 12h14M13 6l6 6-6 6" />
+                </svg>
+              </a>
+              <a href="./DESIGN.md" class="btn btn-primary">Read the spec</a>
+            </div>
+          </div>
+
+          <aside class="hero-meta" aria-label="System status">
+            <div class="row-between">
+              <span class="body-sm">System status</span>
+              <span class="badge badge-success">
+                <span class="badge-dot" aria-hidden="true"></span>
+                Stable
+              </span>
+            </div>
+            <p class="body-sm body-muted">
+              Last reviewed
+              <time datetime="2026-05-14">2026-05-14</time> · v0.1
+            </p>
+            <p class="body-sm body-muted">
+              Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
+            </p>
+          </aside>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FEATURES — exercises: h2, h3, .card (warm surface + hover
+           shadow lift), .body-muted, .pill / .pill-active (full-pill
+           filter row), .features-grid, AI timeline component (the
+           cursor signature element).
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2 style="max-width: 28ch">
+            Every component below uses only var(--*) — no raw hex, no
+            off-token type.
+          </h2>
+        </div>
+
+        <div class="filter-row" style="margin-block-start: var(--space-6)">
+          <button class="pill pill-active">All</button>
+          <button class="pill">Surfaces</button>
+          <button class="pill">Typography</button>
+          <button class="pill">Motion</button>
+        </div>
+
+        <div class="features-grid" style="margin-block-start: var(--space-6)">
+          <article class="card">
+            <h3>Warm surfaces</h3>
+            <p class="body-muted body-sm">
+              --bg, --surface, --surface-warm form a three-tier cream
+              ladder. Pure white only inside code panels; the page
+              never reaches it on the canvas.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
+          </article>
+
+          <article class="card">
+            <h3>Three voices</h3>
+            <p class="body-muted body-sm">
+              CursorGothic for display, jjannon serif for body,
+              berkeleyMono for code. Each voice carries one role; the
+              system never collapses to two faces.
+            </p>
+            <a href="./DESIGN.md" class="body-sm">Read the spec →</a>
+          </article>
+
+          <article class="card card-featured">
+            <h3>oklab borders</h3>
+            <p class="body-muted body-sm">
+              Borders ship as rgba fallbacks of the oklab originals at
+              0.1 / 0.06 alpha — perceptually uniform across every
+              warm surface.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect borders →</a>
+          </article>
+        </div>
+
+        <div class="timeline" style="margin-block-start: var(--space-8); max-width: 480px">
+          <p class="eyebrow">AI timeline · signature element</p>
+          <div class="timeline-step timeline-thinking">
+            <span class="timeline-dot" aria-hidden="true"></span>
+            <span>thinking…</span>
+          </div>
+          <div class="timeline-step timeline-grep">
+            <span class="timeline-dot" aria-hidden="true"></span>
+            <span>grep "tokens.css" -r design-systems/</span>
+          </div>
+          <div class="timeline-step timeline-read">
+            <span class="timeline-dot" aria-hidden="true"></span>
+            <span>read default/tokens.css</span>
+          </div>
+          <div class="timeline-step timeline-edit">
+            <span class="timeline-dot" aria-hidden="true"></span>
+            <span>edit cursor/tokens.css → +56 tokens</span>
+          </div>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FORM — exercises: .field (jjannon body input), focus-visible
+           depth shadow (no halo), .btn-primary (warm-surface CTA),
+           .btn-secondary (ghost border), .field-help.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="form">
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Inputs inherit the same tokens.</h2>
+            <p class="body-muted" style="max-width: 48ch">
+              The focus state is a soft 4px-12px depth shadow — no
+              cool-blue halo. Border weights stay at oklab 0.1; on
+              focus the active border lifts to 0.2.
+            </p>
+          </div>
+
+          <form class="form" onsubmit="event.preventDefault();">
+            <div class="field">
+              <label for="email">Work email</label>
+              <input
+                id="email"
+                type="email"
+                placeholder="you@team.dev"
+                autocomplete="email"
+                required
+              />
+              <p class="field-help">
+                We'll send the spec PDF and nothing else.
+              </p>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">
+                Send the spec
+              </button>
+              <button type="button" class="btn btn-secondary">
+                Skip for now
+              </button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/cursor/tokens.css

@@ -0,0 +1,218 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/cursor/tokens.css
+ *
+ * Structured token bindings for the "Cursor" brand — the AI-first code
+ * editor's marketing voice translated into the shared schema. Like
+ * `default/tokens.css` and `kami/tokens.css`, agents are expected to
+ * paste the `:root { … }` block verbatim into the first `<style>` of
+ * every artifact, then reference values via `var(--name)`.
+ *
+ * Why this file exists:
+ *   DESIGN.md describes Cursor in prose ("warm cream `#f2f1ed`, warm
+ *   near-black `#26251e` text, oklab borders") — agents have to translate
+ *   that prose into shared token names without inventing brand variants
+ *   like `--cursor-cream`. This file pre-translates once.
+ *
+ * Brand identity in three sentences:
+ *   1. Warm-shifted everything — cream surfaces, near-black-with-yellow
+ *      text, oklab-space borders. Pure white / pure black are reserved
+ *      for code-editor panels and nowhere else.
+ *   2. Three typographic voices — CursorGothic at display sizes with
+ *      aggressive negative letter-spacing (signature), jjannon serif for
+ *      editorial body, berkeleyMono for code/kbd.
+ *   3. Hover semantic is text→crimson (`--danger`), not bg-darken.
+ *      Component CSS reading `--accent-hover` still gets the schema's
+ *      darken formula because some artifacts (CTA pills with accent bg)
+ *      do need it; the brand-signature crimson hover is component-level
+ *      not token-level.
+ *
+ * Schema decisions specific to Cursor:
+ *   - --surface-warm binds to a real warmer tier (#ebeae5 — the
+ *     "Surface 300" button-default), not aliased to surface. Cursor's
+ *     surface scale 100→500 is a hallmark; the schema slot maps to the
+ *     middle tier that buttons rest on.
+ *   - --fg-2, --meta, --border-soft bind to oklab-fallback rgba values
+ *     at distinct alpha levels (0.9 / 0.4 / 0.06) rather than aliasing,
+ *     because Cursor genuinely has the richer ramp.
+ *   - --tracking-display is set to -0.03em (the 72px hero value
+ *     normalized to em). Smaller display sizes in components should
+ *     scale tracking proportionally; the schema only carries one slot.
+ *   - --elev-raised binds to Cursor's signature 28px/70px diffused
+ *     shadow rather than the schema fallback. This is the depth move
+ *     that makes Cursor feel like a print publication.
+ *   - --focus-ring is depth-only (0 4px 12px), not the halo formula.
+ *     Cursor never paints cool-blue rings.
+ *   - --ease-standard: ease (per DESIGN.md §Interaction & Motion), not
+ *     the schema's cubic-bezier. Brand authenticity over micro-control.
+ *
+ * Tokens NOT lifted (intentional):
+ *   - The fine-grained sub-8px spacing scale (1.5px, 2px, 2.5px, 3px,
+ *     5px, 6px) used for icon/text micro-alignment is component-internal
+ *     in this fixture. Promote to C-extension via BRAND_EXTENSIONS only
+ *     if cross-component reuse demands it.
+ *   - The named surface scale 100/200/300/400/500 is encoded via the
+ *     three schema slots (--bg / --surface / --surface-warm). The
+ *     extreme tiers (100 lightest, 500 deepest) live as inline
+ *     declarations in components.html where needed.
+ *   - The timeline state colors (Thinking peach, Grep sage, Read blue,
+ *     Edit lavender) are decorative state markers, not brand surface
+ *     tokens. They belong in component CSS for the AI timeline element,
+ *     not in :root.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels) ──────────────────────────────────────────
+   * Cream canvas that defines the entire warm system. Default's
+   * `#fafafa → #ffffff` ladder gets replaced by `#f2f1ed → #e6e5e0`,
+   * with the warmer surface tier (#ebeae5) bound to --surface-warm
+   * for buttons that rest on the page background. */
+  --bg: #f2f1ed;                    /* Surface 200 — warm off-white */
+  --surface: #e6e5e0;               /* Surface 400 — card / lifted */
+  --surface-warm: #ebeae5;          /* Surface 300 — button default */
+
+  /* ─── Foreground ramp (4 levels) ────────────────────────────────
+   * Cursor genuinely has a 4-tier ramp: solid for headings/body,
+   * 90% for "light surface" button labels, 55% for secondary text,
+   * 40% for link underlines and metadata. All bind to the same
+   * oklab-fallback rgba (warm brown) at different alphas. */
+  --fg: #26251e;                              /* warm near-black */
+  --fg-2: rgba(38, 37, 30, 0.9);              /* solid headings on light surfaces */
+  --muted: rgba(38, 37, 30, 0.55);            /* secondary text */
+  --meta: rgba(38, 37, 30, 0.4);              /* metadata, link decoration */
+
+  /* ─── Border (2 levels) ─────────────────────────────────────────
+   * DESIGN.md §Color Palette specifies oklab-space borders as the
+   * brand signature. The CSS-compatible fallback (rgba) is what
+   * actually ships per DESIGN.md §Agent Prompt Guide rule 3. */
+  --border: rgba(38, 37, 30, 0.1);            /* primary border, 10% warm brown */
+  --border-soft: rgba(38, 37, 30, 0.06);      /* row separators, ghost-button bg */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Cursor Orange — primary CTAs, link color, ONE hero accent per
+   * screen. Hard cap of 2 visible uses per screen still applies via
+   * lint. Note: the signature hover semantic in DESIGN.md is text
+   * shifting to --danger (crimson) on buttons; the schema's
+   * --accent-hover is reserved for the bg-darken case (when accent
+   * IS the bg, e.g. accent-pill CTA). */
+  --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 ────────────────────────────────────────────────────
+   * --danger is Cursor's signature interaction color (hover crimson
+   * on buttons), so it gets the brand-specific warm value rather
+   * than the schema fallback's pure red. --success is a muted
+   * teal-green (warm-shifted). --warn keeps the schema fallback;
+   * Cursor's marketing site has no native warn token. */
+  --success: #1f8a65;                         /* muted teal-green */
+  --warn: #eab308;
+  --danger: #cf2d56;                          /* warm crimson — hover signature */
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Three voices, three roles:
+   *   --font-display: CursorGothic for headings + UI labels
+   *   --font-body: jjannon serif for editorial body (literary warmth)
+   *   --font-mono: berkeleyMono for code, kbd, terminal text
+   * The three-voice system is the typographic signature; component
+   * CSS should never substitute fewer voices for "simplicity". */
+  --font-display: "CursorGothic", "CursorGothic Fallback", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-body: "jjannon", "Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: "berkeleyMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Type scale — distilled from DESIGN.md §Typography Hierarchy.
+   * Cursor has more than 8 sizes in production (caption 11, body
+   * sans 16, body serif sm 17.28, body serif 19.2, title small 22,
+   * sub-heading 26, section 36, hero 72); the schema's 8 slots
+   * cover the spine. 17.28px / 19.2px live inline in components.html
+   * where the body-serif distinction matters. */
+  --text-xs: 11px;                  /* caption, system micro */
+  --text-sm: 14px;                  /* button label, system caption */
+  --text-base: 16px;                /* body sans, ui body */
+  --text-lg: 19.2px;                /* body serif (1.20rem) */
+  --text-xl: 22px;                  /* title small */
+  --text-2xl: 26px;                 /* sub-heading */
+  --text-3xl: 36px;                 /* section heading */
+  --text-4xl: 72px;                 /* display hero */
+
+  /* Leading + tracking — DESIGN.md §Typography Hierarchy.
+   * --leading-tight=1.10 is Cursor's hero rhythm (matches the
+   * 72px display); brands with relaxed display rhythms set 1.20.
+   * --tracking-display=-0.03em is the 72px-normalized hero tracking
+   * (-2.16px / 72px). Smaller display sizes in components.html
+   * use proportional inline overrides. */
+  --leading-body: 1.5;
+  --leading-tight: 1.10;
+  --tracking-display: -0.03em;
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 8px-rooted scale from DESIGN.md §Layout Principles (with the
+   * --space-1=4px tier kept for icon/dot rhythm). Cursor's
+   * sub-8px micro-scale (1.5/2/2.5/3/5/6) is component-internal —
+   * see the elev-ring / icon-rule decisions in components.html. */
+  --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 — DESIGN.md §Responsive Behavior collapsing
+   * strategy: "Section spacing: 80px+ → 48px → 32px on mobile". */
+  --section-y-desktop: 80px;
+  --section-y-tablet: 48px;
+  --section-y-phone: 32px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * DESIGN.md §Border Radius Scale: comfortable 8px (primary
+   * buttons/cards/menus), featured 10px (larger containers), full
+   * pill 9999px (tags/filters). Schema's --radius-md gets 10px
+   * rather than 12px to honor the cursor-specific featured tier;
+   * --radius-lg keeps 12px because no Cursor surface uses 16px+. */
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ───────────────────────────────────────────────────
+   * Cursor's depth signature (DESIGN.md §Depth & Elevation): no
+   * crisp drop shadows. Border ring + diffused atmospheric lift.
+   *   --elev-flat: pages, text blocks
+   *   --elev-ring: standard card edge (1px warm-brown ring)
+   *   --elev-raised: signature heavy-blur shadow with oklab ring,
+   *                  used for elevated cards / popovers / modals. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised:
+    0 28px 70px rgba(0, 0, 0, 0.14),
+    0 14px 32px rgba(0, 0, 0, 0.1),
+    0 0 0 1px var(--border);
+
+  /* ─── Focus ───────────────────────────────────────────────────────
+   * DESIGN.md §Interaction & Motion: "Shadow-based focus:
+   * rgba(0,0,0,0.1) 0px 4px 12px for depth-based focus indication.
+   * Consistent warm tone in all focus states — no cold blue focus
+   * rings." Implemented as box-shadow so it layers without
+   * affecting layout. */
+  --focus-ring: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * DESIGN.md §Interaction & Motion specifies 150ms color / 200ms
+   * shadow with `ease` easing. Cursor uses the keyword `ease`
+   * rather than a custom cubic-bezier; component authors should
+   * not rebind to a more aggressive curve. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: ease;
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * DESIGN.md §Grid & Container: "Max content width: approximately
+   * 1200px". Gutters not explicitly specified; using cross-brand
+   * defaults that match default. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+}

vibn-frontend/lib/scaffold/open-design/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.

vibn-frontend/lib/scaffold/open-design/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.

vibn-frontend/lib/scaffold/open-design/design-systems/default/components.html

@@ -0,0 +1,523 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Neutral Modern — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/default. Every visible
+        value comes from tokens.css; if the agent paste-replaces the
+        :root block and reuses the component selectors below verbatim,
+        the artifact passes lint without further audit."
+    />
+
+    <style>
+      /* :root paste — sourced verbatim from
+         design-systems/default/tokens.css. Keep this block in sync
+         when tokens.css changes. The agent prompt instructs the
+         Designer panelist to paste this block as the FIRST thing in
+         their <style>, then reference everything below via var(...). */
+      :root {
+        --bg: #fafafa;
+        --surface: #ffffff;
+        --surface-warm: var(--surface);
+
+        --fg: #111111;
+        --fg-2: var(--fg);
+        --muted: #6b6b6b;
+        --meta: var(--muted);
+
+        --border: #e5e5e5;
+        --border-soft: var(--border);
+
+        --accent: #2f6feb;
+        --accent-on: #ffffff;
+        --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+        --success: #17a34a;
+        --warn: #eab308;
+        --danger: #dc2626;
+
+        --font-display: "Inter", -apple-system, system-ui, sans-serif;
+        --font-body: "Inter", -apple-system, system-ui, sans-serif;
+        --font-mono: ui-monospace, "JetBrains Mono", monospace;
+
+        --text-xs: 12px;
+        --text-sm: 14px;
+        --text-base: 16px;
+        --text-lg: 20px;
+        --text-xl: 24px;
+        --text-2xl: 32px;
+        --text-3xl: 48px;
+        --text-4xl: 64px;
+
+        --leading-body: 1.5;
+        --leading-tight: 1.2;
+        --tracking-display: -0.01em;
+
+        --space-1: 4px;
+        --space-2: 8px;
+        --space-3: 12px;
+        --space-4: 16px;
+        --space-5: 20px;
+        --space-6: 24px;
+        --space-8: 32px;
+        --space-12: 48px;
+        --space-20: 80px;
+
+        --section-y-desktop: 80px;
+        --section-y-tablet: 48px;
+        --section-y-phone: 32px;
+
+        --radius-sm: 8px;
+        --radius-md: 12px;
+        --radius-lg: 16px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-raised: 0 2px 8px
+          color-mix(in oklab, var(--fg), transparent 92%);
+
+        --focus-ring: 0 0 0 3px
+          color-mix(in oklab, var(--accent), transparent 70%);
+
+        --motion-fast: 150ms;
+        --motion-base: 200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max: 1200px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet: 16px;
+        --container-gutter-phone: 12px;
+      }
+
+      /* ─── Reset (minimal) ───────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        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;
+      }
+
+      /* ─── Layout primitives ─────────────────────────────────── */
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section {
+        padding-block: var(--section-y-desktop);
+      }
+      section + section {
+        border-top: 1px solid var(--border);
+      }
+      @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); }
+      }
+
+      /* ─── Typography ────────────────────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        line-height: var(--leading-tight);
+        margin: 0;
+      }
+      h1 {
+        font-size: var(--text-3xl);
+        font-weight: 600;
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-2xl);
+        font-weight: 600;
+        letter-spacing: var(--tracking-display);
+      }
+      h3 {
+        font-size: var(--text-lg);
+        font-weight: 600;
+      }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        color: var(--muted);
+      }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      /* `.eyebrow` is the only component that uses uppercase + tracking.
+         craft/typography.md requires letter-spacing ≥ 0.06em on any
+         uppercase rule; the token below is well above that floor. */
+      .eyebrow {
+        font-size: var(--text-xs);
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-weight: 500;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ───────────────────────────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 16px;
+        border-radius: var(--radius-sm);
+        font-family: inherit;
+        font-size: var(--text-sm);
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition:
+          transform var(--motion-fast) var(--ease-standard),
+          background-color var(--motion-fast) var(--ease-standard),
+          border-color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:active { transform: translateY(1px); }
+      .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);
+      }
+      .btn-primary:active {
+        background: var(--accent-active);
+      }
+      .btn-secondary {
+        background: transparent;
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      .btn-secondary:hover {
+        background: var(--surface);
+        border-color: color-mix(in oklab, var(--border), var(--fg) 20%);
+      }
+
+      /* ─── Inputs ────────────────────────────────────────────── */
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+      .field label {
+        font-size: var(--text-sm);
+        font-weight: 500;
+      }
+      .field input {
+        padding: 10px 12px;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--fg);
+        font-family: inherit;
+        font-size: var(--text-sm);
+        outline: none;
+        transition:
+          border-color var(--motion-fast) var(--ease-standard),
+          box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input:focus-visible {
+        outline: none;
+        border-color: var(--accent);
+        box-shadow: var(--focus-ring);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field-help {
+        font-size: var(--text-xs);
+        color: var(--muted);
+      }
+
+      /* ─── Cards ─────────────────────────────────────────────── */
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-5);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+      }
+      /* No left-border accent on cards — that pattern is in the
+         lint's P0 list (`left-accent-card`). Use a hairline border
+         all-around or rely on the surface contrast against --bg. */
+
+      /* ─── Badges ────────────────────────────────────────────── */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 2px var(--space-2);
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        line-height: 1.6;
+      }
+      .badge-success {
+        color: var(--success);
+        background: color-mix(in oklab, var(--success), transparent 90%);
+      }
+      .badge-muted {
+        color: var(--muted);
+        background: color-mix(in oklab, var(--muted), transparent 88%);
+      }
+      .badge-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: currentColor;
+      }
+
+      /* ─── Links ─────────────────────────────────────────────── */
+      a {
+        color: var(--accent);
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      /* ─── Kbd ───────────────────────────────────────────────── */
+      kbd {
+        font-family: var(--font-mono);
+        font-size: var(--text-xs);
+        padding: 2px 6px;
+        border-radius: 4px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--muted);
+      }
+
+      /* ─── Section-specific layout ───────────────────────────── */
+      .hero-grid {
+        display: grid;
+        /* Asymmetric hero — left column wider — keeps it from looking
+           like an AI-default centered template. */
+        grid-template-columns: 1.4fr 1fr;
+        gap: var(--space-12);
+        align-items: end;
+      }
+      @media (max-width: 1023px) {
+        .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
+      }
+      .hero-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-6);
+      }
+      .hero-meta {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        padding: var(--space-4);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+      }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+      }
+      @media (max-width: 1023px) {
+        .features-grid { grid-template-columns: 1fr 1fr; }
+      }
+      @media (max-width: 639px) {
+        .features-grid { grid-template-columns: 1fr; }
+      }
+      .form-row {
+        display: grid;
+        grid-template-columns: 1.4fr 1fr;
+        gap: var(--space-12);
+        align-items: start;
+      }
+      @media (max-width: 1023px) {
+        .form-row { grid-template-columns: 1fr; }
+      }
+      .form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+        max-width: 420px;
+      }
+      .form-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-2);
+      }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+      .row-between {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-3);
+      }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- ════════════════════════════════════════════════════════════
+           HERO — exercises: h1, .lead, .eyebrow, .btn-primary,
+           .btn-secondary, kbd, .badge-success, container, section,
+           --space-* rhythm. Asymmetric grid on purpose.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · default</p>
+            <h1>One source for the values your team keeps re-deciding.</h1>
+            <p class="lead" style="max-width: 52ch">
+              A starter pack that turns brand decisions into shippable
+              tokens — colors, type, spacing — so every interface
+              inherits the same answer instead of reaching for a default.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">
+                View tokens
+                <svg
+                  class="icon"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.75"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  aria-hidden="true"
+                >
+                  <path d="M5 12h14M13 6l6 6-6 6" />
+                </svg>
+              </a>
+              <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
+            </div>
+          </div>
+
+          <aside class="hero-meta" aria-label="System status">
+            <div class="row-between">
+              <span class="body-sm">System status</span>
+              <span class="badge badge-success">
+                <span class="badge-dot" aria-hidden="true"></span>
+                Stable
+              </span>
+            </div>
+            <p class="body-sm body-muted">
+              Last reviewed
+              <time datetime="2026-05-11">2026-05-11</time> · v0.1
+            </p>
+            <p class="body-sm body-muted">
+              Press <kbd>⌘</kbd> <kbd>K</kbd> to search tokens.
+            </p>
+          </aside>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FEATURES — exercises: h2, h3, .card, .body-muted, link,
+           .features-grid. Each card describes a real property of this
+           fixture (no "feature one/two/three" filler).
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2 style="max-width: 28ch">
+            Every component below uses only var(--*) — no raw hex, no
+            off-token type.
+          </h2>
+        </div>
+
+        <div class="features-grid" style="margin-block-start: var(--space-8)">
+          <article class="card">
+            <h3>Surface tokens</h3>
+            <p class="body-muted body-sm">
+              --bg, --surface, --fg, --muted, --border. The whole page
+              derives from these five names; rebind them for any other
+              brand and the layout follows.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect tokens →</a>
+          </article>
+
+          <article class="card">
+            <h3>Accent discipline</h3>
+            <p class="body-muted body-sm">
+              --accent appears at most twice on this screen — the
+              primary CTA and the focus ring. The hero status uses
+              --success instead, so the page does not feel mono-blue.
+            </p>
+            <a href="./DESIGN.md" class="body-sm">Read the rule →</a>
+          </article>
+
+          <article class="card">
+            <h3>Type rhythm</h3>
+            <p class="body-muted body-sm">
+              Display and body share Inter but differ in size, weight,
+              and tracking. No third type face, no fourth size on this
+              screen.
+            </p>
+            <a href="./tokens.css" class="body-sm">Inspect typography →</a>
+          </article>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FORM — exercises: .field, input :focus-visible, .btn-primary
+           (reused), .btn-secondary, .field-help.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="form">
+        <div class="form-row">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Inputs inherit the same tokens.</h2>
+            <p class="body-muted" style="max-width: 48ch">
+              Focus rings, borders, placeholder color — all derive from
+              --accent and --border. The submit button reuses
+              .btn-primary unchanged. No new token introduced for this
+              section.
+            </p>
+          </div>
+
+          <form class="form" onsubmit="event.preventDefault();">
+            <div class="field">
+              <label for="email">Work email</label>
+              <input
+                id="email"
+                type="email"
+                placeholder="you@team.dev"
+                autocomplete="email"
+                required
+              />
+              <p class="field-help">
+                We'll send the spec PDF and nothing else.
+              </p>
+            </div>
+            <div class="form-actions">
+              <button type="submit" class="btn btn-primary">
+                Send the spec
+              </button>
+              <button type="button" class="btn btn-secondary">
+                Skip for now
+              </button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/default/tokens.css

@@ -0,0 +1,200 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/default/tokens.css
+ *
+ * Structured token bindings for "Neutral Modern" — the canonical
+ * starter design system. 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
+ * tokens via `var(--name)` from then on.
+ *
+ * Why this file exists:
+ *   DESIGN.md gives humans context ("Accent #2F6FEB — primary CTAs"),
+ *   but agents have to translate prose names like "Accent" into the
+ *   standard token names the lint enforces (`--accent`). That
+ *   translation is where token misuse happens. This file pre-translates
+ *   the brand once, so agents copy structure instead of inventing it.
+ *
+ * Contract sources:
+ *   - Standard token names: craft/color.md
+ *       (--bg / --surface / --fg / --muted / --border / --accent
+ *        / --success / --warn / --danger)
+ *   - Display-face contract: craft/anti-ai-slop.md
+ *       (--font-display, must be referenced via var())
+ *   - Lint enforcement: apps/daemon/src/lint-artifact.ts
+ *       (raw-hex >12 outside :root → P1; indigo laundering → P0)
+ *
+ * Schema notes (the shared schema grew from kami's stress test —
+ * see design-systems/kami/tokens.css for the rich form, and the
+ * #Gap N tags below for what each addition resolves):
+ *   #Gap 1  — 4-level foreground ramp (fg / fg-2 / muted / meta)
+ *   #Gap 2  — 3-level surface (bg / surface / surface-warm)
+ *   #Gap 3  — 2-level border (border / border-soft)
+ *   #Gap 4  — accent-hover binds to value, not formula
+ *   #Gap 5  — ring elevation as a first-class level (--elev-ring)
+ *
+ * Default doesn't differentiate every level kami needs, so the
+ * shallow tokens (`--fg-2`, `--meta`, `--surface-warm`, `--border-soft`)
+ * collapse to their richer siblings via `var()`. The names still
+ * exist so components can reference them uniformly across brands.
+ *
+ * Keep this file additive: never invent token names not also documented
+ * in DESIGN.md or the craft contracts. New brands cloning this template
+ * should overwrite values, not rename keys.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — #Gap 2) ─────────────────────────────────
+   * Per craft/color.md: never pure black, never pure white. Default
+   * uses #FAFAFA for bg and #FFFFFF for surface — the cream-to-white
+   * contrast gives cards lift without a shadow. `--surface-warm` is a
+   * schema slot for brands that need a tertiary tier (kami's warm-sand
+   * button bg); default has no third tier and aliases it to surface. */
+  --bg: #fafafa;
+  --surface: #ffffff;
+  --surface-warm: var(--surface);   /* alias — default has no warm tier */
+
+  /* ─── Foreground ramp (4 levels — #Gap 1) ───────────────────────
+   * Default differentiates only two text levels (primary + muted).
+   * `--fg-2` and `--meta` are schema slots for brands with richer
+   * ramps (kami uses near-black / dark-warm / olive / stone). They
+   * alias here so components targeting the full ramp resolve. */
+  --fg: #111111;
+  --fg-2: var(--fg);                /* alias — default has no secondary tier */
+  --muted: #6b6b6b;
+  --meta: var(--muted);             /* alias — default has no metadata tier */
+
+  /* ─── Border (2 levels — #Gap 3) ────────────────────────────────
+   * Default has one border weight; `--border-soft` is a schema slot
+   * for brands with row-separator vs card-edge differentiation. */
+  --border: #e5e5e5;
+  --border-soft: var(--border);     /* alias — default has no soft tier */
+
+  /* ─── Accent ──────────────────────────────────────────────────────
+   * Cobalt — primary CTAs, links, ONE hero element per screen.
+   * Hard cap of 2 visible uses per screen is enforced by lint
+   * (`accent-overuse` P1 fires at >6 inline occurrences). */
+  --accent: #2f6feb;
+  --accent-on: #ffffff; /* fg when accent is the bg (e.g. button label) */
+
+  /* ─── Accent states (#Gap 4) ────────────────────────────────────
+   * Hover and active variants for any element using --accent as bg.
+   * Default's mid-luminance cobalt admits a black-mix formula
+   * cleanly; that's a brand-specific binding, NOT a schema rule.
+   * kami binds --accent-hover to var(--accent) (no color shift,
+   * hover via elevation) because ink-blue is too dark for further
+   * darkening to read; other brands with light accents must
+   * hand-pick.
+   *
+   * Schema rule: every brand provides --accent-hover and
+   * --accent-active. The binding strategy (formula / identity /
+   * hand-picked) is brand-decided.
+   *
+   * Why these two are tokens (and other tints stay inline):
+   *   - cross-component (button, chip, tab, dropdown all need them)
+   *   - cross-mode reversal (dark-mode hover should mix white, not
+   *     black — token re-binding is one line per mode)
+   *   - cross-brand customization (formula breaks on light accents)
+   *   - lint-enforceable contract (every brand must provide these)
+   * Other inline `color-mix(...)` calls in components don't yet hit
+   * any of the above — promote them to tokens when a second use
+   * appears. */
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ────────────────────────────────────────────────────
+   * Reserved for state, not decoration. Keep total semantic-color
+   * pixels under 5% of the surface. */
+  --success: #17a34a;
+  --warn: #eab308;
+  --danger: #dc2626;
+
+  /* ─── Typography ──────────────────────────────────────────────────
+   * Inter for display is the documented "modern minimal" override
+   * to anti-ai-slop's serif-display rule (see DESIGN.md
+   * §Visual Theme & Atmosphere — "Calm, functional, quietly
+   * confident"). Other brands should rebind --font-display to a
+   * serif unless their direction is also tech/utility. */
+  --font-display: "Inter", -apple-system, system-ui, sans-serif;
+  --font-body: "Inter", -apple-system, system-ui, sans-serif;
+  --font-mono: ui-monospace, "JetBrains Mono", monospace;
+
+  /* Type scale (px) — direct copy of DESIGN.md §Typography Rules */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 20px;
+  --text-xl: 24px;
+  --text-2xl: 32px;
+  --text-3xl: 48px;
+  --text-4xl: 64px;
+
+  --leading-body: 1.5;
+  --leading-tight: 1.2;
+  --tracking-display: -0.01em; /* applied to display sizes ≥32px */
+
+  /* ─── Spacing ─────────────────────────────────────────────────────
+   * 4px base unit. Section rhythm (80/48/32) lives below as named
+   * tokens because DESIGN.md §Layout Principles treats them as
+   * breakpoint-specific decisions, not generic spacing. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-20: 80px;
+
+  --section-y-desktop: 80px;
+  --section-y-tablet: 48px;
+  --section-y-phone: 32px;
+
+  /* ─── Radius ──────────────────────────────────────────────────────
+   * Two intents: small (button/input) and medium (card/modal).
+   * `--radius-pill` reserved for chips/avatars; do not use it on
+   * cards or buttons. */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation (3 levels — #Gap 5) ─────────────────────────────
+   * Default uses two levels (flat + raised blur shadow) per its own
+   * DESIGN.md §Depth & Elevation. The schema gains `--elev-ring` as
+   * a first-class level so brands using ring shadows as primary
+   * elevation (kami, paper, editorial) don't need to rebind
+   * --elev-raised away from blur. Default declares all three; ring
+   * is available for hairline edges where a 1px border would shift
+   * layout. No fourth level — that's neumorphism territory. */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg), transparent 92%);
+
+  /* ─── Focus ring ──────────────────────────────────────────────────
+   * Single source of truth for keyboard-focus indicators. Every
+   * `:focus-visible` rule on buttons, inputs, links, and tabs must
+   * use this token — uniform behavior is itself a brand signal, and
+   * craft/accessibility-baseline.md treats focus visibility as a
+   * non-negotiable. Implemented as a `box-shadow` so it layers
+   * outside the element without affecting layout. */
+  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
+
+  /* ─── Motion ──────────────────────────────────────────────────────
+   * Two durations + one easing curve, per anti-ai-slop's "short,
+   * purposeful transitions (150–250ms) with stable easing". Add a
+   * third duration only when a real interaction needs it; do not
+   * invent `--motion-slow` speculatively. */
+  --motion-fast: 150ms;            /* hover, focus, micro-states */
+  --motion-base: 200ms;            /* general state changes */
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ──────────────────────────────────────────────────────
+   * Container width and per-breakpoint gutter. Skill-side responsive
+   * code reads these to decide grid columns. */
+  --container-max: 1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet: 16px;
+  --container-gutter-phone: 12px;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/discord/DESIGN.md

@@ -0,0 +1,162 @@
+# Design System Inspired by Discord
+
+> Category: Productivity & SaaS
+> Voice / chat platform. Deep blurple, dark-first surfaces, playful accent moments.
+
+## 1. Visual Theme & Atmosphere
+
+Discord's product is engineered for evenings, raids, and group voice — so the entire surface is dark-first. The default canvas is the deep `Background Primary` (`#313338` light theme, `#1e1f22` dark theme), with chat columns layered on slightly lighter or darker shades to denote channels, threads, and side panels. The signature **Blurple** (`#5865f2`) is reserved for the brand mark, primary CTAs, mentions, and the "you" affordance — used sparingly so it pops against the muted neutrals.
+
+Typography is **gg sans** (Discord's custom Whitney-replacement) for prose and chrome, with rounded geometric shapes that feel approachable but still legible at the small sizes a chat client demands. Headings step up incrementally; chat rows are tight (4–8px between message groups) so hours of scrollback feel scannable.
+
+The shape language is rounded but not balloon-soft: 8px radii on cards, 4px on inputs, full pills on status badges and tags. Servers are rounded-square avatars at 48px that morph to circles on hover — a tiny piece of motion that has become part of the brand's identity.
+
+**Key Characteristics:**
+- Dark-first surfaces: `#1e1f22` / `#2b2d31` / `#313338` (3-step depth)
+- Blurple `#5865f2` as the only saturated accent in the chat surface
+- gg sans (Whitney-style) for all text — friendly, geometric, neutral
+- Rounded-square server avatars (16px radius) that snap to circles on hover
+- Tight chat-row spacing, generous side-panel padding
+- Status dots: green online, yellow idle, red dnd, gray offline
+- Pixel-snapped 1px dividers in subtle off-white at low alpha
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Blurple** (`#5865f2`): Brand primary, primary CTA, mention highlight.
+- **Blurple Hover** (`#4752c4`): Hover/active for blurple.
+- **Blurple Soft** (`#7289da`): Legacy blurple, secondary accent in marketing.
+
+### Surface (Dark Theme — default)
+- **Background Tertiary** (`#1e1f22`): Server list rail, deepest background.
+- **Background Secondary** (`#2b2d31`): Channel sidebar, settings sidebar.
+- **Background Primary** (`#313338`): Chat surface, message column.
+- **Background Floating** (`#111214`): Floating popovers, tooltips, autocomplete.
+- **Background Modifier Hover** (`rgba(78, 80, 88, 0.3)`): Hover overlay on rows.
+- **Background Modifier Selected** (`rgba(78, 80, 88, 0.6)`): Active row.
+
+### Surface (Light Theme)
+- **Light Bg Primary** (`#ffffff`): Chat surface in light theme.
+- **Light Bg Secondary** (`#f2f3f5`): Sidebar in light theme.
+- **Light Bg Tertiary** (`#e3e5e8`): Deepest light surface.
+
+### Text
+- **Header Primary** (`#f2f3f5`): Channel headers, modal titles in dark theme.
+- **Header Secondary** (`#b5bac1`): Muted headers.
+- **Text Normal** (`#dbdee1`): Body text in dark theme — slightly cooler than pure white.
+- **Text Muted** (`#949ba4`): Timestamps, server names, secondary metadata.
+- **Text Link** (`#00a8fc`): Hyperlinks in messages — sky blue, distinct from blurple.
+- **Channels Default** (`#80848e`): Inactive channel name in sidebar.
+
+### Status & Semantic
+- **Status Online** (`#23a55a`): Online dot, success states.
+- **Status Idle** (`#f0b232`): Idle dot, away.
+- **Status DND** (`#f23f43`): Do-not-disturb, also serves as destructive red.
+- **Status Streaming** (`#593695`): "Streaming" purple.
+- **Status Offline** (`#80848e`): Offline gray.
+- **Mention Highlight** (`rgba(88, 101, 242, 0.1)`): Soft blurple wash on @mention rows.
+
+### Border & Divider
+- **Background Modifier Accent** (`rgba(255, 255, 255, 0.06)`): Standard divider in dark.
+- **Border Subtle** (`#3f4147`): Solid divider for cards.
+
+## 3. Typography Rules
+
+### Font Family
+- **Body / UI / Headings**: `gg sans`, with fallback: `"Helvetica Neue", Helvetica, Arial, sans-serif`
+- **Display (legacy / Whitney)**: `Whitney`, with fallback: `gg sans`
+- **Code / Mono**: `"gg mono"`, with fallback: `Consolas, Andale Mono, Courier New, Courier, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | gg sans | 56px (3.5rem) | 800 | 1.1 | -0.02em | Marketing hero |
+| Page Heading | gg sans | 24px (1.5rem) | 700 | 1.25 | normal | Settings/profile titles |
+| Channel Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | `#general`, channel header |
+| Message Body | gg sans | 16px (1rem) | 400 | 1.375 | normal | Standard chat text |
+| Username | gg sans | 16px (1rem) | 500 | 1.25 | normal | Author of a message |
+| Timestamp | gg sans | 12px (0.75rem) | 500 | 1.25 | normal | "Today at 4:32 PM" |
+| Sidebar Channel | gg sans | 16px (1rem) | 500 | 1.25 | normal | Channel list rows |
+| Server Name | gg sans | 16px (1rem) | 600 | 1.25 | normal | Server header |
+| Caption / Meta | gg sans | 12px (0.75rem) | 400 | 1.3 | 0.02em | Status text, edited tag |
+| Code Inline | gg mono | 0.875em | 400 | inherit | normal | Inline `code` |
+| Code Block | gg mono | 14px (0.875rem) | 400 | 1.5 | normal | ```triple-fenced``` block |
+
+### Principles
+- **Friendly geometry**: gg sans replaces Whitney with rounded terminals on a/g/s — the brand wants warmth without breaking legibility.
+- **Weight contrast over color contrast**: hierarchy comes from 400→500→600→700→800 weight steps; the surface stays neutral.
+- **16px body**: chat messages do not shrink below 16px. Density comes from line-height (1.375), not font size.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#5865f2`
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 4px
+- Hover: `#4752c4`
+- Use: Primary CTAs, "Continue", "Join Server"
+
+**Secondary**
+- Background: `#4e5058`
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 4px
+- Hover: `#6d6f78`
+
+**Tertiary / Subtle (Link-style)**
+- Background: transparent
+- Text: `#dbdee1`
+- Hover: text underlined, no background change
+
+**Danger**
+- Background: `#da373c`
+- Text: `#ffffff`
+- Hover: `#a12d2f`
+
+### Inputs
+- Background: `#1e1f22`
+- Text: `#dbdee1`
+- Border: 1px solid `#1e1f22`
+- Radius: 4px
+- Padding: 10px 12px
+- Focus: border `#5865f2`
+
+### Server Avatars
+- Size: 48×48px
+- Radius: 16px (rounded square) by default; transitions to 50% on hover and active.
+- Active state: 4px white pill on the left edge of the icon column.
+
+### Status Dots
+- Size: 10×10px
+- Border: 3px solid background-tertiary (creates the "notch" effect)
+- Position: bottom-right of avatar.
+
+### Cards / Embeds
+- Background: `#2b2d31` (dark) or `#f2f3f5` (light)
+- Left border: 4px solid embed accent color.
+- Radius: 4px
+- Padding: 8px 16px
+
+### Mention Pill
+- Background: `rgba(88, 101, 242, 0.3)`
+- Text: `#c9cdfb`
+- Padding: 0 2px
+- Radius: 3px
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 20, 24, 32, 40.
+- **Server rail**: 72px wide, fixed.
+- **Channel sidebar**: 240px wide.
+- **Member list**: 240px wide on desktop.
+- **Chat column**: fluid, min 380px.
+
+## 6. Motion
+
+- **Duration**: 200ms for hover; 350ms for the avatar circle-morph; 80ms for tooltip fade.
+- **Easing**: `cubic-bezier(0.215, 0.61, 0.355, 1)` for the avatar morph (snappy then settle).
+- **Notification pulse**: 1.4s ease-in-out infinite on unread mention indicator.

vibn-frontend/lib/scaffold/open-design/design-systems/discord/components.html

@@ -0,0 +1,359 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Discord — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/discord. Every visible
+        value comes from tokens.css. Discord's signature moves: dark-first
+        three-step depth ladder, gg sans with friendly geometry, Blurple
+        accent (#5865f2), semi-transparent white borders."
+    />
+
+    <style>
+      :root {
+        --bg:           #313338;
+        --surface:      #2b2d31;
+        --surface-warm: #1e1f22;
+
+        --fg:   #dbdee1;
+        --fg-2: #f2f3f5;
+        --muted: #949ba4;
+        --meta:  #80848e;
+
+        --border:      rgba(255, 255, 255, 0.06);
+        --border-soft: #3f4147;
+
+        --accent:        #5865f2;
+        --accent-on:     #ffffff;
+        --accent-hover:  #4752c4;
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+        --success: #23a55a;
+        --warn:    #f0b232;
+        --danger:  #f23f43;
+
+        --font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-body:    "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-mono:    "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
+
+        --text-xs:   12px;
+        --text-sm:   14px;
+        --text-base: 16px;
+        --text-lg:   18px;
+        --text-xl:   20px;
+        --text-2xl:  24px;
+        --text-3xl:  32px;
+        --text-4xl:  56px;
+
+        --leading-body:     1.375;
+        --leading-tight:    1.10;
+        --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: 40px;
+
+        --section-y-desktop: 80px;
+        --section-y-tablet:  48px;
+        --section-y-phone:   32px;
+
+        --radius-sm:   4px;
+        --radius-md:   8px;
+        --radius-lg:   16px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised:
+          rgba(0, 0, 0, 0.4) 0px 2px 4px,
+          0 0 0 1px rgba(255, 255, 255, 0.06);
+
+        --focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
+
+        --motion-fast:   80ms;
+        --motion-base:   200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max:            1200px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet:  16px;
+        --container-gutter-phone:   16px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        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;
+      }
+
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @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); }
+      }
+
+      /* ─── Typography ─────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 800;
+        margin: 0;
+        color: var(--fg-2);
+        line-height: var(--leading-tight);
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-3xl);
+        /* 32px section: line-height 1.20, normal tracking. */
+        line-height: 1.20;
+        font-weight: 700;
+      }
+      h3 {
+        font-size: var(--text-2xl);
+        /* 24px page heading: line-height 1.25 per DESIGN.md.
+           Overrides the shared 1.10 set above. */
+        line-height: 1.25;
+        font-weight: 700;
+      }
+      p { margin: 0; }
+      .lead { font-size: var(--text-lg); line-height: 1.55; color: var(--muted); font-weight: 400; }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); color: var(--muted); }
+      .eyebrow {
+        font-size: var(--text-xs);
+        font-weight: 500;
+        color: var(--meta);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+
+      /* ─── Buttons ─────────────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 8px 16px;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        font-weight: 500;
+        line-height: 1;
+        cursor: pointer;
+        border: none;
+        transition: background-color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .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); }
+      .btn-secondary { background: #4e5058; color: #ffffff; }
+      .btn-secondary:hover { background: #6d6f78; }
+      .btn-danger { background: #da373c; color: #ffffff; }
+
+      /* ─── Server avatars ─────────────────────── */
+      .server-rail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-2);
+        padding: var(--space-3);
+        background: var(--surface-warm);
+        border-radius: var(--radius-md);
+      }
+      .server-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 16px;
+        background: var(--accent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: var(--text-sm);
+        font-weight: 600;
+        color: white;
+        cursor: pointer;
+        transition: border-radius var(--motion-base) cubic-bezier(0.215, 0.61, 0.355, 1);
+      }
+      .server-icon:hover { border-radius: 50%; }
+
+      /* ─── Mention pill ───────────────────────── */
+      .mention {
+        display: inline;
+        background: rgba(88, 101, 242, 0.3);
+        color: #c9cdfb;
+        padding: 0 2px;
+        border-radius: 3px;
+        font-weight: 500;
+      }
+
+      /* ─── Card ───────────────────────────────── */
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border-soft);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+      }
+
+      /* ─── Inputs ─────────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.04em; }
+      .field input {
+        background: var(--surface-warm);
+        color: var(--fg);
+        border: 1px solid var(--surface-warm);
+        border-radius: var(--radius-sm);
+        padding: 10px 12px;
+        font-size: var(--text-base);
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field input:focus { border-color: var(--accent); }
+
+      /* ─── Layout ─────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.3fr 1fr;
+        gap: var(--space-12);
+        align-items: center;
+      }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-4);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- HERO -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · discord</p>
+            <h1>Your place to talk.</h1>
+            <p class="lead" style="max-width:46ch">
+              Discord is the easiest way to talk over voice, video, and text.
+              Dark-first, Blurple accent, gg sans — every value from tokens.css.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">Download for free</a>
+              <a href="./DESIGN.md" class="btn btn-secondary">Read the spec</a>
+            </div>
+          </div>
+
+          <aside style="display:flex;gap:var(--space-4);align-items:flex-start">
+            <div class="server-rail">
+              <div class="server-icon">OD</div>
+              <div style="width:32px;height:2px;background:var(--border-soft);border-radius:2px"></div>
+              <div class="server-icon" style="background:#23a55a;font-size:18px">🎮</div>
+              <div class="server-icon" style="background:#8250df;font-size:18px">🎨</div>
+            </div>
+            <div class="card stack-3" style="flex:1">
+              <p class="eyebrow"># general</p>
+              <p style="font-size:var(--text-base);color:var(--fg)">
+                <span style="font-weight:500;color:#f2f3f5">Ada</span>&nbsp;
+                <span style="font-size:var(--text-xs);color:var(--meta)">Today at 4:32 PM</span>
+              </p>
+              <p style="font-size:var(--text-base)">
+                Adding token fixtures for <span class="mention">@batch-2</span> brands today.
+              </p>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features">
+        <div class="stack-3" style="margin-bottom:var(--space-6)">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2>Dark depth through luminance steps.</h2>
+        </div>
+
+        <div class="features-grid">
+          <article class="card stack-3">
+            <h3>Three-step depth</h3>
+            <p class="body-sm">
+              #1e1f22 server rail → #2b2d31 sidebar → #313338 chat. Each step
+              slightly lighter. No color variation — only luminance.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Blurple accent</h3>
+            <p class="body-sm">
+              #5865f2 — reserved for CTAs, mentions, and "you" affordances.
+              Hover: #4752c4. Used sparingly so it pops against muted neutrals.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>gg sans geometry</h3>
+            <p class="body-sm">
+              Friendly rounded terminals on a/g/s. Weight 400/500/600/700/800 —
+              hierarchy through contrast, not color. 16px body never shrinks.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM -->
+      <section data-od-id="form">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Inputs on dark surfaces.</h2>
+            <p class="lead" style="max-width:44ch">
+              Background: #1e1f22. Border shifts to Blurple on focus.
+              Labels: uppercase, 0.04em tracking, weight 600.
+            </p>
+          </div>
+          <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
+                onsubmit="event.preventDefault()">
+            <div class="field">
+              <label for="email">Email</label>
+              <input id="email" type="email" placeholder="you@example.com" />
+            </div>
+            <div class="field">
+              <label for="username">Username</label>
+              <input id="username" type="text" placeholder="cooluser#1234" />
+            </div>
+            <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
+              <button type="submit" class="btn btn-primary">Continue</button>
+              <button type="button" class="btn btn-secondary">Back</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/discord/tokens.css

@@ -0,0 +1,125 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/discord/tokens.css
+ *
+ * Structured token bindings for the "Discord" brand — deep blurple,
+ * dark-first surfaces, voice-and-chat for gaming and community.
+ *
+ * Brand identity in three sentences:
+ *   1. Dark-first: three-step depth ladder (#1e1f22 deepest → #2b2d31
+ *      sidebar → #313338 chat surface), pixel-snapped 1px dividers at
+ *      low alpha, rounded-square server avatars that morph to circles.
+ *   2. gg sans (friendly geometric, Whitney-replacement) for all text at
+ *      400/500/600/700/800 weights; 16px body never shrinks; hierarchy
+ *      comes from weight contrast over color contrast.
+ *   3. Blurple (#5865f2) as the single saturated accent — reserved for
+ *      brand mark, primary CTAs, mentions, and "you" affordances; used
+ *      sparingly so it pops against the muted dark surface.
+ *
+ * Schema decisions:
+ *   - --bg: #313338 (chat surface / primary dark); --surface: #2b2d31.
+ *   - --surface-warm: #191a1e (deepest — server list rail, level below).
+ *   - --fg: #dbdee1 (text-normal — cooler than pure white).
+ *   - --fg-2: #f2f3f5 (header-primary — modal titles, channel headers).
+ *   - --muted: #949ba4 (text-muted — timestamps, metadata).
+ *   - --border: rgba(255,255,255,0.06); --border-soft: same.
+ *   - --accent: #5865f2 (Blurple); --accent-hover: #4752c4.
+ *   - --tracking-display: -0.02em (display 56px hero per DESIGN.md).
+ *   - --radius-sm: 4px (buttons/inputs); --radius-md: 8px (cards).
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #313338;              /* chat surface / primary dark */
+  --surface:      #2b2d31;              /* channel sidebar, settings sidebar */
+  --surface-warm: #1e1f22;             /* server list rail — deepest layer */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #dbdee1;                      /* text-normal — slightly cooler than white */
+  --fg-2: #f2f3f5;                      /* header-primary — modal titles */
+  --muted: #949ba4;                     /* text-muted — timestamps, server names */
+  --meta:  #80848e;                     /* channels-default — inactive sidebar names */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      rgba(255, 255, 255, 0.06);  /* standard divider */
+  --border-soft: #3f4147;                    /* solid divider for cards */
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent:        #5865f2;            /* Blurple — brand primary CTA */
+  --accent-on:     #ffffff;
+  --accent-hover:  #4752c4;            /* darker hover */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #23a55a;                  /* status-online green */
+  --warn:    #f0b232;                  /* status-idle yellow */
+  --danger:  #f23f43;                  /* status-dnd / destructive red */
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  --font-display: "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-body:    "gg sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-mono:    "gg mono", Consolas, "Andale Mono", "Courier New", Courier, monospace;
+
+  /* Type scale — DESIGN.md §Typography Hierarchy.
+   * Discord: 56px display, 24px page heading, 16px body (never shrinks).
+   * Schema spine: xs=12 (timestamp/caption), base=16, 4xl=56. */
+  --text-xs:   12px;                   /* timestamp / caption / meta */
+  --text-sm:   14px;                   /* compact metadata */
+  --text-base: 16px;                   /* message body — never below 16px */
+  --text-lg:   18px;                   /* feature heading */
+  --text-xl:   20px;                   /* sub-heading */
+  --text-2xl:  24px;                   /* page heading — settings/profile */
+  --text-3xl:  32px;                   /* section heading */
+  --text-4xl:  56px;                   /* display hero — marketing */
+
+  /* Leading + tracking.
+   * --leading-tight=1.10: 56px hero compression.
+   * h2 (32px) → 1.20; h3 (24px) → 1.25 per brand feel.
+   * --tracking-display: -0.02em (display 56px per DESIGN.md). */
+  --leading-body:     1.375;
+  --leading-tight:    1.10;
+  --tracking-display: -0.02em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  /* 4px base grid per DESIGN.md §Spacing & Layout. */
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  32px;
+  --space-12: 40px;
+
+  /* Section rhythm. */
+  --section-y-desktop: 80px;
+  --section-y-tablet:  48px;
+  --section-y-phone:   32px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* 4px for buttons/inputs; 8px for cards. Rounded but not balloon-soft. */
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   16px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* Dark surfaces: luminance stepping; semi-transparent white borders
+     as depth signal rather than drop shadows. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: rgba(0, 0, 0, 0.4) 0px 2px 4px, 0 0 0 1px rgba(255, 255, 255, 0.06);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  --focus-ring: 0 0 0 3px rgba(88, 101, 242, 0.3);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast:   80ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet:  16px;
+  --container-gutter-phone:   16px;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/dithered/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Dithered
+
+> Category: Retro & Nostalgic
+> Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
+
+## 1. Visual Theme & Atmosphere
+
+Dot-pattern rendering technique that simulates shades with a limited palette for nostalgic, retro, high-contrast visuals.
+
+- **Visual style:** modern, minimal
+- **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:** 14/16/18/24/32/40
+- **Families:** primary=Open Sans, display=Space Grotesk, 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.

vibn-frontend/lib/scaffold/open-design/design-systems/doodle/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Doodle
+
+> Category: Creative & Artistic
+> Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.
+
+## 1. Visual Theme & Atmosphere
+
+Hand-drawn, sketch-like style with doodles, handwritten fonts, and imperfect lines for a playful, informal feel.
+
+- **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:** `#49B6E5` — Token from style foundations.
+- **Secondary:** `#263D5B` — 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 (#49B6E5) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Delius Swash Caps, display=Delius Swash Caps, 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 `#49B6E5`; 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 (#49B6E5) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/dramatic/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Dramatic
+
+> Category: Bold & Expressive
+> High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
+
+## 1. Visual Theme & Atmosphere
+
+High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
+
+- **Visual style:** modern, clean, high-contrast
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#8B5CF6` — Token from style foundations.
+- **Secondary:** `#F43F5E` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — 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 (#8B5CF6) 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=Outfit, display=Outfit, mono=JetBrains Mono
+- **Weights:** 400, 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 `#8B5CF6`; 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 (#8B5CF6) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/duolingo/DESIGN.md

@@ -0,0 +1,154 @@
+# Design System Inspired by Duolingo
+
+> Category: Productivity & SaaS
+> Language-learning platform. Bright owl green, chunky shadows, gamified joy.
+
+## 1. Visual Theme & Atmosphere
+
+Duolingo is gamification rendered as visual language. The interface is unapologetically bright, with **owl green** (`#58cc02`) as the brand primary and a chunky 4px bottom-shadow on every interactive element that reads like a 3D button waiting to be pressed. The page is white (`#ffffff`) with thick 2–3px borders in a deep gray (`#e5e5e5`) and the entire system reads like an iOS app from 2015 reborn with better hierarchy.
+
+Typography uses **Feather Bold** (a custom rounded sans) for chrome and **Mona Sans** (or Inter) for body. Display sizes are big and confident — Duolingo never whispers. Headings often carry the green underline-stroke or sit on a green pill, and the mascot Duo (a green owl) appears as an active illustration character, not a static logo.
+
+Shape language is friendly: 16–20px radii on cards, 12px on buttons, 9999px on chips and progress bars. Iconography is filled, rounded, and color-coded by skill — every lesson surface has an instantly identifiable color pairing.
+
+**Key Characteristics:**
+- Owl green (`#58cc02`) as the dominant brand color, used in 30%+ of the surface
+- Chunky 4px bottom-shadow on every button (the "tactile press" affordance)
+- 2–3px solid borders, never hairlines
+- Feather Bold (rounded display) + Mona Sans (body)
+- Big confident type — display sizes start at 48px and climb
+- Mascot-as-character: Duo the owl appears in onboarding, errors, streaks
+- Streak orange (`#ff9600`) and gem pink (`#ce82ff`) as secondary brand colors
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Owl Green** (`#58cc02`): Brand primary, primary CTA, correct answer.
+- **Owl Green Deep** (`#58a700`): Pressed/shadow color for green buttons.
+- **Owl Green Light** (`#89e219`): Hover, soft fills.
+- **Owl Green Pale** (`#dbf8c5`): Soft surface, success banner.
+
+### Secondary Accents
+- **Streak Orange** (`#ff9600`): Streak counter, fire icon, premium energy.
+- **Streak Orange Deep** (`#cc7a00`): Pressed orange.
+- **Gem Pink** (`#ce82ff`): Gem currency, Super Duolingo.
+- **Eel Blue** (`#1cb0f6`): Hint button, info link.
+- **Cardinal Red** (`#ff4b4b`): Wrong answer, life lost.
+- **Bee Yellow** (`#ffc800`): Pro badge, achievement.
+
+### Surface
+- **Snow** (`#ffffff`): Primary background.
+- **Eel** (`#f7f7f7`): Section break, secondary surface.
+- **Swan** (`#e5e5e5`): Disabled background, inset block.
+- **Wolf** (`#777777`): Dark divider, secondary text.
+
+### Ink & Text
+- **Eel Black** (`#3c3c3c`): Primary text.
+- **Wolf** (`#777777`): Secondary text, captions.
+- **Hare** (`#afafaf`): Disabled, placeholder.
+
+### Border
+- **Swan** (`#e5e5e5`): Standard 2px border.
+- **Hare** (`#afafaf`): Emphasized border on hover.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / UI / Headings**: `Feather Bold`, with fallback: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
+- **Body / Long-form**: `Mona Sans`, with fallback: `'Helvetica Neue', system-ui, sans-serif`
+- **Code (rare, schools/admin)**: `JetBrains Mono`, with fallback: `ui-monospace, Menlo, monospace`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Onboarding hero |
+| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Page title |
+| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Section heading |
+| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Card title, lesson row |
+| Body Large | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Lesson prompt, instruction |
+| Body | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Standard prose |
+| Caption | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | XP counter, metadata |
+| Button | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Standard button label |
+| Streak | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Streak number, on flame |
+
+### Principles
+- **800 is default**: Feather Bold runs at 800 across headings and buttons. 700 feels weak in this system.
+- **Big type**: heading sizes are 25–40% larger than typical product brands — confidence as identity.
+- **Rounded letterforms**: every glyph has soft terminals; sharp serifs would break the friendliness contract.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Owl Green)**
+- Background: `#58cc02`
+- Text: `#ffffff`
+- Padding: 14px 24px
+- Radius: 16px
+- Border-bottom: 4px solid `#58a700` (the chunky shadow)
+- Hover: background `#89e219`
+- Active: translate-y 4px, border-bottom 0 (button "presses")
+- Use: "Continue", "Check", main CTA.
+
+**Secondary (White with Bottom-Shadow)**
+- Background: `#ffffff`
+- Text: `#777777`
+- Border: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- Radius: 16px
+- Padding: 14px 24px
+- Hover: text `#3c3c3c`, border `#afafaf`
+
+**Streak Orange**
+- Background: `#ff9600`
+- Text: `#ffffff`
+- Border-bottom: 4px solid `#cc7a00`
+- Use: streak goal, "Start streak"
+
+**Error (Cardinal Red)**
+- Background: `#ff4b4b`
+- Text: `#ffffff`
+- Border-bottom: 4px solid `#cc3b3b`
+- Use: wrong answer feedback.
+
+### Cards / Lesson Tiles
+- Background: `#ffffff`
+- Border: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- Radius: 16px
+- Padding: 16px
+- Hover: lift 2px, shadow `0 4px 0 #d7d7d7`
+
+### Skill Tree Node (Lesson Bubble)
+- Size: 80×72px
+- Background: skill-color tinted (green for active, gray for locked)
+- Border-bottom: 6px solid darker variant
+- Radius: 50% (circular)
+- Active: pulses 1.0 → 1.05 every 1.6s
+
+### Inputs
+- Background: `#ffffff`
+- Border: 2px solid `#e5e5e5`
+- Radius: 12px
+- Padding: 12px 16px
+- Focus: border `#1cb0f6` (eel blue), ring `0 0 0 3px rgba(28, 176, 246, 0.2)`
+
+### Progress Bar
+- Track: `#e5e5e5`
+- Fill: `#58cc02` (or `#ff9600` for streak)
+- Radius: 9999px
+- Height: 16px
+- Animated fill: 320ms ease-out on increment.
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
+- **Container**: max 1080px, 24px gutter.
+- **Lesson tree column**: 320px wide; centered on desktop.
+
+## 6. Motion
+
+- **Duration**: 180ms for button press; 320ms for skill-node unlock; 1.6s for active-node pulse.
+- **Easing**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, slight overshoot) for unlocks.
+- **Mascot**: Duo blinks every 4–6s, jumps on streak milestones (480ms ease-out spring).

vibn-frontend/lib/scaffold/open-design/design-systems/editorial/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Editorial
+
+> Category: Creative & Artistic
+> Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
+
+## 1. Visual Theme & Atmosphere
+
+Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
+
+- **Visual style:** modern, editorial
+- **Color stance:** primary, secondary, neutral, success
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#111111` — Token from style foundations.
+- **Secondary:** `#F1F1F1` — 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 (#111111) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Gelasio, display=Gelasio, mono=Ubuntu 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:** 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 `#111111`; 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 (#111111) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/elegant/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Elegant
+
+> Category: Professional & Corporate
+> Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
+
+## 1. Visual Theme & Atmosphere
+
+Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
+
+- **Visual style:** minimal, clean
+- **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:** 14/16/18/24/32/40
+- **Families:** primary=Google Sans, display=Google Sans, mono=Anonymous Pro
+- **Weights:** 100, 200, 300, 400, 500, 600
+- 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.

vibn-frontend/lib/scaffold/open-design/design-systems/elevenlabs/DESIGN.md

@@ -0,0 +1,268 @@
+# Design System Inspired by ElevenLabs
+
+> Category: AI & LLM
+> AI voice platform. Dark cinematic UI, audio-waveform aesthetics.
+
+## 1. Visual Theme & Atmosphere
+
+ElevenLabs' website is a study in restrained elegance — a near-white canvas (`#ffffff`, `#f5f5f5`) where typography and subtle shadows do all the heavy lifting. The design feels like a premium audio product brochure: clean, spacious, and confident enough to let the content speak (literally, given ElevenLabs makes voice AI). There's an almost Apple-like quality to the whitespace strategy, but warmer — the occasional warm stone tint (`#f5f2ef`, `#777169`) prevents the purity from feeling clinical.
+
+The typography system is built on a fascinating duality: Waldenburg at weight 300 (light) for display headings creates ethereal, whisper-thin titles that feel like sound waves rendered in type — delicate, precise, and surprisingly impactful at large sizes. This light-weight display approach is the design's signature — where most sites use bold headings to grab attention, ElevenLabs uses lightness to create intrigue. Inter handles all body and UI text with workmanlike reliability, using slight positive letter-spacing (0.14px–0.18px) that gives body text an airy, well-spaced quality. WaldenburgFH appears as a bold uppercase variant for specific button labels.
+
+What makes ElevenLabs distinctive is its multi-layered shadow system. Rather than simple box-shadows, elements use complex stacks: inset border-shadows (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`), outline shadows (`rgba(0,0,0,0.06) 0px 0px 0px 1px`), and soft elevation shadows (`rgba(0,0,0,0.04) 0px 4px 4px`) — all at remarkably low opacities. The result is a design where surfaces seem to barely exist, floating just above the page with the lightest possible touch. Pill-shaped buttons (9999px) with warm-tinted backgrounds (`rgba(245,242,239,0.8)`) and warm shadows (`rgba(78,50,23,0.04)`) add a tactile, physical quality.
+
+**Key Characteristics:**
+- Near-white canvas with warm undertones (`#f5f5f5`, `#f5f2ef`)
+- Waldenburg weight 300 (light) for display — ethereal, whisper-thin headings
+- Inter with positive letter-spacing (0.14–0.18px) for body — airy readability
+- Multi-layered shadow stacks at sub-0.1 opacity — surfaces barely exist
+- Pill buttons (9999px) with warm stone-tinted backgrounds
+- WaldenburgFH bold uppercase for specific CTA labels
+- Warm shadow tints: `rgba(78, 50, 23, 0.04)` — shadows have color, not just darkness
+- Geist Mono / ui-monospace for code snippets
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure White** (`#ffffff`): Primary background, card surfaces, button backgrounds
+- **Light Gray** (`#f5f5f5`): Secondary surface, subtle section differentiation
+- **Warm Stone** (`#f5f2ef`): Button background (at 80% opacity) — the warm signature
+- **Black** (`#000000`): Primary text, headings, dark buttons
+
+### Neutral Scale
+- **Dark Gray** (`#4e4e4e`): Secondary text, descriptions
+- **Warm Gray** (`#777169`): Tertiary text, muted links, decorative underlines
+- **Near White** (`#f6f6f6`): Alternate light surface
+
+### Interactive
+- **Grid Cyan** (`#7fffff`): `--grid-column-bg`, at 25% opacity — decorative grid overlay
+- **Ring Blue** (`rgb(147 197 253 / 0.5)`): `--tw-ring-color`, focus ring
+- **Border Light** (`#e5e5e5`): Explicit borders
+- **Border Subtle** (`rgba(0, 0, 0, 0.05)`): Ultra-subtle bottom borders
+
+### Shadows
+- **Inset Border** (`rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset`): Internal edge definition
+- **Inset Dark** (`rgba(0,0,0,0.1) 0px 0px 0px 0.5px inset`): Stronger inset variant
+- **Outline Ring** (`rgba(0,0,0,0.06) 0px 0px 0px 1px`): Shadow-as-border
+- **Soft Elevation** (`rgba(0,0,0,0.04) 0px 4px 4px`): Gentle lift
+- **Card Shadow** (`rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`): Button/card elevation
+- **Warm Shadow** (`rgba(78,50,23,0.04) 0px 6px 16px`): Warm-tinted button shadow
+- **Edge Shadow** (`rgba(0,0,0,0.08) 0px 0px 0px 0.5px`): Subtle edge definition
+- **Inset Ring** (`rgba(0,0,0,0.1) 0px 0px 0px 1px inset`): Strong inset border
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Waldenburg`, fallback: `Waldenburg Fallback`
+- **Display Bold**: `WaldenburgFH`, fallback: `WaldenburgFH Fallback`
+- **Body / UI**: `Inter`, fallback: `Inter Fallback`
+- **Monospace**: `Geist Mono` or `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Waldenburg | 48px (3.00rem) | 300 | 1.08 (tight) | -0.96px | Whisper-thin, ethereal |
+| Section Heading | Waldenburg | 36px (2.25rem) | 300 | 1.17 (tight) | normal | Light display |
+| Card Heading | Waldenburg | 32px (2.00rem) | 300 | 1.13 (tight) | normal | Light card titles |
+| Body Large | Inter | 20px (1.25rem) | 400 | 1.35 | normal | Introductions |
+| Body | Inter | 18px (1.13rem) | 400 | 1.44–1.60 | 0.18px | Standard reading text |
+| Body Standard | Inter | 16px (1.00rem) | 400 | 1.50 | 0.16px | UI text |
+| Body Medium | Inter | 16px (1.00rem) | 500 | 1.50 | 0.16px | Emphasized body |
+| Nav / UI | Inter | 15px (0.94rem) | 500 | 1.33–1.47 | 0.15px | Navigation links |
+| Button | Inter | 15px (0.94rem) | 500 | 1.47 | normal | Button labels |
+| Button Uppercase | WaldenburgFH | 14px (0.88rem) | 700 | 1.10 (tight) | 0.7px | `text-transform: uppercase` |
+| Caption | Inter | 14px (0.88rem) | 400–500 | 1.43–1.50 | 0.14px | Metadata |
+| Small | Inter | 13px (0.81rem) | 500 | 1.38 | normal | Tags, badges |
+| Code | Geist Mono | 13px (0.81rem) | 400 | 1.85 (relaxed) | normal | Code blocks |
+| Micro | Inter | 12px (0.75rem) | 500 | 1.33 | normal | Tiny labels |
+| Tiny | Inter | 10px (0.63rem) | 400 | 1.60 (relaxed) | normal | Fine print |
+
+### Principles
+- **Light as the hero weight**: Waldenburg at 300 is the defining typographic choice. Where other design systems use bold for impact, ElevenLabs uses lightness — thin strokes that feel like audio waveforms, creating intrigue through restraint.
+- **Positive letter-spacing on body**: Inter uses +0.14px to +0.18px tracking across body text, creating an airy, well-spaced reading rhythm that contrasts with the tight display tracking (-0.96px).
+- **WaldenburgFH for emphasis**: A bold (700) uppercase variant of Waldenburg appears only in specific CTA button labels with 0.7px letter-spacing — the one place where the type system gets loud.
+- **Monospace as ambient**: Geist Mono at relaxed line-height (1.85) for code blocks feels unhurried and readable.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Black Pill**
+- Background: `#000000`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 9999px (full pill)
+- Use: Primary CTA
+
+**White Pill (Shadow-bordered)**
+- Background: `#ffffff`
+- Text: `#000000`
+- Radius: 9999px
+- Shadow: `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px`
+- Use: Secondary CTA on white
+
+**Warm Stone Pill**
+- Background: `rgba(245, 242, 239, 0.8)` (warm translucent)
+- Text: `#000000`
+- Padding: 12px 20px 12px 14px (asymmetric)
+- Radius: 30px
+- Shadow: `rgba(78, 50, 23, 0.04) 0px 6px 16px` (warm-tinted)
+- Use: Featured CTA, hero action — the signature warm button
+
+**Uppercase Waldenburg Button**
+- Font: WaldenburgFH 14px weight 700
+- Text-transform: uppercase
+- Letter-spacing: 0.7px
+- Use: Specific bold CTA labels
+
+### Cards & Containers
+- Background: `#ffffff`
+- Border: `1px solid #e5e5e5` or shadow-as-border
+- Radius: 16px–24px
+- Shadow: multi-layer stack (inset + outline + elevation)
+- Content: product screenshots, code examples, audio waveform previews
+
+### Inputs & Forms
+- Textarea: padding 12px 20px, transparent text at default
+- Select: white background, standard styling
+- Radio: standard with tw-ring focus
+- Focus: `var(--tw-ring-offset-shadow)` ring system
+
+### Navigation
+- Clean white sticky header
+- Inter 15px weight 500 for nav links
+- Pill CTAs right-aligned (black primary, white secondary)
+- Mobile: hamburger collapse at 1024px
+
+### Image Treatment
+- Product screenshots and audio waveform visualizations
+- Warm gradient backgrounds in feature sections
+- 20px–24px radius on image containers
+- Full-width sections alternating white and light gray
+
+### Distinctive Components
+
+**Audio Waveform Sections**
+- Colorful gradient backgrounds showcasing voice AI capabilities
+- Warm amber, blue, and green gradients behind product demos
+- Screenshots of the ElevenLabs product interface
+
+**Warm Stone CTA Block**
+- `rgba(245,242,239,0.8)` background with warm shadow
+- Asymmetric padding (more right padding)
+- Creates a physical, tactile quality unique to ElevenLabs
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 3px, 4px, 8px, 9px, 10px, 11px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 40px
+
+### Grid & Container
+- Centered content with generous max-width
+- Single-column hero, expanding to feature grids
+- Full-width gradient sections for product showcases
+- White card grids on light gray backgrounds
+
+### Whitespace Philosophy
+- **Apple-like generosity**: Massive vertical spacing between sections creates a premium, unhurried pace. Each section is an exhibit.
+- **Warm emptiness**: The whitespace isn't cold — the warm stone undertones and warm shadows give empty space a tactile, physical quality.
+- **Typography-led rhythm**: The light-weight Waldenburg headings create visual "whispers" that draw the eye through vast white space.
+
+### Border Radius Scale
+- Minimal (2px): Small links, inline elements
+- Subtle (4px): Nav items, tab panels, tags
+- Standard (8px): Small containers
+- Comfortable (10px–12px): Medium cards, dropdowns
+- Card (16px): Standard cards, articles
+- Large (18px–20px): Featured cards, code panels
+- Section (24px): Large panels, section containers
+- Warm Button (30px): Warm stone CTA
+- Pill (9999px): Primary buttons, navigation pills
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, text blocks |
+| Inset Edge (Level 0.5) | `rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, #fff 0px 0px 0px 0px inset` | Internal border definition |
+| Outline Ring (Level 1) | `rgba(0,0,0,0.06) 0px 0px 0px 1px` + `rgba(0,0,0,0.04) 0px 1px 2px` + `rgba(0,0,0,0.04) 0px 2px 4px` | Shadow-as-border for cards |
+| Card (Level 2) | `rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px` | Button elevation, prominent cards |
+| Warm Lift (Level 3) | `rgba(78,50,23,0.04) 0px 6px 16px` | Featured CTAs — warm-tinted |
+| Focus (Accessibility) | `var(--tw-ring-offset-shadow)` blue ring | Keyboard focus |
+
+**Shadow Philosophy**: ElevenLabs uses the most refined shadow system of any design system analyzed. Every shadow is at sub-0.1 opacity, many include both outward cast AND inward inset components, and the warm CTA shadows use an actual warm color (`rgba(78,50,23,...)`) rather than neutral black. The inset half-pixel borders (`0px 0px 0px 0.5px inset`) create edges so subtle they're felt rather than seen — surfaces define themselves through the lightest possible touch.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Waldenburg weight 300 for all display headings — the lightness IS the brand
+- Apply multi-layer shadows (inset + outline + elevation) at sub-0.1 opacity
+- Use warm stone tints (`#f5f2ef`, `rgba(245,242,239,0.8)`) for featured elements
+- Apply positive letter-spacing (+0.14px to +0.18px) on Inter body text
+- Use 9999px radius for primary buttons — pill shape is standard
+- Use warm-tinted shadows (`rgba(78,50,23,0.04)`) on featured CTAs
+- Keep the page predominantly white with subtle gray section differentiation
+- Use WaldenburgFH bold uppercase ONLY for specific CTA button labels
+
+### Don't
+- Don't use bold (700) Waldenburg for headings — weight 300 is non-negotiable
+- Don't use heavy shadows (>0.1 opacity) — the ethereal quality requires whisper-level depth
+- Don't use cool gray borders — the system is warm-tinted throughout
+- Don't skip the inset shadow component — half-pixel inset borders define edges
+- Don't apply negative letter-spacing to body text — Inter uses positive tracking
+- Don't use sharp corners (<8px) on cards — the generous radius is structural
+- Don't introduce brand colors — the palette is intentionally achromatic with warm undertones
+- Don't make buttons opaque and heavy — the warm translucent stone treatment is the signature
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <1024px | Single column, hamburger nav, stacked sections |
+| Desktop | >1024px | Full layout, horizontal nav, multi-column grids |
+
+### Touch Targets
+- Pill buttons with generous padding (12px–20px)
+- Navigation links at 15px with adequate spacing
+- Select dropdowns maintain comfortable sizing
+
+### Collapsing Strategy
+- Navigation: horizontal → hamburger at 1024px
+- Feature grids: multi-column → stacked
+- Hero: maintains centered layout, font scales proportionally
+- Gradient sections: full-width maintained, content stacks
+- Spacing compresses proportionally
+
+### Image Behavior
+- Product screenshots scale responsively
+- Gradient backgrounds simplify on mobile
+- Audio waveform previews maintain aspect ratio
+- Rounded corners maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Pure White (`#ffffff`) or Light Gray (`#f5f5f5`)
+- Text: Black (`#000000`)
+- Secondary text: Dark Gray (`#4e4e4e`)
+- Muted text: Warm Gray (`#777169`)
+- Warm surface: Warm Stone (`rgba(245, 242, 239, 0.8)`)
+- Border: `#e5e5e5` or `rgba(0,0,0,0.05)`
+
+### Example Component Prompts
+- "Create a hero on white background. Headline at 48px Waldenburg weight 300, line-height 1.08, letter-spacing -0.96px, black text. Subtitle at 18px Inter weight 400, line-height 1.60, letter-spacing 0.18px, #4e4e4e text. Two pill buttons: black (9999px, 0px 14px padding) and warm stone (rgba(245,242,239,0.8), 30px radius, 12px 20px padding, warm shadow rgba(78,50,23,0.04) 0px 6px 16px)."
+- "Design a card: white background, 20px radius. Shadow: rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 1px 2px, rgba(0,0,0,0.04) 0px 2px 4px. Title at 32px Waldenburg weight 300, body at 16px Inter weight 400 letter-spacing 0.16px, #4e4e4e."
+- "Build a white pill button: white bg, 9999px radius. Shadow: rgba(0,0,0,0.4) 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px. Text at 15px Inter weight 500."
+- "Create an uppercase CTA label: 14px WaldenburgFH weight 700, text-transform uppercase, letter-spacing 0.7px."
+- "Design navigation: white sticky header. Inter 15px weight 500. Black pill CTA right-aligned. Border-bottom: rgba(0,0,0,0.05)."
+
+### Iteration Guide
+1. Start with white — the warm undertone comes from shadows and stone surfaces, not backgrounds
+2. Waldenburg 300 for headings — never bold, the lightness is the identity
+3. Multi-layer shadows: always include inset + outline + elevation at sub-0.1 opacity
+4. Positive letter-spacing on Inter body (+0.14px to +0.18px) — the airy reading quality
+5. Warm stone CTA is the signature — `rgba(245,242,239,0.8)` with `rgba(78,50,23,0.04)` shadow
+6. Pill (9999px) for buttons, generous radius (16px–24px) for cards

vibn-frontend/lib/scaffold/open-design/design-systems/energetic/DESIGN.md

@@ -0,0 +1,72 @@
+# Design System Inspired by Energetic
+
+> Category: Bold & Expressive
+> Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.
+
+## 1. Visual Theme & Atmosphere
+
+Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.
+
+- **Visual style:** bold, geometric, vibrant, thick-bordered
+- **Color stance:** primary, secondary, neutral
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#EA580B` — Token from style foundations.
+- **Secondary:** `#F59E0B` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Background:** `#FFEDD5` — Token from style foundations.
+- **Surface:** `#FDBA74` — Token from style foundations.
+- **Text:** `#EA580C` — Token from style foundations.
+- **Neutral:** `#FDBA74` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#EA580B) for CTA emphasis.
+- Use Surface (#FDBA74) for large backgrounds and cards.
+- Keep body copy on Text (#EA580C) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32/48
+- **Families:** primary=Limelight, display=Limelight, 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/48/64
+- 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 `#EA580B`; 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 (#EA580B) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/enterprise/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Enterprise
+
+> Category: Professional & Corporate
+> Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.
+
+## 1. Visual Theme & Atmosphere
+
+Clean, high-contrast enterprise design for data-driven workflows with intuitive drag-and-drop patterns and structured layouts.
+
+- **Visual style:** clean, high-contrast, enterprise
+- **Color stance:** primary, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#072C2C` — Token from style foundations.
+- **Secondary:** `#FF5F03` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#EDEADE` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#EDEADE` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#072C2C) for CTA emphasis.
+- Use Surface (#EDEADE) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** desktop-first expressive scale
+- **Families:** primary=Ubuntu, display=Oswald, mono=Ubuntu 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:** comfortable density mode
+- 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 `#072C2C`; 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 (#072C2C) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/expo/DESIGN.md

@@ -0,0 +1,284 @@
+# Design System Inspired by Expo
+
+> Category: Developer Tools
+> React Native platform. Dark theme, tight letter-spacing, code-centric.
+
+## 1. Visual Theme & Atmosphere
+
+Expo's interface is a luminous, confidence-radiating developer platform built on the premise that tools for building apps should feel as polished as the apps themselves. The entire experience lives on a bright, airy canvas — a cool-tinted off-white (`#f0f0f3`) that gives the page a subtle technological coolness without the starkness of pure white. This is a site that breathes: enormous vertical spacing between sections creates a gallery-like pace where each feature gets its own "room."
+
+The design language is decisively monochromatic — pure black (`#000000`) headlines against the lightest possible backgrounds, with a spectrum of cool blue-grays (`#60646c`, `#b0b4ba`, `#555860`) handling all secondary communication. Color is almost entirely absent from the interface itself; when it appears, it's reserved for product screenshots, app icons, and the React universe illustration — making the actual content burst with life against the neutral canvas.
+
+What makes Expo distinctive is its pill-shaped geometry. Buttons, tabs, video containers, and even images use generously rounded or fully pill-shaped corners (24px–9999px), creating an organic, approachable feel that contradicts the typical sharp-edged developer tool aesthetic. Combined with tight letter-spacing on massive headlines (-1.6px to -3px at 64px), the result is a design that's simultaneously premium and friendly — like an Apple product page reimagined for developers.
+
+**Key Characteristics:**
+- Luminous cool-white canvas (`#f0f0f3`) with gallery-like vertical spacing
+- Strictly monochromatic: pure black headlines, cool blue-gray body text, no decorative color
+- Pill-shaped geometry everywhere — buttons, tabs, containers, images (24px–9999px radius)
+- Massive display headlines (64px) with extreme negative letter-spacing (-1.6px to -3px)
+- Inter as the sole typeface, used at weights 400–900 for full expressive range
+- Whisper-soft shadows that barely lift elements from the surface
+- Product screenshots as the only source of color in the interface
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Expo Black** (`#000000`): The absolute anchor — used for primary headlines, CTA buttons, and the brand identity. Pure black on cool white creates maximum contrast without feeling aggressive.
+- **Near Black** (`#1c2024`): The primary text color for body content — a barely perceptible blue-black that's softer than pure #000 for extended reading.
+
+### Secondary & Accent
+- **Link Cobalt** (`#0d74ce`): The standard link color — a trustworthy, saturated blue that signals interactivity without competing with the monochrome hierarchy.
+- **Legal Blue** (`#476cff`): A brighter, more saturated blue for legal/footer links — slightly more attention-grabbing than Link Cobalt.
+- **Widget Sky** (`#47c2ff`): A light, friendly cyan-blue for widget branding elements — the brightest accent in the system.
+- **Preview Purple** (`#8145b5`): A rich violet used for "preview" or beta feature indicators — creating clear visual distinction from standard content.
+
+### Surface & Background
+- **Cloud Gray** (`#f0f0f3`): The primary page background — a cool off-white with the faintest blue-violet tint. Not warm, not sterile — precisely technological.
+- **Pure White** (`#ffffff`): Card surfaces, button backgrounds, and elevated content containers. Creates a clear "lifted" distinction from Cloud Gray.
+- **Widget Dark** (`#1a1a1a`): Dark surface for dark-theme widgets and overlay elements.
+- **Banner Dark** (`#171717`): The darkest surface variant, used for promotional banners and high-contrast containers.
+
+### Neutrals & Text
+- **Slate Gray** (`#60646c`): The workhorse secondary text color (305 instances). A cool blue-gray that's authoritative without being heavy.
+- **Mid Slate** (`#555860`): Slightly darker than Slate, used for emphasized secondary text.
+- **Silver** (`#b0b4ba`): Tertiary text, placeholders, and de-emphasized metadata. Comfortably readable but clearly receded.
+- **Pewter** (`#999999`): Accordion icons and deeply de-emphasized UI elements in dark contexts.
+- **Light Silver** (`#cccccc`): Arrow icons and decorative elements in dark contexts.
+- **Dark Slate** (`#363a3f`): Borders on dark surfaces, switch tracks, and emphasized containment.
+- **Charcoal** (`#333333`): Dark mode switch backgrounds and deep secondary surfaces.
+
+### Semantic & Accent
+- **Warning Amber** (`#ab6400`): A warm, deep amber for warning states — deliberately not bright yellow, conveying seriousness.
+- **Destructive Rose** (`#eb8e90`): A soft pink-coral for disabled destructive actions — gentler than typical red, reducing alarm fatigue.
+- **Border Lavender** (`#e0e1e6`): Standard card/container borders — a cool lavender-gray that's visible without being heavy.
+- **Input Border** (`#d9d9e0`): Button and form element borders — slightly warmer/darker than card borders for interactive elements.
+- **Dark Focus Ring** (`#2547d0`): Deep blue for keyboard focus indicators in dark theme contexts.
+
+### Gradient System
+- The design is notably **gradient-free** in the interface layer. Visual richness comes from product screenshots, the React universe illustration, and careful shadow layering rather than color gradients. This absence IS the design decision — gradients would undermine the clinical precision.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter`, with fallbacks: `-apple-system, system-ui`
+- **Monospace**: `JetBrains Mono`, with fallback: `ui-monospace`
+- **System Fallback**: `system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | Inter | 64px (4rem) | 700–900 | 1.10 (tight) | -1.6px to -3px | Maximum impact, extreme tracking |
+| Section Heading | Inter | 48px (3rem) | 600 | 1.10 (tight) | -2px | Feature section anchors |
+| Sub-heading | Inter | 20px (1.25rem) | 600 | 1.20 (tight) | -0.25px | Card titles, feature names |
+| Body Large | Inter | 18px (1.13rem) | 400–500 | 1.40 | normal | Intro paragraphs, section descriptions |
+| Body / Button | Inter | 16px (1rem) | 400–700 | 1.25–1.40 | normal | Standard text, nav links, buttons |
+| Caption / Label | Inter | 14px (0.88rem) | 400–600 | 1.00–1.40 | normal | Descriptions, metadata, badge text |
+| Tag / Small | Inter | 12px (0.75rem) | 500 | 1.00–1.60 | normal | Smallest sans-serif text, badges |
+| Code Body | JetBrains Mono | 16px (1rem) | 400–600 | 1.40 | normal | Inline code, terminal commands |
+| Code Caption | JetBrains Mono | 14px (0.88rem) | 400–600 | 1.40 | normal | Code snippets, technical labels |
+| Code Small | JetBrains Mono | 12px (0.75rem) | 400 | 1.60 | normal | Uppercase tech tags |
+
+### Principles
+- **One typeface, full expression**: Inter is the only sans-serif, used from weight 400 (regular) through 900 (black). This gives the design a unified voice while still achieving dramatic contrast between whisper-light body text and thundering display headlines.
+- **Extreme negative tracking at scale**: Headlines at 64px use -1.6px to -3px letter-spacing, creating ultra-dense text blocks that feel like logotypes. This aggressive compression is the signature typographic move.
+- **Weight as hierarchy**: 700–900 for display, 600 for headings, 500 for emphasis, 400 for body. The jumps are decisive — no ambiguous in-between weights.
+- **Consistent 1.40 body line-height**: Nearly all body and UI text shares 1.40 line-height, creating a rhythmic vertical consistency.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (White on border)**
+- Background: Pure White (`#ffffff`)
+- Text: Near Black (`#1c2024`)
+- Padding: 0px 12px (compact, content-driven height)
+- Border: thin solid Input Border (`1px solid #d9d9e0`)
+- Radius: subtly rounded (6px)
+- Shadow: subtle combined shadow on hover
+- The understated default — clean, professional, unheroic
+
+**Primary Pill**
+- Same as Primary but with pill-shaped radius (9999px)
+- Used for hero CTAs and high-emphasis actions
+- The extra roundness signals "start here"
+
+**Dark Primary**
+- Background: Expo Black (`#000000`)
+- Text: Pure White (`#ffffff`)
+- Pill-shaped (9999px) or generously rounded (32–36px)
+- No border (black IS the border)
+- The maximum-emphasis CTA — reserved for primary conversion actions
+
+### Cards & Containers
+- Background: Pure White (`#ffffff`) — clearly lifted from Cloud Gray page
+- Border: thin solid Border Lavender (`1px solid #e0e1e6`) for standard cards
+- Radius: comfortably rounded (8px) for standard cards; generously rounded (16–24px) for featured containers
+- Shadow Level 1: Whisper (`rgba(0,0,0,0.08) 0px 3px 6px, rgba(0,0,0,0.07) 0px 2px 4px`) — barely perceptible lift
+- Shadow Level 2: Standard (`rgba(0,0,0,0.1) 0px 10px 20px, rgba(0,0,0,0.05) 0px 3px 6px`) — clear floating elevation
+- Hover: likely subtle shadow deepening or background shift
+
+### Inputs & Forms
+- Background: Pure White (`#ffffff`)
+- Text: Near Black (`#1c2024`)
+- Border: thin solid Input Border (`1px solid #d9d9e0`)
+- Padding: 0px 12px (inline with button sizing)
+- Radius: subtly rounded (6px)
+- Focus: blue ring shadow via CSS custom property
+
+### Navigation
+- Sticky top nav on transparent/blurred background
+- Logo: Expo wordmark in black
+- Links: Near Black (`#1c2024`) or Slate Gray (`#60646c`) at 14–16px Inter weight 500
+- CTA: Black pill button ("Sign Up") on the right
+- GitHub star badge as social proof
+- Status indicator ("All Systems Operational") with green dot
+
+### Image Treatment
+- Product screenshots and device mockups are the visual heroes
+- Generously rounded corners (24px) on video and image containers
+- Screenshots shown in realistic device frames
+- Dark UI screenshots provide contrast against the light canvas
+- Full-bleed within rounded containers
+
+### Distinctive Components
+
+**Universe React Logo**
+- Animated/illustrated React logo as the visual centerpiece
+- Connects Expo's identity to the React ecosystem
+- The only illustrative element on an otherwise photographic page
+
+**Device Preview Grid**
+- Multiple device types (phone, tablet, web) shown simultaneously
+- Demonstrates cross-platform capability visually
+- Each device uses realistic device chrome
+
+**Status Badge**
+- "All Systems Operational" pill in the nav
+- Green dot + text — compact trust signal
+- Pill-shaped (36px radius)
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px, 80px, 96px, 144px
+- Button padding: 0px 12px (unusually compact — height driven by line-height)
+- Card internal padding: approximately 24–32px
+- Section vertical spacing: enormous (estimated 96–144px between major sections)
+- Component gap: 16–24px between sibling elements
+
+### Grid & Container
+- Max container width: approximately 1200–1400px, centered
+- Hero: centered single-column with massive breathing room
+- Feature sections: alternating layouts (image left/right, full-width showcases)
+- Card grids: 2–3 column for feature highlights
+- Full-width sections with contained inner content
+
+### Whitespace Philosophy
+- **Gallery-like pacing**: Each section feels like its own exhibit, surrounded by vast empty space. This creates a premium, unhurried browsing experience.
+- **Breathing room is the design**: The generous whitespace IS the primary design element — it communicates confidence, quality, and that each feature deserves individual attention.
+- **Content islands**: Sections float as isolated "islands" in the white space, connected by scrolling rather than visual continuation.
+
+### Border Radius Scale
+- Nearly squared (4px): Small inline elements, tags
+- Subtly rounded (6px): Buttons, form inputs, combo boxes — the functional interactive radius
+- Comfortably rounded (8px): Standard content cards, containers
+- Generously rounded (16px): Feature tabs, content panels
+- Very rounded (24px): Buttons, video/image containers, tabpanels — the signature softness
+- Highly rounded (32–36px): Hero CTAs, status badges, nav buttons
+- Pill-shaped (9999px): Primary action buttons, tags, avatars — maximum friendliness
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Cloud Gray page background, inline text |
+| Surface (Level 1) | White bg, no shadow | Standard white cards on Cloud Gray |
+| Whisper (Level 2) | `rgba(0,0,0,0.08) 0px 3px 6px` + `rgba(0,0,0,0.07) 0px 2px 4px` | Subtle card lift, hover states |
+| Elevated (Level 3) | `rgba(0,0,0,0.1) 0px 10px 20px` + `rgba(0,0,0,0.05) 0px 3px 6px` | Feature showcases, product screenshots |
+| Modal (Level 4) | Dark overlay (`--dialog-overlay-background-color`) + heavy shadow | Dialogs, overlays |
+
+**Shadow Philosophy**: Expo uses shadows as gentle whispers rather than architectural statements. The primary depth mechanism is **background color contrast** — white cards floating on Cloud Gray — rather than shadow casting. When shadows appear, they're soft, diffused, and directional (downward), creating the feeling of paper hovering millimeters above a desk.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Cloud Gray (`#f0f0f3`) as the page background and Pure White (`#ffffff`) for elevated cards — the two-tone light system is essential
+- Keep display headlines at extreme negative letter-spacing (-1.6px to -3px at 64px) for the signature compressed look
+- Use pill-shaped (9999px) radius for primary CTA buttons — the organic shape is core to the identity
+- Reserve black (`#000000`) for headlines and primary CTAs — it carries maximum authority on the light canvas
+- Use Slate Gray (`#60646c`) for secondary text — it's the precise balance between readable and receded
+- Maintain enormous vertical spacing between sections (96px+) — the gallery pacing defines the premium feel
+- Use product screenshots as the primary visual content — the interface stays monochrome, the products bring color
+- Apply Inter at the full weight range (400–900) — weight contrast IS the hierarchy
+
+### Don't
+- Don't introduce decorative colors into the interface chrome — the monochromatic palette is intentional
+- Don't use sharp corners (border-radius < 6px) on interactive elements — the pill/rounded geometry is the signature
+- Don't reduce section spacing below 64px — the breathing room is the design
+- Don't use heavy drop shadows — depth comes from background contrast and whisper-soft shadows
+- Don't mix in additional typefaces — Inter handles everything from display to caption
+- Don't use letter-spacing wider than -0.25px on body text — extreme tracking is reserved for display only
+- Don't use borders heavier than 2px — containment is subtle, achieved through background color and gentle borders
+- Don't add gradients to the interface — visual richness comes from content, not decoration
+- Don't use saturated colors outside of semantic contexts — the palette is strictly grayscale + functional blue
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hamburger nav, stacked cards, hero text scales to ~36px |
+| Tablet | 640–1024px | 2-column grids, condensed nav, medium hero text |
+| Desktop | >1024px | Full multi-column layout, expanded nav, massive hero (64px) |
+
+*Only one explicit breakpoint detected (640px), suggesting a fluid, container-query or min()/clamp()-based responsive system rather than fixed breakpoint snapping.*
+
+### Touch Targets
+- Buttons use generous radius (24–36px) creating large, finger-friendly surfaces
+- Navigation links spaced with adequate gap
+- Status badge sized for touch (36px radius)
+- Minimum recommended: 44x44px
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav with CTA collapses to hamburger on mobile
+- **Feature sections**: Multi-column → stacked single column
+- **Hero text**: 64px → ~36px progressive scaling
+- **Device previews**: Grid → stacked/carousel
+- **Cards**: Side-by-side → vertical stacking
+- **Spacing**: Reduces proportionally but maintains generous rhythm
+
+### Image Behavior
+- Product screenshots scale proportionally
+- Device mockups may simplify or show fewer devices on mobile
+- Rounded corners maintained at all sizes
+- Lazy loading for below-fold content
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA / Headlines: "Expo Black (#000000)"
+- Page Background: "Cloud Gray (#f0f0f3)"
+- Card Surface: "Pure White (#ffffff)"
+- Body Text: "Near Black (#1c2024)"
+- Secondary Text: "Slate Gray (#60646c)"
+- Borders: "Border Lavender (#e0e1e6)"
+- Links: "Link Cobalt (#0d74ce)"
+- Tertiary Text: "Silver (#b0b4ba)"
+
+### Example Component Prompts
+- "Create a hero section on Cloud Gray (#f0f0f3) with a massive headline at 64px Inter weight 700, line-height 1.10, letter-spacing -3px. Text in Expo Black (#000000). Below, add a subtitle in Slate Gray (#60646c) at 18px. Place a black pill-shaped CTA button (9999px radius) beneath."
+- "Design a feature card on Pure White (#ffffff) with a 1px solid Border Lavender (#e0e1e6) border and comfortably rounded corners (8px). Title in Near Black (#1c2024) at 20px Inter weight 600, description in Slate Gray (#60646c) at 16px. Add a whisper shadow (rgba(0,0,0,0.08) 0px 3px 6px)."
+- "Build a navigation bar with Expo logo on the left, text links in Near Black (#1c2024) at 14px Inter weight 500, and a black pill CTA button on the right. Background: transparent with blur backdrop. Bottom border: 1px solid Border Lavender (#e0e1e6)."
+- "Create a code block using JetBrains Mono at 14px on a Pure White surface with Border Lavender border and 8px radius. Code in Near Black, keywords in Link Cobalt (#0d74ce)."
+- "Design a status badge pill (9999px radius) with a green dot and 'All Systems Operational' text in Inter 12px weight 500. Background: Pure White, border: 1px solid Input Border (#d9d9e0)."
+
+### Iteration Guide
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes — "use Slate Gray (#60646c)" not "make it gray"
+3. Use radius values deliberately — 6px for buttons, 8px for cards, 24px for images, 9999px for pills
+4. Describe the "feel" alongside measurements — "enormous breathing room with 96px section spacing"
+5. Always specify Inter and the exact weight — weight contrast IS the hierarchy
+6. For shadows, specify "whisper shadow" or "standard elevation" from the elevation table
+7. Keep the interface monochrome — let product content be the color

vibn-frontend/lib/scaffold/open-design/design-systems/expressive/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Expressive
+
+> Category: Bold & Expressive
+> Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
+
+## 1. Visual Theme & Atmosphere
+
+Vibrant, personality-driven design with bold colors, playful graphics, and dynamic layouts that balance creativity with structure.
+
+- **Visual style:** modern, 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:** `#DB2777` — Token from style foundations.
+- **Secondary:** `#2563EB` — 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 (#DB2777) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=IBM Plex Mono, display=IBM Plex Mono, 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 `#DB2777`; 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 (#DB2777) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/fantasy/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Fantasy
+
+> Category: Creative & Artistic
+> Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
+
+## 1. Visual Theme & Atmosphere
+
+Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
+
+- **Visual style:** bold, premium
+- **Color stance:** primary, secondary, success, warning, danger, info
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#0250CC` — Token from style foundations.
+- **Secondary:** `#FDC800` — 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 (#0250CC) 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=New Rocker, display=New Rocker, 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:** 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 `#0250CC`; 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 (#0250CC) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/ferrari/DESIGN.md

@@ -0,0 +1,317 @@
+# Design System Inspired by Ferrari
+
+> Category: Automotive
+> Luxury automotive. Chiaroscuro editorial, Ferrari Red accents, cinematic black.
+
+## 1. Visual Theme & Atmosphere
+
+Ferrari's website is a digital editorial — a curated magazine where the Prancing Horse brand is presented with the gravitas of an art institution and the precision of Italian coachwork. The page opens onto an expanse of absolute black, broken only by the iconic Prancing Horse emblem floating alone in its own atmosphere. Below, the content unfolds in dramatic alternations between inky-dark cinematic sections and crisp white editorial panels. This chiaroscuro rhythm — darkness yielding to light, machinery yielding to human story — feels more like paging through a Ferrari yearbook than scrolling a commercial website. Every section is a curated vignette: a concept car dissolving from shadow, two F1 drivers posed with sculptural stillness, a lineup of production models arranged in a jewel-toned parade.
+
+The color language is monastically restrained for a brand built on speed and emotion. Ferrari Red (`#DA291C`) appears with almost surgical sparseness — reserved for the Subscribe CTA and accent moments that need to command immediate attention. The vast majority of the interface lives in black, white, and a carefully calibrated gray scale (from `#303030` dark surfaces through `#8F8F8F` mid-tones to `#D2D2D2` light borders). Two yellows — Racing Yellow (`#FFF200`) and the deeper Modena Yellow (`#F6E500`) — exist in the token system as heritage accents for special contexts, honoring Ferrari's racing provenance. The restraint means that when red does appear, it carries the weight of the entire brand.
+
+Typography relies on FerrariSans — a proprietary sans-serif family with medium-weight headings (500–700) and compact proportions. Display text runs at 24–26px for section titles, while the UI chrome lives at 12–16px in weights ranging from regular to bold. A secondary "Body-Font" custom typeface handles captions and utility text, rendered in uppercase with wide letter-spacing (1px) to create a label-like editorial quality. This two-font system — FerrariSans for narrative authority, Body-Font for structural annotation — gives the site a print-magazine hierarchy. No text decoration is gratuitous. Letter-spacing is tight for headlines and deliberately expanded for labels, creating a visual rhythm that alternates between urgency and composure.
+
+**Key Characteristics:**
+- Chiaroscuro layout alternating between deep black sections and clean white editorial panels
+- Ferrari Red (`#DA291C`) used with extreme sparseness — accent, not atmosphere
+- Prancing Horse emblem as isolated hero element on a void-black field
+- FerrariSans proprietary typeface with compact proportions and medium weights
+- Photo-journalism imagery: concept renders, driver portraits, lineup parades — each section is a story
+- Uppercase Body-Font labels with wide letter-spacing (1px) for editorial annotation
+- Nearly zero border-radius (2px default) reflecting precision engineering aesthetics
+- Dual-framework architecture (PrimeReact + Element Plus) powering 32+ interactive components
+- Carousel-driven hero with editorial slides and arrow/dot navigation
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Ferrari Red** (`#DA291C`): The iconic Rosso Corsa — primary accent and CTA color. Used for the Subscribe button, key action triggers, and brand moments where maximum visual authority is needed. The single most important color in the system (--f-color-accent-100)
+- **Pure White** (`#FFFFFF`): Primary surface for editorial content panels, navigation text on dark backgrounds, and button fills. The canvas that provides breathing room between dark cinematic sections (--f-color-ui-0)
+
+### Secondary & Accent
+- **Dark Red** (`#B01E0A`): Deeper variant of Ferrari Red for hover/pressed states and high-contrast contexts — adds dimensionality to the brand color without introducing a new hue (--f-color-accent-90)
+- **Deep Red** (`#9D2211`): The most saturated dark red — used for active states and extra emphasis where even Dark Red needs more weight (--f-color-accent-80)
+- **Racing Yellow** (`#FFF200`): Heritage accent from Ferrari's racing livery — reserved for special highlights and motorsport-related contexts (--f-color-yellow-hypersail)
+- **Modena Yellow** (`#F6E500`): Slightly warmer and more golden than Racing Yellow — used for secondary heritage accents and category markers (--f-color-yellow)
+
+### Surface & Background
+- **Absolute Black** (`#000000`): Hero sections, cinematic backgrounds, and the dominant dark surface — the void that makes imagery and the Prancing Horse emblem float
+- **Dark Surface** (`#303030`): Secondary dark surface for footer regions, newsletter sections, and layered dark panels — slightly lifted from pure black for depth differentiation (--f-color-ui-90)
+- **Light Gray Surface** (`#D2D2D2`): Subtle alternate surface for dividers and border treatments on white panels (--f-color-ui-20)
+- **Overlay Dark** (`hsla(0, 0%, 7%, 0.8)`): Semi-transparent near-black for modal overlays and image caption backgrounds (--f-color-overlay-darker)
+
+### Neutrals & Text
+- **Near Black** (`#181818`): Primary body text color on light surfaces — slightly softened from absolute black for better readability (link default color)
+- **Dark Gray** (`#666666`): Secondary text and subdued UI labels — used where text needs to recede from the primary hierarchy (--f-color-black-60)
+- **Mid Gray** (`#8F8F8F`): Tertiary text for metadata, timestamps, and supportive content (--f-color-black-50)
+- **Silver Gray** (`#969696`): Placeholder text and disabled state indicators (--f-color-black-55)
+
+### Semantic & Accent
+- **Warning Red** (`#F13A2C`): Accessible warning state — brighter and more orange-shifted than Ferrari Red to differentiate semantic alerts from brand expression (--f-color-accessible-warning)
+- **Success Green** (`#03904A`): Confirmation and positive status indicators (--f-color-accessible-success)
+- **Info Blue** (`#4C98B9`): Informational callouts, tooltips, and neutral status messaging (--f-color-accessible-info)
+- **Link Hover Blue** (`#3860BE`): Interactive hover state for text links — a dignified navy-blue that signals interactivity without competing with Ferrari Red
+
+### Gradient System
+- No explicit gradients in the token system
+- Depth is achieved through photography and the binary contrast between black and white surfaces
+- The overlay darker color (`hsla(0, 0%, 7%, 0.8)`) creates depth through transparency layering over imagery
+- Occasional photographic gradients (light falloff in studio shots) provide atmospheric depth within image content
+
+## 3. Typography Rules
+
+### Font Family
+- **FerrariSans**: Primary typeface for headings, navigation, buttons, and editorial content. A proprietary sans-serif with medium weight as the default (500), compact x-height, and precise letter-spacing control. Fallbacks: Arial, Helvetica, sans-serif
+- **Body-Font**: Secondary typeface for captions, labels, and utility text. Frequently rendered in uppercase with expanded letter-spacing (1px) for an editorial label aesthetic. Used for category tags and small annotation text
+- **Arial / Helvetica**: System fallback fonts used in cookie consent modals, form elements, and third-party component frameworks
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Section Title | 26px (1.63rem) | 500 | 1.20 | normal | FerrariSans, primary editorial headings on white backgrounds |
+| Card Heading | 24px (1.50rem) | 400 | normal | normal | FerrariSans, content card titles |
+| Subheading | 18px (1.13rem) | 700 | 1.20 (tight) | normal | FerrariSans, bold subsection labels |
+| UI Heading | 16px (1.00rem) | 500 | 1.40 | 0.08px | FerrariSans, component headings and nav items |
+| Body Bold | 16px (1.00rem) | 700 | 1.30 (tight) | normal | FerrariSans, emphasized inline text |
+| Button Label | 16px (1.00rem) | 400 | normal | 1.28px | FerrariSans, primary button text with wide tracking |
+| Small Button | 14.4px (0.90rem) | 700 | 1.00 (tight) | normal | FerrariSans, compact action buttons |
+| Nav Link | 13px (0.81rem) | 600 | 1.20 (tight) | 0.13px | FerrariSans, navigation and footer links |
+| Caption | 13px (0.81rem) | 400 | 1.50 | 0.195px | FerrariSans/Body-Font, metadata and descriptions |
+| Micro Button | 12px (0.75rem) | 700 | 1.00 (tight) | 0.96px | FerrariSans, small CTA with wide tracking |
+| Label Upper | 12px (0.75rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase labels and category tags |
+| Micro Label | 11px (0.69rem) | 400 | 1.27 (tight) | 1px | Body-Font, uppercase smallest annotation text |
+| Cookie Text | 45px (2.81rem) | 400 | 1.50 | 0.195px | Arial, consent dialog oversized button text |
+
+### Principles
+- **Proprietary identity**: FerrariSans is exclusive to Ferrari — it cannot be substituted without losing brand recognition. The font's compact proportions and medium weight default (500) convey engineering precision
+- **Two-register system**: FerrariSans handles narrative voice (headings, content, buttons) while Body-Font handles structural annotation (labels, tags, micro-captions) — this mirrors print magazine conventions of editorial text vs. technical labels
+- **Uppercase as emphasis tool**: Body-Font captions use `text-transform: uppercase` with expanded letter-spacing (1px) to create a visually distinct label layer that reads as "informational overlay" rather than primary content
+- **Compact line-heights**: Headlines use tight line-heights (1.00–1.30) creating dense, impactful text blocks, while body text opens to 1.50 for comfortable reading — the contrast between compressed headers and relaxed body text creates visual tension
+- **Weight range 400–700**: Four weights active in the system (400, 500, 600, 700) — significantly more range than Tesla but still controlled. 500 is the default "voice," 700 is for emphasis, 400 for body, 600 for navigation
+
+## 4. Component Stylings
+
+### Buttons
+Ferrari's buttons are minimal white rectangles with near-zero radius — the CTA philosophy is "architecture, not decoration."
+
+**Primary CTA (White)** — The default action button:
+- Default: bg `#FFFFFF`, text `#000000`, fontSize 16px (FerrariSans), letterSpacing 1.28px, padding 12px 10px, borderRadius 2px, border 1px solid `#000000`
+- Hover: bg `#1EAEDB` (Teal), text `#FFFFFF`, opacity 0.9
+- Focus: bg `#1EAEDB`, text `#FFFFFF`, border 1px solid `#FFFFFF`, outline 2px solid `#000000`, opacity 0.9
+- Used for: "Configure" actions, secondary calls to action on light backgrounds
+
+**Subscribe CTA (Red)** — The high-emphasis action button:
+- Default: bg `#DA291C` (Ferrari Red), text `#FFFFFF`, borderRadius 2px, padding 12px 10px
+- Used for: Newsletter subscribe, primary conversion actions on dark backgrounds
+- The only button that uses Ferrari Red — reserved for maximum visual priority
+
+**Ghost Button (White Border)** — For dark backgrounds:
+- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, borderRadius 2px, padding 12px 10px
+- Hover: bg `#1EAEDB` (Teal), text `#FFFFFF`, opacity 0.9
+- Focus: same as Primary CTA focus state
+- Used for: Actions overlaid on dark imagery and cinematic sections
+
+**Text Link** — Inline navigation:
+- Default: text `#181818` (on light surfaces) or `#FFFFFF` (on dark), no border, no background
+- Hover: color shifts to `#3860BE` (Link Hover Blue), decoration removes underline
+- White variant on dark surfaces uses underline decoration by default
+- FerrariSans or Body-Font depending on context (Body-Font for uppercase label links)
+
+### Cards & Containers
+
+**Editorial Card** (Content sections):
+- Background: white
+- Border: none
+- Shadow: none
+- Layout: image above, heading + caption below
+- Image treatment: full-width within card, no rounded corners on image
+- Text: FerrariSans heading (16–24px) + Body-Font caption (12–13px uppercase)
+
+**Dark Cinematic Card** (Hero/feature sections):
+- Background: `#000000` (Absolute Black)
+- Full-bleed imagery with text overlay
+- No border, no shadow — the darkness IS the container
+- Text: white, positioned with careful negative space
+
+**Vehicle Lineup** (Model carousel):
+- Horizontal scrollable row of vehicle thumbnails
+- Each vehicle on a neutral/white background
+- Navigation: arrow buttons + dot indicators
+- Background shifts to showcase the selected model's color context
+
+### Inputs & Forms
+
+**Newsletter Input** (Footer section):
+- Background: transparent on dark surface
+- Text: white
+- Border: 1px solid `#CCCCCC`
+- Placeholder: `#969696` (Silver Gray)
+- Focus: border color transitions (standard browser focus ring)
+- Label: Body-Font uppercase, 12px, 1px letter-spacing
+
+**Cookie Consent** (Modal):
+- Background: white
+- Border radius: 8px (dialog)
+- Shadow: `rgb(153, 153, 153) 1px 1px 1px 0px`
+- Buttons: oversized (45px Arial), white bg with black border
+- Uses standard PrimeReact/Element Plus modal framework
+
+### Navigation
+- **Desktop**: Prancing Horse logo centered at top of page, primary navigation below — not a traditional horizontal nav bar but a full-width header block on black background
+- **Logo**: Centered Prancing Horse emblem (44×42px) on absolute black — the single most prominent UI element
+- **Links**: FerrariSans, 13px, weight 600, white text on dark backgrounds
+- **Mobile**: Hamburger collapse to vertical navigation drawer
+- **Footer**: Multi-column layout on `#303030` (Dark Surface) with category links in Body-Font uppercase
+- **No sticky nav behavior** observed — the page scrolls naturally with the header moving off-screen
+
+### Image Treatment
+- **Hero**: Full-width editorial photography on black backgrounds — concept cars in atmospheric studio lighting, editorial portraits with cinematic composition
+- **Aspect ratios**: Mixed — landscape (16:9) for hero sections, near-square for portrait/driver imagery, wide panoramic for vehicle lineups
+- **Full-bleed vs padded**: Hero images are full-bleed edge-to-edge; editorial content images are padded within white containers
+- **Lazy loading**: Below-fold sections use progressive loading (PrimeReact framework handles this)
+- **Image quality**: High-resolution photography with studio lighting — no user-generated or lifestyle imagery. Every image is art-directed
+
+### Carousel Component
+- Editorial carousel with multiple slides
+- Dot indicators for slide position
+- Arrow navigation (left/right) at slide edges
+- Auto-advancing with manual override
+- Content: mixed editorial — event recaps, model launches, racing highlights
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px (detected system base)
+- **Scale**: 1px, 2px, 4px, 5px, 6px, 9px, 10px, 11.2px, 12px, 13px, 15px, 16px, 19px, 20px, 25px
+- **Button padding**: 12px vertical, 10px horizontal — compact and precise
+- **Section padding**: Generous vertical spacing (40–80px estimated) between major content blocks
+- **Card gaps**: 16–20px between grid items
+- **Footer padding**: 25px horizontal sections within the dark footer block
+
+### Grid & Container
+- **Max width**: 1920px (largest breakpoint) with content constraining at narrower widths
+- **Hero**: Full-bleed on black, content centered
+- **Editorial sections**: 2-column layouts with image + text, alternating sides
+- **Vehicle lineup**: Horizontal scroll/carousel, 5–6 models visible at desktop width
+- **Footer**: 4-column grid for link categories
+
+### Whitespace Philosophy
+Ferrari treats white space as a gallery wall. Each section — whether a concept car render on black void or a pair of F1 drivers on neutral gray — is given its own "room" of breathing space. The alternating black/white sections create a pacing rhythm: dark = immersive moment, white = editorial content, dark = immersive moment. This cadence makes scrolling feel like turning pages in a luxury publication. White space between editorial cards is moderate (not Tesla-extreme) because Ferrari is telling stories, not exhibiting single objects.
+
+### Border Radius Scale
+| Value | Context |
+|-------|---------|
+| 1px | Subtle softening on small inline elements (spans) |
+| 2px | Default for buttons, inputs, and interactive elements — barely perceptible, razor-precision |
+| 8px | Modal dialogs and overlay containers — the "softest" structural radius |
+| 50% | Circular elements: carousel dots, avatar thumbnails, slider handles |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, no border | Default state for all content sections and cards |
+| Level 1 (Subtle) | `rgb(153, 153, 153) 1px 1px 1px 0px` | Rare — cookie consent dialogs and dropdown menus |
+| Level 2 (Overlay) | `hsla(0, 0%, 7%, 0.8)` backdrop | Modal overlays and image caption backgrounds |
+| Level 3 (Border) | `1px solid #CCCCCC` | Input fields, form containers — depth through delineation not shadow |
+
+### Shadow Philosophy
+Ferrari's approach to elevation is nearly as flat as Tesla's, but with a different rationale. Where Tesla avoids shadows for minimalism, Ferrari avoids them because the editorial photography provides all the visual depth needed. The single shadow token (`rgb(153, 153, 153) 1px 1px 1px 0px`) is extremely subtle — a 1-pixel whisper used only in utilitarian contexts like consent dialogs. The site communicates hierarchy through three strategies:
+1. **Surface color contrast**: Black sections vs. white sections create unmistakable layering
+2. **Overlay transparency**: The `--f-color-overlay-darker` at 80% opacity creates depth without shadow
+3. **Photographic depth**: Studio-lit car imagery with reflections, ground shadows, and atmospheric haze provides all the visual dimensionality
+
+### Decorative Depth
+- No UI gradients, no glows, no blur effects on interface elements
+- The Prancing Horse logo on black creates a "floating in void" effect through pure contrast — no glow or shadow needed
+- Dark-to-light section transitions are hard cuts, not gradient blends — reinforcing the editorial page-turn metaphor
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Ferrari Red (`#DA291C`) sparingly — only for primary CTAs and brand-critical moments. Its power comes from restraint
+- Alternate between black cinematic sections and white editorial sections to create the signature chiaroscuro rhythm
+- Use FerrariSans at weight 500 as the default heading voice — it's the typographic equivalent of the engine note
+- Apply Body-Font in uppercase with 1px letter-spacing for all labels, category tags, and structural annotations
+- Keep border-radius at 2px for all interactive elements — razor precision, not rounded friendliness
+- Let photography carry the emotional weight — every image should be art-directed studio quality
+- Use the Prancing Horse emblem as a standalone hero element on black — never crowd it with adjacent content
+- Maintain the 12px/10px button padding ratio — compact, purposeful, no excess
+- Use `#181818` (Near Black) for body text instead of pure `#000000` — the subtle warmth improves readability
+- Reserve the yellow accents (`#FFF200`, `#F6E500`) strictly for motorsport and racing heritage contexts
+
+### Don't
+- Scatter Ferrari Red across the interface as decoration — it's a CTA signal, not a theme color
+- Use rounded-pill buttons or large border-radii — the 2px precision is non-negotiable
+- Add box-shadows to cards or content containers — depth comes from surface color contrast and photography
+- Mix FerrariSans and Body-Font within the same text block — they serve separate hierarchical functions
+- Use colorful backgrounds (blue, green, etc.) for sections — the palette is exclusively black/white/gray with red and yellow accents
+- Apply text transforms to FerrariSans headings — uppercase is reserved for Body-Font labels only
+- Display low-quality or user-generated imagery — every photograph must meet editorial standards
+- Use the Link Hover Blue (`#3860BE`) for anything other than interactive hover states — it's not a brand color
+- Create busy layouts with multiple competing focal points — each section should have one clear story
+- Override the semantic color system (warning, success, info) with brand colors — `#F13A2C` warning is deliberately different from `#DA291C` brand red
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | ≤375px | Single-column, minimal padding (12px), stacked navigation, hero text scales to ~18px, full-width CTAs |
+| Mobile | 376–600px | Single-column, slightly larger padding (16px), hamburger nav, body text at 13px |
+| Tablet Small | 601–768px | 2-column editorial grid begins, hero images maintain full-width, footer switches to 2-column |
+| Tablet | 769–960px | Full 2-column layout, carousel shows 3 vehicles, padding increases to 20px |
+| Desktop | 961–1280px | Full navigation, 2-column editorial with larger imagery, vehicle lineup shows 5 models |
+| Large Desktop | 1281–1920px | Maximum content width, generous whitespace, hero photography at full cinematic scale |
+
+### Touch Targets
+- Primary CTA buttons: minimum 44px height with 12px vertical padding (meets WCAG AAA 44×44px target)
+- Navigation links: 13px text with 1.50 line-height and adequate spacing between items
+- Carousel arrows: 44px+ touch targets at viewport edges
+- Footer links: grouped with sufficient vertical spacing (16–20px) for touch accuracy
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav collapses to centered Prancing Horse logo + hamburger menu on mobile
+- **Editorial sections**: 2-column image+text layouts collapse to single-column with image stacking above text
+- **Vehicle lineup**: Horizontal carousel maintains scroll behavior but reduces visible models from 5 to 2–3
+- **Footer**: 4-column link grid collapses to 2-column on tablet, single-column accordion on mobile
+- **Hero carousel**: Full-width at all breakpoints, dot indicators and arrows scale proportionally
+- **Spacing reduction**: Section padding reduces from 40–80px (desktop) to 20–40px (mobile), maintaining proportional breathing room
+
+### Image Behavior
+- Hero images: full-bleed at all breakpoints, using `object-fit: cover` to maintain cinematic composition
+- Editorial images: responsive within their containers, maintaining aspect ratio
+- Vehicle lineup: thumbnail size scales but maintains consistent car-to-frame proportions
+- Art direction: mobile crops may tighten on vehicle subjects, reducing environmental context
+- Lazy loading: PrimeReact handles progressive image loading for below-fold content
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Ferrari Red (#DA291C)"
+- Background Light: "Pure White (#FFFFFF)"
+- Background Dark: "Absolute Black (#000000)"
+- Secondary Dark Surface: "Dark Surface (#303030)"
+- Heading text (light bg): "Near Black (#181818)"
+- Body text: "Dark Gray (#666666)"
+- Tertiary text: "Mid Gray (#8F8F8F)"
+- Border: "Border Gray (#CCCCCC)"
+- Button Hover: "Teal (#1EAEDB)"
+- Link Hover: "Link Blue (#3860BE)"
+
+### Example Component Prompts
+- "Create a hero section on Absolute Black (#000000) background with a centered logo emblem at the top, generous vertical spacing (80px+), and a single editorial headline in FerrariSans at 26px weight 500 in white, with a small Body-Font uppercase caption (12px, 1px letter-spacing) in Silver Gray (#969696) below"
+- "Design a Subscribe section on Dark Surface (#303030) with a left-aligned headline in white FerrariSans (24px/500), a subtitle in Mid Gray (#8F8F8F, 13px), an email input with transparent background and 1px #CCCCCC border, and a Ferrari Red (#DA291C) Subscribe button with white text, 2px border-radius, and 12px 10px padding"
+- "Build an editorial card on white background with a full-width image (16:9 ratio) above, a FerrariSans heading (16px/700, Near Black #181818) below, and a Body-Font uppercase label (11px, 1px letter-spacing, Mid Gray #8F8F8F) as the category tag — no border, no shadow, no border-radius"
+- "Create a vehicle lineup carousel showing 5 car thumbnails in a horizontal scroll on white background, with left/right arrow navigation, dot indicators below, and a FerrariSans model name (16px/500) beneath each vehicle"
+- "Design a dark cinematic section with full-bleed studio photography of a concept car on Absolute Black, a white FerrariSans headline (26px/500) positioned in the lower-left with generous padding (40px), and a Ghost Button (transparent bg, 1px white border, white text, 2px radius) as the CTA"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time — Ferrari's editorial rhythm means each section is a self-contained vignette
+2. Reference specific color names and hex codes from this document — the palette is small but each color has a precise role
+3. Use natural language descriptions, not CSS values — "razor-sharp 2px corners" conveys intent better than "border-radius: 2px"
+4. Describe the desired "feel" alongside specific measurements — "editorial magazine page-turn between sections" communicates the layout philosophy better than "margin-bottom: 80px"
+5. Always maintain the chiaroscuro contrast — if a section feels flat, check whether it needs to be on black or white to maintain the alternating rhythm
+6. Reserve Ferrari Red for ONE element per screen — if red appears in more than one place, it loses its authority

vibn-frontend/lib/scaffold/open-design/design-systems/figma/DESIGN.md

@@ -0,0 +1,223 @@
+# Design System Inspired by Figma
+
+> Category: Design & Creative
+> Collaborative design tool. Vibrant multi-color, playful yet professional.
+
+## 1. Visual Theme & Atmosphere
+
+Figma's interface is the design tool that designed itself — a masterclass in typographic sophistication where a custom variable font (figmaSans) modulates between razor-thin (weight 320) and bold (weight 700) with stops at unusual intermediates (330, 340, 450, 480, 540) that most type systems never explore. This granular weight control gives every text element a precisely calibrated visual weight, creating hierarchy through micro-differences rather than the blunt instrument of "regular vs bold."
+
+The page presents a fascinating duality: the interface chrome is strictly black-and-white (literally only `#000000` and `#ffffff` detected as colors), while the hero section and product showcases explode with vibrant multi-color gradients — electric greens, bright yellows, deep purples, hot pinks. This separation means the design system itself is colorless, treating the product's colorful output as the hero content. Figma's marketing page is essentially a white gallery wall displaying colorful art.
+
+What makes Figma distinctive beyond the variable font is its circle-and-pill geometry. Buttons use 50px radius (pill) or 50% (perfect circle for icon buttons), creating an organic, tool-palette-like feel. The dashed-outline focus indicator (`dashed 2px`) is a deliberate design choice that echoes selection handles in the Figma editor itself — the website's UI language references the product's UI language.
+
+**Key Characteristics:**
+- Custom variable font (figmaSans) with unusual weight stops: 320, 330, 340, 450, 480, 540, 700
+- Strictly black-and-white interface chrome — color exists only in product content
+- figmaMono for uppercase technical labels with wide letter-spacing
+- Pill (50px) and circular (50%) button geometry
+- Dashed focus outlines echoing Figma's editor selection handles
+- Vibrant multi-color hero gradients (green, yellow, purple, pink)
+- OpenType `"kern"` feature enabled globally
+- Negative letter-spacing throughout — even body text at -0.14px to -0.26px
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (`#000000`): All text, all solid buttons, all borders. The sole "color" of the interface.
+- **Pure White** (`#ffffff`): All backgrounds, white buttons, text on dark surfaces. The other half of the binary.
+
+*Note: Figma's marketing site uses ONLY these two colors for its interface layer. All vibrant colors appear exclusively in product screenshots, hero gradients, and embedded content.*
+
+### Surface & Background
+- **Pure White** (`#ffffff`): Primary page background and card surfaces.
+- **Glass Black** (`rgba(0, 0, 0, 0.08)`): Subtle dark overlay for secondary circular buttons and glass effects.
+- **Glass White** (`rgba(255, 255, 255, 0.16)`): Frosted glass overlay for buttons on dark/colored surfaces.
+
+### Gradient System
+- **Hero Gradient**: A vibrant multi-stop gradient using electric green, bright yellow, deep purple, and hot pink. This gradient is the visual signature of the hero section — it represents the creative possibilities of the tool.
+- **Product Section Gradients**: Individual product areas (Design, Dev Mode, Prototyping) may use distinct color themes in their showcases.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `figmaSans`, with fallbacks: `figmaSans Fallback, SF Pro Display, system-ui, helvetica`
+- **Monospace / Labels**: `figmaMono`, with fallbacks: `figmaMono Fallback, SF Mono, menlo`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (tight) | -1.72px | Maximum impact, extreme tracking |
+| Section Heading | figmaSans | 64px (4rem) | 400 | 1.10 (tight) | -0.96px | Feature section titles |
+| Sub-heading | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Emphasized section text |
+| Sub-heading Light | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Light-weight section text |
+| Feature Title | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Bold card headings |
+| Body Large | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px to -0.14px | Descriptions, intros |
+| Body / Button | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px to normal | Standard body, nav, buttons |
+| Body Light | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px to normal | Light-weight body text |
+| Mono Label | figmaMono | 18px (1.13rem) | 400 | 1.30 (tight) | 0.54px | Uppercase section labels |
+| Mono Small | figmaMono | 12px (0.75rem) | 400 | 1.00 (tight) | 0.6px | Uppercase tiny tags |
+
+### Principles
+- **Variable font precision**: figmaSans uses weights that most systems never touch — 320, 330, 340, 450, 480, 540. This creates hierarchy through subtle weight differences rather than dramatic jumps. The difference between 330 and 340 is nearly imperceptible but structurally significant.
+- **Light as the base**: Most body text uses 320–340 (lighter than typical 400 "regular"), creating an ethereal, airy reading experience that matches the design-tool aesthetic.
+- **Kern everywhere**: Every text element enables OpenType `"kern"` feature — kerning is not optional, it's structural.
+- **Negative tracking by default**: Even body text uses -0.1px to -0.26px letter-spacing, creating universally tight text. Display text compresses further to -0.96px and -1.72px.
+- **Mono for structure**: figmaMono in uppercase with positive letter-spacing (0.54px–0.6px) creates technical signpost labels.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Black Solid (Pill)**
+- Background: Pure Black (`#000000`)
+- Text: Pure White (`#ffffff`)
+- Radius: circle (50%) for icon buttons
+- Focus: dashed 2px outline
+- Maximum emphasis
+
+**White Pill**
+- Background: Pure White (`#ffffff`)
+- Text: Pure Black (`#000000`)
+- Padding: 8px 18px 10px (asymmetric vertical)
+- Radius: pill (50px)
+- Focus: dashed 2px outline
+- Standard CTA on dark/colored surfaces
+
+**Glass Dark**
+- Background: `rgba(0, 0, 0, 0.08)` (subtle dark overlay)
+- Text: Pure Black
+- Radius: circle (50%)
+- Focus: dashed 2px outline
+- Secondary action on light surfaces
+
+**Glass Light**
+- Background: `rgba(255, 255, 255, 0.16)` (frosted glass)
+- Text: Pure White
+- Radius: circle (50%)
+- Focus: dashed 2px outline
+- Secondary action on dark/colored surfaces
+
+### Cards & Containers
+- Background: Pure White
+- Border: none or minimal
+- Radius: 6px (small containers), 8px (images, cards, dialogs)
+- Shadow: subtle to medium elevation effects
+- Product screenshots as card content
+
+### Navigation
+- Clean horizontal nav on white
+- Logo: Figma wordmark in black
+- Product tabs: pill-shaped (50px) tab navigation
+- Links: black text, underline 1px decoration
+- CTA: Black pill button
+- Hover: text color via CSS variable
+
+### Distinctive Components
+
+**Product Tab Bar**
+- Horizontal pill-shaped tabs (50px radius)
+- Each tab represents a Figma product area (Design, Dev Mode, Prototyping, etc.)
+- Active tab highlighted
+
+**Hero Gradient Section**
+- Full-width vibrant multi-color gradient background
+- White text overlay with 86px display heading
+- Product screenshots floating within the gradient
+
+**Dashed Focus Indicators**
+- All interactive elements use `dashed 2px` outline on focus
+- References the selection handles in the Figma editor
+- A meta-design choice connecting website and product
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
+
+### Grid & Container
+- Max container width: up to 1920px
+- Hero: full-width gradient with centered content
+- Product sections: alternating showcases
+- Footer: dark full-width section
+- Responsive from 559px to 1920px
+
+### Whitespace Philosophy
+- **Gallery-like pacing**: Generous spacing lets each product section breathe as its own exhibit.
+- **Color sections as visual breathing**: The gradient hero and product showcases provide chromatic relief between the monochrome interface sections.
+
+### Border Radius Scale
+- Minimal (2px): Small link elements
+- Subtle (6px): Small containers, dividers
+- Comfortable (8px): Cards, images, dialogs
+- Pill (50px): Tab buttons, CTAs
+- Circle (50%): Icon buttons, circular elements
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, most text |
+| Surface (Level 1) | White card on gradient/dark section | Cards, product showcases |
+| Elevated (Level 2) | Subtle shadow | Floating cards, hover states |
+
+**Shadow Philosophy**: Figma uses shadows sparingly. The primary depth mechanisms are **background contrast** (white content on colorful/dark sections) and the inherent dimensionality of the product screenshots themselves.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use figmaSans with precise variable weights (320–540) — the granular weight control IS the design
+- Keep the interface strictly black-and-white — color comes from product content only
+- Use pill (50px) and circular (50%) geometry for all interactive elements
+- Apply dashed 2px focus outlines — the signature accessibility pattern
+- Enable `"kern"` feature on all text
+- Use figmaMono in uppercase with positive letter-spacing for labels
+- Apply negative letter-spacing throughout (-0.1px to -1.72px)
+
+### Don't
+- Don't add interface colors — the monochrome palette is absolute
+- Don't use standard font weights (400, 500, 600, 700) — use the variable font's unique stops (320, 330, 340, 450, 480, 540)
+- Don't use sharp corners on buttons — pill and circular geometry only
+- Don't use solid focus outlines — dashed is the signature
+- Don't increase body font weight above 450 — the light-weight aesthetic is core
+- Don't use positive letter-spacing on body text — it's always negative
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small Mobile | <560px | Compact layout, stacked |
+| Tablet | 560–768px | Minor adjustments |
+| Small Desktop | 768–960px | 2-column layouts |
+| Desktop | 960–1280px | Standard layout |
+| Large Desktop | 1280–1440px | Expanded |
+| Ultra-wide | 1440–1920px | Maximum width |
+
+### Collapsing Strategy
+- Hero text: 86px → 64px → 48px
+- Product tabs: horizontal scroll on mobile
+- Feature sections: stacked single column
+- Footer: multi-column → stacked
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Everything: "Pure Black (#000000)" and "Pure White (#ffffff)"
+- Glass Dark: "rgba(0, 0, 0, 0.08)"
+- Glass Light: "rgba(255, 255, 255, 0.16)"
+
+### Example Component Prompts
+- "Create a hero on a vibrant multi-color gradient (green, yellow, purple, pink). Headline at 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. White text. White pill CTA button (50px radius, 8px 18px padding)."
+- "Design a product tab bar with pill-shaped buttons (50px radius). Active: Black bg, white text. Inactive: transparent, black text. figmaSans at 20px weight 480."
+- "Build a section label: figmaMono 18px, uppercase, letter-spacing 0.54px, black text. Kern enabled."
+- "Create body text at 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Pure Black on white."
+
+### Iteration Guide
+1. Use variable font weight stops precisely: 320, 330, 340, 450, 480, 540, 700
+2. Interface is always black + white — never add colors to chrome
+3. Dashed focus outlines, not solid
+4. Letter-spacing is always negative on body, always positive on mono labels
+5. Pill (50px) for buttons/tabs, circle (50%) for icon buttons

vibn-frontend/lib/scaffold/open-design/design-systems/figma/components.html

@@ -0,0 +1,344 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Figma — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/figma. Every visible
+        value comes from tokens.css. Figma's signature moves: strictly
+        black-and-white interface, figmaSans variable weights (320–700),
+        pill (50px) and circular (50%) geometry, dashed focus outlines,
+        figmaMono uppercase labels with positive letter-spacing."
+    />
+
+    <style>
+      :root {
+        --bg:           #ffffff;
+        --surface:      #ffffff;
+        --surface-warm: var(--surface);
+
+        --fg:   #000000;
+        --fg-2: #000000;
+        --muted: rgba(0, 0, 0, 0.55);
+        --meta:  rgba(0, 0, 0, 0.40);
+
+        --border:      rgba(0, 0, 0, 0.12);
+        --border-soft: rgba(0, 0, 0, 0.06);
+
+        --accent:        #000000;
+        --accent-on:     #ffffff;
+        --accent-hover:  rgba(0, 0, 0, 0.85);
+        --accent-active: rgba(0, 0, 0, 0.08);
+
+        --success: #16a34a;
+        --warn:    #eab308;
+        --danger:  #dc2626;
+
+        --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+        --font-body:    "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+        --font-mono:    "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+
+        --text-xs:   12px;
+        --text-sm:   16px;
+        --text-base: 16px;
+        --text-lg:   20px;
+        --text-xl:   26px;
+        --text-2xl:  26px;
+        --text-3xl:  64px;
+        --text-4xl:  86px;
+
+        --leading-body:     1.40;
+        --leading-tight:    1.00;
+        --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: 96px;
+        --section-y-tablet:  64px;
+        --section-y-phone:   40px;
+
+        --radius-sm:   50px;
+        --radius-md:   8px;
+        --radius-lg:   8px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+        --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+
+        --motion-fast:   150ms;
+        --motion-base:   200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max:            1920px;
+        --container-gutter-desktop: 40px;
+        --container-gutter-tablet:  24px;
+        --container-gutter-phone:   16px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        /* OpenType kern on all text — structural, not decorative. */
+        font-feature-settings: "kern";
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @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); }
+      }
+
+      /* ─── Typography ─────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 400;              /* figmaSans light — base display weight */
+        margin: 0;
+        line-height: var(--leading-tight);
+        font-feature-settings: "kern";
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-3xl);
+        /* 64px section: line-height 1.10, tracking -0.96px (-0.015em). */
+        line-height: 1.10;
+        letter-spacing: -0.015em;
+      }
+      h3 {
+        font-size: var(--text-xl);
+        /* 26px sub-heading: line-height 1.35, tracking -0.26px (-0.01em).
+           Overrides the shared 1.00 set above. */
+        line-height: 1.35;
+        letter-spacing: -0.01em;
+        font-weight: 540;
+      }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        line-height: 1.40;
+        color: var(--muted);
+        font-weight: 330;
+        letter-spacing: -0.007em;
+      }
+      /* figmaMono uppercase label — section signpost. */
+      .mono-label {
+        font-family: var(--font-mono);
+        font-size: 18px;
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.54px;
+        color: var(--fg);
+        line-height: 1.30;
+      }
+      .body-muted { color: var(--muted); }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ─────────────────────────────── */
+      /* All buttons use pill (50px) or circle (50%) — non-negotiable. */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 10px 20px;
+        border-radius: var(--radius-sm);   /* 50px pill */
+        font-family: var(--font-display);
+        font-size: var(--text-base);
+        font-weight: 400;
+        font-feature-settings: "kern";
+        line-height: 1;
+        cursor: pointer;
+        border: none;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      /* Figma focus: dashed 2px outline — the editor selection handle echo. */
+      .btn:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
+      .btn-black {
+        background: var(--fg);
+        color: var(--accent-on);
+      }
+      .btn-black:hover { background: rgba(0, 0, 0, 0.85); }
+      .btn-white {
+        background: var(--bg);
+        color: var(--fg);
+        border: 1px solid rgba(0, 0, 0, 0.15);
+      }
+      .btn-white:hover { background: rgba(0, 0, 0, 0.04); }
+
+      /* ─── Product tab bar ─────────────────────── */
+      .tab-bar {
+        display: flex;
+        gap: var(--space-2);
+        flex-wrap: wrap;
+      }
+      .tab {
+        padding: 8px 18px;
+        border-radius: var(--radius-sm);  /* 50px pill */
+        font-size: var(--text-base);
+        font-weight: 480;
+        cursor: pointer;
+        border: none;
+        background: transparent;
+        color: var(--fg);
+        font-feature-settings: "kern";
+        transition: background-color var(--motion-fast) var(--ease-standard);
+      }
+      .tab:hover { background: rgba(0, 0, 0, 0.06); }
+      .tab.active { background: var(--fg); color: var(--accent-on); }
+      .tab:focus-visible { outline: 2px dashed var(--fg); outline-offset: 2px; }
+
+      /* ─── Cards ──────────────────────────────── */
+      .card {
+        background: var(--bg);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+        box-shadow: var(--elev-raised);
+      }
+
+      /* ─── Layout ─────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-12);
+        align-items: center;
+      }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-5);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- HERO -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="mono-label">Reference fixture · figma</p>
+            <h1>Nothing great is made alone.</h1>
+            <p class="lead" style="max-width:48ch">
+              Figma brings teams together to design, prototype, and build.
+              A strictly black-and-white interface where product content is the
+              hero. Every value below from tokens.css.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-black">
+                Get started for free
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                     stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="M5 12h14M13 6l6 6-6 6"/>
+                </svg>
+              </a>
+              <a href="./DESIGN.md" class="btn btn-white">Read the spec</a>
+            </div>
+          </div>
+
+          <aside>
+            <div class="card">
+              <p class="mono-label" style="margin-bottom:var(--space-4)">Product areas</p>
+              <div class="tab-bar">
+                <button class="tab active">Design</button>
+                <button class="tab">Dev Mode</button>
+                <button class="tab">Prototype</button>
+                <button class="tab">Slides</button>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features">
+        <p class="mono-label" style="margin-bottom:var(--space-6)">What this fixture exercises</p>
+
+        <div class="features-grid">
+          <article class="card stack-3">
+            <h3>Variable precision</h3>
+            <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
+              Weight stops 320, 330, 340, 450, 480, 540, 700 — the granular
+              control IS the design. Hierarchy through micro-differences.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3 style="font-weight:340">Monochrome chrome</h3>
+            <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
+              #000000 and #ffffff only. Color lives in product content —
+              gradients, screenshots, and embedded designs — never the shell.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Dashed focus</h3>
+            <p class="body-muted" style="font-size:var(--text-base);font-weight:330;letter-spacing:-0.007em">
+              2px dashed outline on all interactive elements — echoes selection
+              handles in the Figma editor. The website speaks the product's UI.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM / ACTIONS -->
+      <section data-od-id="actions">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="mono-label">Actions</p>
+            <h2 style="font-size:var(--text-xl);line-height:1.35;letter-spacing:-0.01em;font-weight:540">All buttons use pill (50px) radius.</h2>
+            <p class="lead" style="max-width:44ch">
+              No sharp corners on interactive elements. Black solid for primary;
+              bordered white for secondary. Focus is dashed, never solid.
+            </p>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:var(--space-4)">
+            <div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
+              <button class="btn btn-black">Primary action</button>
+              <button class="btn btn-white">Secondary</button>
+            </div>
+            <div style="display:flex;gap:var(--space-3);flex-wrap:wrap">
+              <button class="tab active">Active tab</button>
+              <button class="tab">Inactive tab</button>
+              <button class="tab">Another</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/figma/tokens.css

@@ -0,0 +1,126 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/figma/tokens.css
+ *
+ * Structured token bindings for the "Figma" brand — vibrant product
+ * content inside a strictly black-and-white interface shell.
+ *
+ * Brand identity in three sentences:
+ *   1. Monochrome interface absolutely — pure black (#000000) for all
+ *      text, borders, and solid buttons; pure white (#ffffff) for all
+ *      backgrounds; no mid-tones in the chrome layer whatsoever.
+ *   2. figmaSans variable font at unusual weight stops (320, 330, 340,
+ *      450, 480, 540, 700); figmaMono for uppercase section labels with
+ *      positive letter-spacing; OpenType "kern" on all text.
+ *   3. Pill (50px) and circular (50%) geometry on all interactive
+ *      elements; dashed 2px focus outlines echoing editor selection
+ *      handles; negative tracking even on body text (-0.14px).
+ *
+ * Schema decisions:
+ *   - --bg: #ffffff; --surface: #ffffff (gallery wall — no surface tint).
+ *   - --surface-warm aliases --surface (B&W system has no warm tier).
+ *   - --fg: #000000; --muted: rgba(0,0,0,0.55) for secondary text.
+ *   - --accent: #000000 (black IS the accent in a monochrome system).
+ *   - --accent-on: #ffffff; hover and active via glass tint overlays.
+ *   - --tracking-display: -0.02em (-1.72px / 86px normalized).
+ *   - --leading-tight: 1.00 (display hero line-height).
+ *   - --radius-sm: 50px (pill — all interactive elements); pill = pill.
+ *   - Focus: dashed 2px outline — encoded in components.html, not ring.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #ffffff;
+  --surface:      #ffffff;              /* gallery wall — no surface tint */
+  --surface-warm: var(--surface);       /* no warm tier in B&W system */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #000000;
+  --fg-2: #000000;                      /* B&W — no secondary ink tier */
+  --muted: rgba(0, 0, 0, 0.55);        /* secondary text on white */
+  --meta:  rgba(0, 0, 0, 0.40);        /* metadata, captions */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      rgba(0, 0, 0, 0.12);  /* minimal — only where structurally needed */
+  --border-soft: rgba(0, 0, 0, 0.06);
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  /* In a strictly B&W system, black IS the accent (solid CTA). */
+  --accent:        #000000;
+  --accent-on:     #ffffff;
+  --accent-hover:  rgba(0, 0, 0, 0.85);
+  --accent-active: rgba(0, 0, 0, 0.08); /* glass dark — secondary button bg */
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #16a34a;
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  --font-display: "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --font-body:    "figmaSans", "figmaSans Fallback", "SF Pro Display", system-ui, Helvetica, sans-serif;
+  --font-mono:    "figmaMono", "figmaMono Fallback", "SF Mono", Menlo, ui-monospace, monospace;
+
+  /* Type scale — DESIGN.md §Typography Hierarchy.
+   * Figma's display range 86px→12px. The schema spine: 86px hero,
+   * 64px section, 26px sub-heading, 20px body-large, 16px body. */
+  --text-xs:   12px;                   /* mono small — uppercase tiny labels */
+  --text-sm:   16px;                   /* body / button */
+  --text-base: 16px;                   /* body baseline */
+  --text-lg:   20px;                   /* body large — descriptions */
+  --text-xl:   26px;                   /* sub-heading */
+  --text-2xl:  26px;                   /* sub-heading (same tier, weight varies) */
+  --text-3xl:  64px;                   /* section heading */
+  --text-4xl:  86px;                   /* display / hero */
+
+  /* Leading + tracking.
+   * --leading-tight=1.00: 86px hero compression.
+   * --tracking-display: -0.02em = -1.72px / 86px normalized.
+   * Body text: -0.14px inline; mono labels: +0.54px inline. */
+  --leading-body:     1.40;
+  --leading-tight:    1.00;
+  --tracking-display: -0.02em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  --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 — gallery-like pacing between product sections. */
+  --section-y-desktop: 96px;
+  --section-y-tablet:  64px;
+  --section-y-phone:   40px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* Figma uses pill (50px) for all CTAs/tabs; 8px for card containers. */
+  --radius-sm:   50px;                 /* pill — all interactive elements */
+  --radius-md:   8px;                  /* cards, images, dialogs */
+  --radius-lg:   8px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* Depth via background contrast, not shadows. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.08);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  /* Figma's signature: dashed 2px outline encoded at component level.
+     --focus-ring is used as the fallback shadow for keyboard nav. */
+  --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.8);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast:   150ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1920px;
+  --container-gutter-desktop: 40px;
+  --container-gutter-tablet:  24px;
+  --container-gutter-phone:   16px;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/flat/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Flat
+
+> Category: Modern & Minimal
+> Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
+
+## 1. Visual Theme & Atmosphere
+
+Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.
+
+- **Visual style:** minimal, enterprise
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#F2673C` — 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 (#F2673C) 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 `#F2673C`; 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 (#F2673C) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/framer/DESIGN.md

@@ -0,0 +1,249 @@
+# Design System Inspired by Framer
+
+> Category: Design & Creative
+> Website builder. Bold black and blue, motion-first, design-forward.
+
+## 1. Visual Theme & Atmosphere
+
+Framer's website is a cinematic, tool-obsessed dark canvas that radiates the confidence of a design tool built by designers who worship craft. The entire experience is drenched in pure black — not a warm charcoal or a cozy dark gray, but an absolute void (`#000000`) that makes every element, every screenshot, every typographic flourish feel like it's floating in deep space. This is a website that treats its own product UI as the hero art, embedding full-fidelity screenshots and interactive demos directly into the narrative flow.
+
+The typography is the signature move: GT Walsheim with aggressively tight letter-spacing (as extreme as -5.5px on 110px display text) creates headlines that feel compressed, kinetic, almost spring-loaded — like words under pressure that might expand at any moment. The transition to Inter for body text is seamless, with extensive OpenType feature usage (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`) that gives even small text a refined, custom feel. Framer Blue (`#0099ff`) is deployed sparingly but decisively — as link color, border accents, and subtle ring shadows — creating a cold, electric throughline against the warm-less black.
+
+The overall effect is a nightclub for web designers: dark, precise, seductive, and unapologetically product-forward. Every section exists to showcase what the tool can do, with the website itself serving as proof of concept.
+
+**Key Characteristics:**
+- Pure black (`#000000`) void canvas — absolute dark, not warm or gray-tinted
+- GT Walsheim display font with extreme negative letter-spacing (-5.5px at 110px)
+- Framer Blue (`#0099ff`) as the sole accent color — cold, electric, precise
+- Pill-shaped buttons (40px–100px radius) — no sharp corners on interactive elements
+- Product screenshots as hero art — the tool IS the marketing
+- Frosted glass button variants using `rgba(255, 255, 255, 0.1)` on dark surfaces
+- Extensive OpenType feature usage across Inter for refined micro-typography
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Pure Black** (`#000000`): Primary background, the void canvas that defines Framer's dark-first identity
+- **Pure White** (`#ffffff`): Primary text color on dark surfaces, button text on accent backgrounds
+- **Framer Blue** (`#0099ff`): Primary accent color — links, borders, ring shadows, interactive highlights
+
+### Secondary & Accent
+- **Muted Silver** (`#a6a6a6`): Secondary text, subdued labels, dimmed descriptions on dark surfaces
+- **Near Black** (`#090909`): Elevated dark surface, shadow ring color for subtle depth separation
+
+### Surface & Background
+- **Void Black** (`#000000`): Page background, primary canvas
+- **Frosted White** (`rgba(255, 255, 255, 0.1)`): Translucent button backgrounds, glass-effect surfaces on dark
+- **Subtle White** (`rgba(255, 255, 255, 0.5)`): Slightly more opaque frosted elements for hover states
+
+### Neutrals & Text
+- **Pure White** (`#ffffff`): Heading text, high-emphasis body text
+- **Muted Silver** (`#a6a6a6`): Body text, descriptions, secondary information
+- **Ghost White** (`rgba(255, 255, 255, 0.6)`): Tertiary text, placeholders on dark surfaces
+
+### Semantic & Accent
+- **Framer Blue** (`#0099ff`): Links, interactive borders, focus rings
+- **Blue Glow** (`rgba(0, 153, 255, 0.15)`): Focus ring shadow, subtle blue halo around interactive elements
+- **Default Link Blue** (`#0000ee`): Standard browser link color (used sparingly in content areas)
+
+### Gradient System
+- No prominent gradient usage — Framer relies on pure flat black surfaces with occasional blue-tinted glows for depth
+- Subtle radial glow effects behind product screenshots using Framer Blue at very low opacity
+
+## 3. Typography Rules
+
+### Font Family
+- **Display**: `GT Walsheim Framer Medium` / `GT Walsheim Medium` — custom geometric sans-serif, weight 500. Fallbacks: `GT Walsheim Framer Medium Placeholder`, system sans-serif
+- **Body/UI**: `Inter Variable` / `Inter` — variable sans-serif with extensive OpenType features. Fallbacks: `Inter Placeholder`, `-apple-system`, `system-ui`
+- **Accent**: `Mona Sans` — GitHub's open-source font, used for select elements at ultra-light weight (100)
+- **Monospace**: `Azeret Mono` — companion mono for code and technical labels
+- **Rounded**: `Open Runde` — small rounded companion font for micro-labels
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | GT Walsheim Framer Medium | 110px | 500 | 0.85 | -5.5px | Extreme negative tracking, compressed impact |
+| Section Display | GT Walsheim Medium | 85px | 500 | 0.95 | -4.25px | OpenType: ss02, tnum |
+| Section Heading | GT Walsheim Medium | 62px | 500 | 1.00 | -3.1px | OpenType: ss02 |
+| Feature Heading | GT Walsheim Medium | 32px | 500 | 1.13 | -1px | Tightest of the smaller headings |
+| Accent Display | Mona Sans | 61.5px | 100 | 1.00 | -3.1px | Ultra-light weight, ethereal |
+| Card Title | Inter Variable | 24px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Feature Title | Inter | 22px | 700 | 1.20 | -0.8px | OpenType: cv05 |
+| Sub-heading | Inter | 20px | 600 | 1.20 | -0.8px | OpenType: cv01, cv09 |
+| Body Large | Inter Variable | 18px | 400 | 1.30 | -0.01px | OpenType: cv01, cv05, cv09, cv11, ss03, ss07 |
+| Body | Inter Variable | 15px | 400 | 1.30 | -0.01px | OpenType: cv11 |
+| Nav/UI | Inter Variable | 15px | 400 | 1.00 | -0.15px | OpenType: cv06, cv11, dlig, ss03 |
+| Body Readable | Inter Framer Regular | 14px | 400 | 1.60 | normal | Long-form body text |
+| Caption | Inter Variable | 14px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Label | Inter | 13px | 500 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Small Caption | Inter Variable | 12px | 400 | 1.40 | normal | OpenType: cv01, cv06, cv09, cv11, ss03, ss07 |
+| Micro Code | Azeret Mono | 10.4px | 400 | 1.60 | normal | OpenType: cv06, cv11, ss03 |
+| Badge | Open Runde | 9px | 600 | 1.11 | normal | OpenType: cv01, cv09 |
+| Micro Uppercase | Inter Variable | 7px | 400 | 1.00 | 0.21px | uppercase transform |
+
+### Principles
+- **Compression as personality**: GT Walsheim's extreme negative letter-spacing (-5.5px at 110px) is the defining typographic gesture — headlines feel spring-loaded, urgent, almost breathless
+- **OpenType maximalism**: Inter is deployed with 6+ OpenType features simultaneously (`cv01`, `cv05`, `cv09`, `cv11`, `ss03`, `ss07`), creating a subtly custom feel even at body sizes
+- **Weight restraint on display**: All GT Walsheim usage is weight 500 (medium) — never bold, never regular. This creates a confident-but-not-aggressive display tone
+- **Ultra-tight line heights**: Display text at 0.85 line-height means letters nearly overlap vertically — intentional density that rewards reading at arm's length
+
+## 4. Component Stylings
+
+### Buttons
+- **Frosted Pill**: `rgba(255, 255, 255, 0.1)` background, black text (`#000000`), pill shape (40px radius). The glass-effect button that lives on dark surfaces — translucent, ambient, subtle
+- **Solid White Pill**: `rgb(255, 255, 255)` background, black text (`#000000`), full pill shape (100px radius), padding `10px 15px`. The primary CTA — clean, high-contrast on dark, unmissable
+- **Ghost**: No visible background, white text, relies on text styling alone. Hover reveals subtle frosted background
+- **Transition**: Scale-based animations (matrix transform with 0.85 scale factor), opacity transitions for reveal effects
+
+### Cards & Containers
+- **Dark Surface Card**: Black or near-black (`#090909`) background, `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` blue ring shadow border, rounded corners (10px–15px radius)
+- **Elevated Card**: Multi-layer shadow — `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px` (subtle top highlight) + `rgba(0, 0, 0, 0.25) 0px 10px 30px` (deep ambient shadow)
+- **Product Screenshots**: Full-width or padded within dark containers, 8px–12px border-radius for software UI previews
+- **Hover**: Subtle glow increase on Framer Blue ring shadow, or brightness shift on frosted surfaces
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Input fields follow dark theme: dark background, subtle border, white text
+- Focus state: Framer Blue (`#0099ff`) ring border, `1px solid #0099ff`
+- Placeholder text in `rgba(255, 255, 255, 0.4)`
+
+### Navigation
+- **Dark floating nav bar**: Black background with frosted glass effect, white text links
+- **Nav links**: Inter at 15px, weight 400, white text with subtle hover opacity change
+- **CTA button**: Pill-shaped, white or frosted, positioned at right end of nav
+- **Mobile**: Collapses to hamburger menu, maintains dark theme
+- **Sticky behavior**: Nav remains fixed at top on scroll
+
+### Image Treatment
+- **Product screenshots as hero art**: Full-width embedded UI screenshots with rounded corners (8px–12px)
+- **Dark-on-dark composition**: Screenshots placed on black backgrounds with subtle shadow for depth separation
+- **16:9 and custom aspect ratios**: Product demos fill their containers
+- **No decorative imagery**: All images are functional — showing the tool, the output, or the workflow
+
+### Trust & Social Proof
+- Customer logos and testimonials in muted gray on dark surfaces
+- Minimal ornamentation — the product screenshots serve as the trust signal
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Scale**: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 20px, 30px, 35px
+- **Section padding**: Large vertical spacing (80px–120px between sections)
+- **Card padding**: 15px–30px internal padding
+- **Component gaps**: 8px–20px between related elements
+
+### Grid & Container
+- **Max width**: ~1200px container, centered
+- **Column patterns**: Full-width hero, 2-column feature sections, single-column product showcases
+- **Asymmetric layouts**: Feature sections often pair text (40%) with screenshot (60%)
+
+### Whitespace Philosophy
+- **Breathe through darkness**: Generous vertical spacing between sections — the black background means whitespace manifests as void, creating dramatic pauses between content blocks
+- **Dense within, spacious between**: Individual components are tightly composed (tight line-heights, compressed text) but float in generous surrounding space
+- **Product-first density**: Screenshot areas are allowed to be dense and information-rich, contrasting with the sparse marketing text
+
+### Border Radius Scale
+- **1px**: Micro-elements, nearly squared precision edges
+- **5px–7px**: Small UI elements, image thumbnails — subtly softened
+- **8px**: Standard component radius — code blocks, buttons, interactive elements
+- **10px–12px**: Cards, product screenshots — comfortably rounded
+- **15px–20px**: Large containers, feature cards — generously rounded
+- **30px–40px**: Navigation pills, pagination — noticeably rounded
+- **100px**: Full pill shape — primary CTAs, tag elements
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Flat) | No shadow, pure black surface | Page background, empty areas |
+| Level 1 (Ring) | `rgba(0, 153, 255, 0.15) 0px 0px 0px 1px` | Card borders, interactive element outlines — Framer Blue glow ring |
+| Level 2 (Contained) | `rgb(9, 9, 9) 0px 0px 0px 2px` | Near-black ring for subtle containment on dark surfaces |
+| Level 3 (Floating) | `rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px` | Elevated cards, floating elements — subtle white top-edge highlight + deep ambient shadow |
+
+### Shadow Philosophy
+Framer's elevation system is inverted from traditional light-theme designs. Instead of darker shadows on light backgrounds, Framer uses:
+- **Blue-tinted ring shadows** at very low opacity (0.15) for containment — a signature move that subtly brands every bordered element
+- **White edge highlights** (0.5px) on the top edge of elevated elements — simulating light hitting the top surface
+- **Deep ambient shadows** for true floating elements — `rgba(0, 0, 0, 0.25)` at large spread (30px)
+
+### Decorative Depth
+- **Blue glow auras**: Subtle Framer Blue (`#0099ff`) radial gradients behind key interactive areas
+- **No background blur/glassmorphism**: Despite the frosted button effect, there's no heavy glass blur usage — the translucency is achieved through simple rgba opacity
+
+## 7. Do's and Don'ts
+
+### Do
+- Use pure black (`#000000`) as the primary background — not dark gray, not charcoal
+- Apply extreme negative letter-spacing on GT Walsheim display text (-3px to -5.5px)
+- Keep all buttons pill-shaped (40px+ radius) — never use squared or slightly-rounded buttons
+- Use Framer Blue (`#0099ff`) exclusively for interactive accents — links, borders, focus states
+- Deploy `rgba(255, 255, 255, 0.1)` for frosted glass surfaces on dark backgrounds
+- Maintain GT Walsheim at weight 500 only — the medium weight IS the brand
+- Use extensive OpenType features on Inter text (cv01, cv05, cv09, cv11, ss03, ss07)
+- Let product screenshots be the visual centerpiece — the tool markets itself
+- Apply blue ring shadows (`rgba(0, 153, 255, 0.15) 0px 0px 0px 1px`) for card containment
+
+### Don't
+- Use warm dark backgrounds (no `#1a1a1a`, `#2d2d2d`, or brownish blacks)
+- Apply bold (700+) weight to GT Walsheim display text — medium 500 only
+- Introduce additional accent colors beyond Framer Blue — this is a one-accent-color system
+- Use large border-radius on non-interactive elements (cards use 10px–15px, only buttons get 40px+)
+- Add decorative imagery, illustrations, or icons — the product IS the illustration
+- Use positive letter-spacing on headlines — everything is compressed, negative tracking
+- Create heavy drop shadows — depth is communicated through subtle rings and minimal ambients
+- Place light/white backgrounds behind content sections — the void is sacred
+- Use serif or display-weight fonts — the system is geometric sans-serif only
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <809px | Single column, stacked feature sections, reduced hero text (62px→40px), hamburger nav |
+| Tablet | 809px–1199px | 2-column features begin, nav links partially visible, screenshots scale down |
+| Desktop | >1199px | Full layout, expanded nav with all links + CTA, 110px display hero, side-by-side features |
+
+### Touch Targets
+- Pill buttons: minimum 40px height with 10px vertical padding — exceeds 44px WCAG minimum
+- Nav links: 15px text with generous padding for touch accessibility
+- Mobile CTA buttons: Full-width pills on mobile for easy thumb reach
+
+### Collapsing Strategy
+- **Navigation**: Full horizontal nav → hamburger menu at mobile breakpoint
+- **Hero text**: 110px display → 85px → 62px → ~40px across breakpoints, maintaining extreme negative tracking proportionally
+- **Feature sections**: Side-by-side (text + screenshot) → stacked vertically on mobile
+- **Product screenshots**: Scale responsively within containers, maintaining aspect ratios
+- **Section spacing**: Reduces proportionally — 120px desktop → 60px mobile
+
+### Image Behavior
+- Product screenshots are responsive, scaling within their container boundaries
+- No art direction changes — same crops across breakpoints
+- Dark background ensures screenshots maintain visual impact at any size
+- Screenshots lazy-load as user scrolls into view
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary Background: Void Black (`#000000`)
+- Primary Text: Pure White (`#ffffff`)
+- Accent/CTA: Framer Blue (`#0099ff`)
+- Secondary Text: Muted Silver (`#a6a6a6`)
+- Frosted Surface: Translucent White (`rgba(255, 255, 255, 0.1)`)
+- Elevation Ring: Blue Glow (`rgba(0, 153, 255, 0.15)`)
+
+### Example Component Prompts
+- "Create a hero section on pure black background with 110px GT Walsheim heading in white, letter-spacing -5.5px, line-height 0.85, and a pill-shaped white CTA button (100px radius) with black text"
+- "Design a feature card on black background with a 1px Framer Blue ring shadow border (rgba(0,153,255,0.15)), 12px border-radius, white heading in Inter at 22px weight 700, and muted silver (a6a6a6) body text"
+- "Build a navigation bar with black background, white Inter text links at 15px, and a frosted pill button (rgba(255,255,255,0.1) background, 40px radius) as the CTA"
+- "Create a product showcase section with a full-width screenshot embedded on black, 10px border-radius, subtle multi-layer shadow (white 0.5px top highlight + rgba(0,0,0,0.25) 30px ambient)"
+- "Design a pricing card using pure black surface, Framer Blue (#0099ff) accent for the selected plan border, white text hierarchy (24px Inter bold heading, 14px regular body), and a solid white pill CTA button"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time — the dark canvas makes each element precious
+2. Always verify letter-spacing on GT Walsheim headings — the extreme negative tracking is non-negotiable
+3. Check that Framer Blue appears ONLY on interactive elements — never as decorative background or text color for non-links
+4. Ensure all buttons are pill-shaped — any squared corner immediately breaks the Framer aesthetic
+5. Test frosted glass surfaces by checking they have exactly `rgba(255, 255, 255, 0.1)` — too opaque looks like a bug, too transparent disappears

vibn-frontend/lib/scaffold/open-design/design-systems/friendly/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Friendly
+
+> Category: Creative & Artistic
+> Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.
+
+## 1. Visual Theme & Atmosphere
+
+Approachable, intuitive design with rounded elements, ample whitespace, and soft pastel color palettes.
+
+- **Visual style:** bold, playful, premium
+- **Color stance:** primary, secondary, neutral
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#F2D9DC` — Token from style foundations.
+- **Secondary:** `#D9F2D8` — 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 (#F2D9DC) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Noto Serif Display, display=Noto Serif Display, mono=Space 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:** compact density mode
+- 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 `#F2D9DC`; 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 (#F2D9DC) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/futuristic/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Futuristic
+
+> Category: Themed & Unique
+> Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.
+
+## 1. Visual Theme & Atmosphere
+
+Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.
+
+- **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:** desktop-first expressive scale
+- **Families:** primary=Roboto, display=Audiowide, mono=Anonymous Pro
+- **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.

vibn-frontend/lib/scaffold/open-design/design-systems/github/DESIGN.md

@@ -0,0 +1,155 @@
+# Design System Inspired by GitHub
+
+> Category: Developer Tools
+> Code-forward platform. Functional density, blue-on-white precision, Primer foundations.
+
+## 1. Visual Theme & Atmosphere
+
+GitHub's surface is engineered, not decorated. Every pixel announces a stance: this is a tool for people who care about diffs, builds, and pull requests. The page background is a clean `#ffffff` (light) or `#0d1117` (dark), with content arranged on dense rectangular panes separated by hairline borders rather than negative space. Information density is the brand — list rows, code lines, repository headers, and notification cards are all packed close together so a power user can scan a hundred items without scrolling.
+
+The signature accents are the **Primer blue** (`#0969da`) for links and primary actions, and **GitHub green** (`#1a7f37`) for merged states, success, and the merge button itself. Both feel slightly muted compared to consumer-product blues and greens — saturated enough to read against the dense gray text, restrained enough to disappear into the background when several appear in one viewport.
+
+Typography uses the **system-ui** stack across the entire product so text renders crisply on every OS, paired with **SFMono / Menlo / Consolas** for code. There is no editorial display font; GitHub's voice is the voice of the system you're already on.
+
+**Key Characteristics:**
+- True white canvas (`#ffffff`) or deep navy-black (`#0d1117`) — no warmth, no tint
+- Hairline gray borders (`#d0d7de`) define every pane and panel
+- Primer blue (`#0969da`) for links/primary; GitHub green (`#1a7f37`) for success/merge
+- system-ui for prose; SFMono for code — no custom typeface
+- Dense list rows with minimal padding; whitespace is rare
+- Octicon iconography at 16px / 24px — single-stroke, geometric, consistent
+- Pill-shaped status badges with strong color semantics
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Canvas Default** (`#ffffff`): Primary page background, light theme.
+- **Canvas Subtle** (`#f6f8fa`): Secondary surface, sidebar, input background, header strip.
+- **Canvas Inset** (`#eaeef2`): Code block background, deep-inset surface.
+- **Fg Default** (`#1f2328`): Primary text, headlines, ink.
+- **Fg Muted** (`#656d76`): Secondary text, captions, file paths.
+
+### Brand Accent
+- **Primer Blue** (`#0969da`): Links, primary CTAs, focus ring base — the universal interactive color.
+- **Primer Blue Hover** (`#0550ae`): Hover/pressed for primary blue.
+- **Accent Subtle** (`#ddf4ff`): Soft blue surface for callouts, info banners.
+
+### Semantic
+- **Success / Merge Green** (`#1a7f37`): Merged PRs, success badges, merge button.
+- **Success Subtle** (`#dafbe1`): Success surface tint.
+- **Open Green** (`#1a7f37`): "Open" issue/PR state.
+- **Closed / Danger Red** (`#cf222e`): Closed PRs, destructive action, validation error.
+- **Danger Subtle** (`#ffebe9`): Error banner surface.
+- **Attention / Warning Yellow** (`#9a6700`): Warning text on amber surface.
+- **Attention Subtle** (`#fff8c5`): Warning banner surface.
+- **Done Purple** (`#8250df`): Merged-and-archived, "done" state, premium badge.
+- **Sponsor Pink** (`#bf3989`): Sponsors heart, GitHub sponsors brand.
+
+### Border & Divider
+- **Border Default** (`#d0d7de`): Standard hairline border, panel outline.
+- **Border Muted** (`#d8dee4`): Inner dividers within a panel.
+- **Border Subtle** (`#eaeef2`): Faint table row dividers.
+
+### Dark Theme
+- **Dark Canvas** (`#0d1117`): Dark page background.
+- **Dark Surface** (`#161b22`): Sidebar, header, secondary surface.
+- **Dark Border** (`#30363d`): Standard dark-mode border.
+- **Dark Fg** (`#e6edf3`): Primary text on dark.
+
+## 3. Typography Rules
+
+### Font Family
+- **Body / UI**: `-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif`
+- **Code / Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`
+- **Emoji**: `"Apple Color Emoji", "Segoe UI Emoji"`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | system-ui | 32px (2rem) | 600 | 1.25 | -0.01em | Repo header, marketing hero |
+| H1 | system-ui | 24px (1.5rem) | 600 | 1.25 | normal | Page heading |
+| H2 | system-ui | 20px (1.25rem) | 600 | 1.25 | normal | Section heading |
+| H3 | system-ui | 16px (1rem) | 600 | 1.25 | normal | Sub-section, panel header |
+| Body | system-ui | 14px (0.875rem) | 400 | 1.5 | normal | Default text size — not 16px |
+| Body Small | system-ui | 12px (0.75rem) | 400 | 1.4 | normal | Captions, file metadata |
+| Code | SFMono | 12px (0.75rem) | 400 | 1.45 | normal | Code blocks, diff |
+| Code Inline | SFMono | 0.85em | 400 | inherit | normal | Inline `code` spans |
+
+### Principles
+- **14px body, not 16px**: GitHub's prose density is its identity. The product reads at 14px to fit more rows in a viewport.
+- **Weight binary**: 400 for everything by default; 600 for headlines and emphasis. No 500, no 700.
+- **System fonts always**: never load a webfont for chrome — text must render instantly on slow connections.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary (Green)**
+- Background: `#1f883d`
+- Text: `#ffffff`
+- Border: 1px solid `rgba(31, 35, 40, 0.15)`
+- Padding: 5px 16px
+- Radius: 6px
+- Shadow: `0 1px 0 rgba(31,35,40,0.1)`
+- Hover: background `#1a7f37`
+- Use: "Create repository", "Merge pull request"
+
+**Default**
+- Background: `#f6f8fa`
+- Text: `#1f2328`
+- Border: 1px solid `#d0d7de`
+- Padding: 5px 16px
+- Radius: 6px
+- Hover: background `#f3f4f6`, border `#d0d7de`
+
+**Outline (Blue Link Style)**
+- Background: `#ffffff`
+- Text: `#0969da`
+- Border: 1px solid `#d0d7de`
+- Hover: background `#0969da`, text `#ffffff`
+
+**Danger**
+- Background: `#ffffff`
+- Text: `#cf222e`
+- Border: 1px solid `#d0d7de`
+- Hover: background `#a40e26`, text `#ffffff`, border `#a40e26`
+
+### Cards / Boxes
+- Background: `#ffffff`
+- Border: 1px solid `#d0d7de`
+- Radius: 6px
+- Padding: 16px (header) + 16px (body)
+- Header has a `#f6f8fa` strip with bottom border.
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#d0d7de`
+- Radius: 6px
+- Padding: 5px 12px
+- Focus: border `#0969da`, ring `0 0 0 3px rgba(9,105,218,0.3)`
+
+### Status Pills (Issue / PR)
+- **Open**: background `#1a7f37`, text white, padding 4px 10px, radius 9999px.
+- **Closed**: background `#cf222e`, text white.
+- **Merged**: background `#8250df`, text white.
+- **Draft**: background `#6e7781`, text white.
+
+### Labels (Tags on Issues/PRs)
+- Padding: 0 7px
+- Radius: 9999px
+- Font: 12px / 500
+- Background and text are programmatic (label color → text computed for contrast).
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Spacing scale: 4, 8, 12, 16, 24, 32, 40, 48.
+- **Page max-width**: 1280px (`Container-xl`).
+- **Sidebar**: 296px on desktop, collapses below 1012px.
+- **Row padding**: 16px horizontal, 12px vertical (lists are dense by design).
+
+## 6. Motion
+
+- **Duration**: 80ms for hover; 200ms for menu/popover open.
+- **Easing**: `ease-out` for opens, `ease-in` for closes.
+- **Avoided**: page-load animation, parallax, persistent micro-interactions. Things appear; they do not perform.

vibn-frontend/lib/scaffold/open-design/design-systems/github/components.html

@@ -0,0 +1,383 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>GitHub — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/github. Every visible
+        value comes from tokens.css. GitHub's signature moves: true white
+        canvas, hairline borders (#d0d7de), Primer blue CTAs, GitHub green
+        for success/merge, system-ui fonts, 14px body density."
+    />
+
+    <style>
+      :root {
+        --bg:           #ffffff;
+        --surface:      #f6f8fa;
+        --surface-warm: var(--surface);
+
+        --fg:   #1f2328;
+        --fg-2: #1f2328;
+        --muted: #656d76;
+        --meta:  #656d76;
+
+        --border:      #d0d7de;
+        --border-soft: #d8dee4;
+
+        --accent:        #0969da;
+        --accent-on:     #ffffff;
+        --accent-hover:  #0550ae;
+        --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+        --success: #1a7f37;
+        --warn:    #9a6700;
+        --danger:  #cf222e;
+
+        --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+        --text-xs:   12px;
+        --text-sm:   14px;
+        --text-base: 14px;
+        --text-lg:   16px;
+        --text-xl:   20px;
+        --text-2xl:  24px;
+        --text-3xl:  28px;
+        --text-4xl:  32px;
+
+        --leading-body:     1.5;
+        --leading-tight:    1.25;
+        --tracking-display: -0.01em;
+
+        --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: 64px;
+        --section-y-tablet:  48px;
+        --section-y-phone:   32px;
+
+        --radius-sm:   6px;
+        --radius-md:   6px;
+        --radius-lg:   12px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
+
+        --focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
+
+        --motion-fast:   80ms;
+        --motion-base:   200ms;
+        --ease-standard: ease-out;
+
+        --container-max:            1280px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet:  16px;
+        --container-gutter-phone:   16px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        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;
+      }
+
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @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); }
+      }
+
+      /* ─── Typography ─────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 600;
+        margin: 0;
+        line-height: var(--leading-tight);
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-xl);
+        /* 20px section heading: line-height 1.25, normal tracking. */
+      }
+      h3 {
+        font-size: var(--text-lg);
+        /* 16px sub-section/panel header: line-height 1.25.
+           Overrides the shared --leading-tight set above. */
+      }
+      p { margin: 0; }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); }
+      .body-xs { font-size: var(--text-xs); }
+      .eyebrow {
+        font-size: var(--text-xs);
+        font-weight: 600;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+      code {
+        font-family: var(--font-mono);
+        font-size: 0.85em;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: 1px 4px;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+
+      /* ─── Buttons ────────────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 5px 16px;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        font-weight: 400;
+        line-height: 1.5;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    border-color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
+      .btn-primary {
+        background: #1f883d;
+        color: #ffffff;
+        border-color: rgba(31, 35, 40, 0.15);
+        box-shadow: 0 1px 0 rgba(31, 35, 40, 0.1);
+        font-weight: 500;
+      }
+      .btn-primary:hover { background: var(--success); }
+      .btn-default {
+        background: var(--surface);
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      .btn-default:hover { background: #f3f4f6; }
+      .btn-outline {
+        background: var(--bg);
+        color: var(--accent);
+        border-color: var(--border);
+      }
+      .btn-outline:hover { background: var(--accent); color: white; }
+
+      /* ─── Status pills ───────────────────────── */
+      .status-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-1);
+        padding: 4px 10px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 500;
+        color: white;
+        line-height: 1;
+      }
+      .status-open    { background: #1a7f37; }
+      .status-closed  { background: #cf222e; }
+      .status-merged  { background: #8250df; }
+      .status-draft   { background: #6e7781; }
+
+      /* ─── Box / Card ─────────────────────────── */
+      .box {
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        overflow: hidden;
+      }
+      .box-header {
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        padding: var(--space-3) var(--space-4);
+        font-weight: 600;
+        font-size: var(--text-sm);
+      }
+      .box-body { padding: var(--space-4); }
+
+      /* ─── Inputs ─────────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
+      .field input {
+        background: var(--bg);
+        color: var(--fg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: 5px 12px;
+        font-family: var(--font-body);
+        font-size: var(--text-sm);
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard),
+                    box-shadow var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--muted); }
+      .field input:focus {
+        border-color: var(--accent);
+        box-shadow: var(--focus-ring);
+      }
+
+      /* ─── Layout ─────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.2fr 1fr;
+        gap: var(--space-8);
+        align-items: start;
+      }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-4);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-4); flex-wrap: wrap; }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- HERO -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · github</p>
+            <h1>Where the world builds software.</h1>
+            <p class="body-muted" style="max-width:48ch;font-size:var(--text-lg);line-height:1.5;margin-top:var(--space-3)">
+              Millions of developers and companies build, ship, and maintain
+              their software on GitHub. Every value below comes from tokens.css
+              — no raw hex, no off-token type.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">Sign up for free</a>
+              <a href="./DESIGN.md" class="btn btn-default">Read the spec</a>
+            </div>
+          </div>
+
+          <aside>
+            <div class="box">
+              <div class="box-header">open-design / design-systems</div>
+              <div class="box-body stack-3">
+                <div style="display:flex;align-items:center;justify-content:space-between">
+                  <span class="body-sm" style="font-weight:600;color:var(--accent)">Pull requests</span>
+                  <span class="status-pill status-open">Open</span>
+                </div>
+                <div style="font-size:var(--text-xs);color:var(--muted)">
+                  #1652 · feat: add structured tokens for 5 brands
+                </div>
+                <div style="font-size:var(--text-xs);color:var(--muted)">
+                  #1653 · feat: add batch 2 token fixtures
+                </div>
+                <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
+                  <span class="status-pill status-merged">Merged</span>
+                  <span class="status-pill status-draft">Draft</span>
+                  <span class="status-pill status-closed">Closed</span>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2>Dense, functional, system-native.</h2>
+        </div>
+
+        <div class="features-grid" style="margin-block-start:var(--space-6)">
+          <article class="box stack-3">
+            <div class="box-header">14px body</div>
+            <div class="box-body">
+              <p class="body-sm body-muted">
+                Not 16px — GitHub's prose density is its identity. 14px base
+                fits more content per viewport. system-ui renders instantly on
+                every OS with zero webfont load.
+              </p>
+            </div>
+          </article>
+          <article class="box stack-3">
+            <div class="box-header">Hairline borders</div>
+            <div class="box-body">
+              <p class="body-sm body-muted">
+                <code>#d0d7de</code> — every pane, panel, and card. Structure
+                communicated by stroke, not shadow. Density without visual noise.
+              </p>
+            </div>
+          </article>
+          <article class="box stack-3">
+            <div class="box-header">Primer blue + green</div>
+            <div class="box-body">
+              <p class="body-sm body-muted">
+                <code>#0969da</code> for all interactive affordances.
+                <code>#1a7f37</code> exclusively for success/merge states.
+                Both restrained — never decorative.
+              </p>
+            </div>
+          </article>
+        </div>
+      </section>
+
+      <!-- FORM -->
+      <section data-od-id="form">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Primer form inputs.</h2>
+            <p class="body-muted" style="max-width:44ch">
+              Focus: border <code>#0969da</code> + <code>0 0 0 3px rgba(9,105,218,0.3)</code>.
+              5px 12px padding. 6px radius. Weight 600 label.
+            </p>
+          </div>
+          <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
+                onsubmit="event.preventDefault()">
+            <div class="field">
+              <label for="email">Email address</label>
+              <input id="email" type="email" placeholder="you@example.com" />
+            </div>
+            <div class="field">
+              <label for="repo">Repository name</label>
+              <input id="repo" type="text" placeholder="my-project" />
+            </div>
+            <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
+              <button type="submit" class="btn btn-primary">Create repository</button>
+              <button type="button" class="btn btn-default">Cancel</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/github/tokens.css

@@ -0,0 +1,125 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/github/tokens.css
+ *
+ * Structured token bindings for the "GitHub" brand — Primer foundations,
+ * functional density, blue-on-white precision.
+ *
+ * Brand identity in three sentences:
+ *   1. True white canvas (#ffffff) with a clean canvas-subtle (#f6f8fa)
+ *      secondary surface; hairline borders (#d0d7de) define every pane
+ *      — density over decoration, information over aesthetics.
+ *   2. System-ui stack throughout — no custom webfont; type renders at
+ *      instant on every OS; 14px body (not 16px) is the identity.
+ *   3. Primer blue (#0969da) for all interactive affordances; GitHub
+ *      green (#1a7f37) reserved for success/merge states only.
+ *
+ * Schema decisions:
+ *   - --bg: #ffffff; --surface: #f6f8fa (canvas-subtle).
+ *   - --surface-warm aliases --surface (no warm tier in Primer).
+ *   - --fg: #1f2328 (fg-default); --muted: #656d76 (fg-muted).
+ *   - --border: #d0d7de (1px hairline — the structural backbone).
+ *   - --accent: #0969da (Primer Blue); --accent-hover: #0550ae.
+ *   - --success bound to GitHub green (#1a7f37) — merge / open state.
+ *   - --tracking-display: -0.01em (only display-size headings use it).
+ *   - --text-base: 14px (the 14px body IS GitHub's product density).
+ *   - --radius-sm: 6px (universal Primer radius for buttons/inputs).
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #ffffff;
+  --surface:      #f6f8fa;              /* canvas-subtle — sidebar, input bg */
+  --surface-warm: var(--surface);       /* Primer has no warm tier */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #1f2328;                      /* fg-default — ink */
+  --fg-2: #1f2328;                      /* same ink; no B-slot split in Primer */
+  --muted: #656d76;                     /* fg-muted — captions, file paths */
+  --meta:  #656d76;                     /* same muted tier */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      #d0d7de;              /* border-default — hairline structural */
+  --border-soft: #d8dee4;             /* border-muted — inner panel dividers */
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent:        #0969da;            /* Primer Blue — links, primary CTAs */
+  --accent-on:     #ffffff;
+  --accent-hover:  #0550ae;            /* darker pressed state */
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #1a7f37;                  /* GitHub green — merge, open, success */
+  --warn:    #9a6700;                  /* attention amber text */
+  --danger:  #cf222e;                  /* closed / destructive red */
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  /* System fonts only — no webfonts load in GitHub. */
+  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  /* Type scale — DESIGN.md §Typography.
+   * GitHub's prose density: 14px body (not 16px). Display sits at 32px.
+   * h2 (20px) and h3 (16px) collapse close together for density. */
+  --text-xs:   12px;                   /* body-small — captions, metadata */
+  --text-sm:   14px;                   /* body — default UI (GitHub's base) */
+  --text-base: 14px;                   /* body baseline = 14px for density */
+  --text-lg:   16px;                   /* h3 / panel header */
+  --text-xl:   20px;                   /* h2 — section heading */
+  --text-2xl:  24px;                   /* h1 — page heading */
+  --text-3xl:  28px;                   /* subpage display */
+  --text-4xl:  32px;                   /* display — repo header / hero */
+
+  /* Leading + tracking.
+   * GitHub uses 1.25 for headings (tight-but-readable), 1.5 for body.
+   * Only display gets the -0.01em tracking. */
+  --leading-body:     1.5;
+  --leading-tight:    1.25;
+  --tracking-display: -0.01em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  /* 4px base grid — Primer spacing. Row padding 16px h, 12px v. */
+  --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 — GitHub marketing pages. */
+  --section-y-desktop: 64px;
+  --section-y-tablet:  48px;
+  --section-y-phone:   32px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* 6px is the universal Primer radius for all interactive elements. */
+  --radius-sm:   6px;
+  --radius-md:   6px;
+  --radius-lg:   12px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* GitHub uses hairline borders, not shadows, as the primary depth
+     signal. --elev-raised is a whisper for the rare floating element. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised: 0 1px 3px rgba(31, 35, 40, 0.12), 0 8px 24px rgba(66, 74, 83, 0.12);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  /* Primer focus: 3px rgba ring on the accent color. */
+  --focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.3);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  /* GitHub avoids animation. 80ms hover, 200ms open — short and purposeful. */
+  --motion-fast:   80ms;
+  --motion-base:   200ms;
+  --ease-standard: ease-out;
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1280px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet:  16px;
+  --container-gutter-phone:   16px;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/glassmorphism/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Glassmorphism
+
+> Category: Morphism & Effects
+> Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
+
+## 1. Visual Theme & Atmosphere
+
+Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
+
+- **Visual style:** clean, high-contrast, bold, enterprise, liquidglass effect, glassmorphism
+- **Color stance:** primary, neutral, success, warning, danger, info, surface/subtle layers
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#1856FF` — Token from style foundations.
+- **Secondary:** `#3A344E` — Token from style foundations.
+- **Success:** `#07CA6B` — Token from style foundations.
+- **Warning:** `#E89558` — Token from style foundations.
+- **Danger:** `#EA2143` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#141414` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#1856FF) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#141414) for legibility.
+
+## 3. Typography
+
+- **Scale:** mobile-first compact scale
+- **Families:** primary=Plus Jakarta Sans, display=Plus Jakarta Sans, 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:** comfortable density mode
+- 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 `#1856FF`; 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 (#1856FF) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/gradient/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Gradient
+
+> Category: Morphism & Effects
+> Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.
+
+## 1. Visual Theme & Atmosphere
+
+Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.
+
+- **Visual style:** modern, 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:** `#990FFA` — Token from style foundations.
+- **Secondary:** `#E60076` — 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 (#990FFA) 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=Montserrat, display=Space Grotesk, 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:** 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 `#990FFA`; 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 (#990FFA) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/hashicorp/DESIGN.md

@@ -0,0 +1,281 @@
+# Design System Inspired by HashiCorp
+
+> Category: Backend & Data
+> Infrastructure automation. Enterprise-clean, black and white.
+
+## 1. Visual Theme & Atmosphere
+
+HashiCorp's website is enterprise infrastructure made tangible — a design system that must communicate the complexity of cloud infrastructure management while remaining approachable. The visual language splits between two modes: a clean white light-mode for informational sections and a dramatic dark-mode (`#15181e`, `#0d0e12`) for hero areas and product showcases, creating a day/night duality that mirrors the "build in light, deploy in dark" developer workflow.
+
+The typography is anchored by a custom brand font (HashiCorp Sans, loaded as `__hashicorpSans_96f0ca`) that carries substantial weight — literally. Headings use 600–700 weights with tight line-heights (1.17–1.19), creating dense, authoritative text blocks that communicate enterprise confidence. The hero headline at 82px weight 600 with OpenType `"kern"` enabled is not decorative — it's infrastructure-grade typography.
+
+What distinguishes HashiCorp is its multi-product color system. Each product in the portfolio has its own brand color — Terraform purple (`#7b42bc`), Vault yellow (`#ffcf25`), Waypoint teal (`#14c6cb`), Vagrant blue (`#1868f2`) — and these colors appear throughout as accent tokens via a CSS custom property system (`--mds-color-*`). This creates a design system within a design system: the parent brand is black-and-white with blue accents, while each child product injects its own chromatic identity.
+
+The component system uses the `mds` (Markdown Design System) prefix, indicating a systematic, token-driven approach where colors, spacing, and states are all managed through CSS variables. Shadows are remarkably subtle — dual-layer micro-shadows using `rgba(97, 104, 117, 0.05)` that are nearly invisible but provide just enough depth to separate interactive surfaces from the background.
+
+**Key Characteristics:**
+- Dual-mode: clean white sections + dramatic dark (`#15181e`) hero/product areas
+- Custom HashiCorp Sans font with 600–700 weights and `"kern"` feature
+- Multi-product color system via `--mds-color-*` CSS custom properties
+- Product brand colors: Terraform purple, Vault yellow, Waypoint teal, Vagrant blue
+- Uppercase letter-spaced captions (13px, weight 600, 1.3px letter-spacing)
+- Micro-shadows: dual-layer at 0.05 opacity — depth through whisper, not shout
+- Token-driven `mds` component system with semantic variable names
+- Tight border radius: 2px–8px, nothing pill-shaped or circular
+- System-ui fallback stack for secondary text
+
+## 2. Color Palette & Roles
+
+### Brand Primary
+- **Black** (`#000000`): Primary brand color, text on light surfaces, `--mds-color-hcp-brand`
+- **Dark Charcoal** (`#15181e`): Dark mode backgrounds, hero sections
+- **Near Black** (`#0d0e12`): Deepest dark mode surface, form inputs on dark
+
+### Neutral Scale
+- **Light Gray** (`#f1f2f3`): Light backgrounds, subtle surfaces
+- **Mid Gray** (`#d5d7db`): Borders, button text on dark
+- **Cool Gray** (`#b2b6bd`): Border accents (at 0.1–0.4 opacity)
+- **Dark Gray** (`#656a76`): Helper text, secondary labels, `--mds-form-helper-text-color`
+- **Charcoal** (`#3b3d45`): Secondary text on light, button borders
+- **Near White** (`#efeff1`): Primary text on dark surfaces
+
+### Product Brand Colors
+- **Terraform Purple** (`#7b42bc`): `--mds-color-terraform-button-background`
+- **Vault Yellow** (`#ffcf25`): `--mds-color-vault-button-background`
+- **Waypoint Teal** (`#14c6cb`): `--mds-color-waypoint-button-background-focus`
+- **Waypoint Teal Hover** (`#12b6bb`): `--mds-color-waypoint-button-background-hover`
+- **Vagrant Blue** (`#1868f2`): `--mds-color-vagrant-brand`
+- **Purple Accent** (`#911ced`): `--mds-color-palette-purple-300`
+- **Visited Purple** (`#a737ff`): `--mds-color-foreground-action-visited`
+
+### Semantic Colors
+- **Action Blue** (`#1060ff`): Primary action links on dark
+- **Link Blue** (`#2264d6`): Primary links on light
+- **Bright Blue** (`#2b89ff`): Active links, hover accent
+- **Amber** (`#bb5a00`): `--mds-color-palette-amber-200`, warning states
+- **Amber Light** (`#fbeabf`): `--mds-color-palette-amber-100`, warning backgrounds
+- **Vault Faint Yellow** (`#fff9cf`): `--mds-color-vault-radar-gradient-faint-stop`
+- **Orange** (`#a9722e`): `--mds-color-unified-core-orange-6`
+- **Red** (`#731e25`): `--mds-color-unified-core-red-7`, error states
+- **Navy** (`#101a59`): `--mds-color-unified-core-blue-7`
+
+### Shadows
+- **Micro Shadow** (`rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`): Default card/button elevation
+- **Focus Outline**: `3px solid var(--mds-color-focus-action-external)` — systematic focus ring
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary Brand**: `__hashicorpSans_96f0ca` (HashiCorp Sans), with fallback: `__hashicorpSans_Fallback_96f0ca`
+- **System UI**: `system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | HashiCorp Sans | 82px (5.13rem) | 600 | 1.17 (tight) | normal | `"kern"` enabled |
+| Section Heading | HashiCorp Sans | 52px (3.25rem) | 600 | 1.19 (tight) | normal | `"kern"` enabled |
+| Feature Heading | HashiCorp Sans | 42px (2.63rem) | 700 | 1.19 (tight) | -0.42px | Negative tracking |
+| Sub-heading | HashiCorp Sans | 34px (2.13rem) | 600–700 | 1.18 (tight) | normal | Feature blocks |
+| Card Title | HashiCorp Sans | 26px (1.63rem) | 700 | 1.19 (tight) | normal | Card and panel headings |
+| Small Title | HashiCorp Sans | 19px (1.19rem) | 700 | 1.21 (tight) | normal | Compact headings |
+| Body Emphasis | HashiCorp Sans | 17px (1.06rem) | 600–700 | 1.18–1.35 | normal | Bold body text |
+| Body Large | system-ui | 20px (1.25rem) | 400–600 | 1.50 | normal | Hero descriptions |
+| Body | system-ui | 16px (1.00rem) | 400–500 | 1.63–1.69 (relaxed) | normal | Standard body text |
+| Nav Link | system-ui | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | Navigation items |
+| Small Body | system-ui | 14px (0.88rem) | 400–500 | 1.29–1.71 | normal | Secondary content |
+| Caption | system-ui | 13px (0.81rem) | 400–500 | 1.23–1.69 | normal | Metadata, footer links |
+| Uppercase Label | HashiCorp Sans | 13px (0.81rem) | 600 | 1.69 (relaxed) | 1.3px | `text-transform: uppercase` |
+
+### Principles
+- **Brand/System split**: HashiCorp Sans for headings and brand-critical text; system-ui for body, navigation, and functional text. The brand font carries the weight, system-ui carries the words.
+- **Kern always on**: All HashiCorp Sans text enables OpenType `"kern"` — letterfitting is non-negotiable.
+- **Tight headings**: Every heading uses 1.17–1.21 line-height, creating dense, stacked text blocks that feel infrastructural — solid, load-bearing.
+- **Relaxed body**: Body text uses 1.50–1.69 line-height (notably generous), creating comfortable reading rhythm beneath the dense headings.
+- **Uppercase labels as wayfinding**: 13px uppercase with 1.3px letter-spacing serves as the systematic category/section marker — always HashiCorp Sans weight 600.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark**
+- Background: `#15181e`
+- Text: `#d5d7db`
+- Padding: 9px 9px 9px 15px (asymmetric, more left padding)
+- Radius: 5px
+- Border: `1px solid rgba(178, 182, 189, 0.4)`
+- Shadow: `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px`
+- Focus: `3px solid var(--mds-color-focus-action-external)`
+- Hover: uses `--mds-color-surface-interactive` token
+
+**Secondary White**
+- Background: `#ffffff`
+- Text: `#3b3d45`
+- Padding: 8px 12px
+- Radius: 4px
+- Hover: `--mds-color-surface-interactive` + low-shadow elevation
+- Focus: `3px solid transparent` outline
+- Clean, minimal appearance
+
+**Product-Colored Buttons**
+- Terraform: background `#7b42bc`
+- Vault: background `#ffcf25` (dark text)
+- Waypoint: background `#14c6cb`, hover `#12b6bb`
+- Each product button follows the same structural pattern but uses its brand color
+
+### Badges / Pills
+- Background: `#42225b` (deep purple)
+- Text: `#efeff1`
+- Padding: 3px 7px
+- Radius: 5px
+- Border: `1px solid rgb(180, 87, 255)`
+- Font: 16px
+
+### Inputs
+
+**Text Input (Dark Mode)**
+- Background: `#0d0e12`
+- Text: `#efeff1`
+- Border: `1px solid rgb(97, 104, 117)`
+- Padding: 11px
+- Radius: 5px
+- Focus: `3px solid var(--mds-color-focus-action-external)` outline
+
+**Checkbox**
+- Background: `#0d0e12`
+- Border: `1px solid rgb(97, 104, 117)`
+- Radius: 3px
+
+### Links
+- **Action Blue on Light**: `#2264d6`, hover → blue-600 variable, underline on hover
+- **Action Blue on Dark**: `#1060ff` or `#2b89ff`, underline on hover
+- **White on Dark**: `#ffffff`, transparent underline → visible underline on hover
+- **Neutral on Light**: `#3b3d45`, transparent underline → visible underline on hover
+- **Light on Dark**: `#efeff1`, similar hover pattern
+- All links use `var(--wpl-blue-600)` as hover color
+
+### Cards & Containers
+- Light mode: white background, micro-shadow elevation
+- Dark mode: `#15181e` or darker surfaces
+- Radius: 8px for cards and containers
+- Product showcase cards with gradient borders or accent lighting
+
+### Navigation
+- Clean horizontal nav with mega-menu dropdowns
+- HashiCorp logo left-aligned
+- system-ui 15px weight 500 for links
+- Product categories organized by lifecycle management group
+- "Get started" and "Contact us" CTAs in header
+- Dark mode variant for hero sections
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 2px, 3px, 4px, 6px, 7px, 8px, 9px, 11px, 12px, 16px, 20px, 24px, 32px, 40px, 48px
+
+### Grid & Container
+- Max content width: ~1150px (xl breakpoint)
+- Full-width dark hero sections with contained content
+- Card grids: 2–3 column layouts
+- Generous horizontal padding at desktop scale
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <375px | Tight single column |
+| Mobile | 375–480px | Standard mobile |
+| Small Tablet | 480–600px | Minor adjustments |
+| Tablet | 600–768px | 2-column grids begin |
+| Small Desktop | 768–992px | Full nav visible |
+| Desktop | 992–1120px | Standard layout |
+| Large Desktop | 1120–1440px | Max-width content |
+| Ultra-wide | >1440px | Centered, generous margins |
+
+### Whitespace Philosophy
+- **Enterprise breathing room**: Generous vertical spacing between sections (48px–80px+) communicates stability and seriousness.
+- **Dense headings, spacious body**: Tight line-height headings sit above relaxed body text, creating visual "weight at the top" of each section.
+- **Dark as canvas**: Dark hero sections use extra vertical padding to let 3D illustrations and gradients breathe.
+
+### Border Radius Scale
+- Minimal (2px): Links, small inline elements
+- Subtle (3px): Checkboxes, small inputs
+- Standard (4px): Secondary buttons
+- Comfortable (5px): Primary buttons, badges, inputs
+- Card (8px): Cards, containers, images
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Default surfaces, text blocks |
+| Whisper (Level 1) | `rgba(97, 104, 117, 0.05) 0px 1px 1px, rgba(97, 104, 117, 0.05) 0px 2px 2px` | Cards, buttons, interactive surfaces |
+| Focus (Level 2) | `3px solid var(--mds-color-focus-action-external)` outline | Focus rings — color-matched to context |
+
+**Shadow Philosophy**: HashiCorp uses arguably the subtlest shadow system in modern web design. The dual-layer shadows at 5% opacity are nearly invisible — they exist not to create visual depth but to signal interactivity. If you can see the shadow, it's too strong. This restraint communicates the enterprise value of stability — nothing floats, nothing is uncertain.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use HashiCorp Sans for headings and brand text, system-ui for body and UI text
+- Enable `"kern"` on all HashiCorp Sans text
+- Use product brand colors ONLY for their respective products (Terraform = purple, Vault = yellow, etc.)
+- Apply uppercase labels at 13px weight 600 with 1.3px letter-spacing for section markers
+- Keep shadows at the "whisper" level (0.05 opacity dual-layer)
+- Use the `--mds-color-*` token system for consistent color application
+- Maintain the tight-heading / relaxed-body rhythm (1.17–1.21 vs 1.50–1.69 line-heights)
+- Use `3px solid` focus outlines for accessibility
+
+### Don't
+- Don't use product brand colors outside their product context (no Terraform purple on Vault content)
+- Don't increase shadow opacity above 0.1 — the whisper level is intentional
+- Don't use pill-shaped buttons (>8px radius) — the sharp, minimal radius is structural
+- Don't skip the `"kern"` feature on headings — the font requires it
+- Don't use HashiCorp Sans for small body text — it's designed for 17px+ heading use
+- Don't mix product colors in the same component — each product has one color
+- Don't use pure black (`#000000`) for dark backgrounds — use `#15181e` or `#0d0e12`
+- Don't forget the asymmetric button padding — 9px 9px 9px 15px is intentional
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <768px | Single column, hamburger nav, stacked CTAs |
+| Tablet | 768–992px | 2-column grids, nav begins expanding |
+| Desktop | 992–1150px | Full layout, mega-menu nav |
+| Large | >1150px | Max-width centered, generous margins |
+
+### Collapsing Strategy
+- Hero: 82px → 52px → 42px heading sizes
+- Navigation: mega-menu → hamburger
+- Product cards: 3-column → 2-column → stacked
+- Dark sections maintain full-width but compress padding
+- Buttons: inline → full-width stacked on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Light bg: `#ffffff`, `#f1f2f3`
+- Dark bg: `#15181e`, `#0d0e12`
+- Text light: `#000000`, `#3b3d45`
+- Text dark: `#efeff1`, `#d5d7db`
+- Links: `#2264d6` (light), `#1060ff` (dark), `#2b89ff` (active)
+- Helper text: `#656a76`
+- Borders: `rgba(178, 182, 189, 0.4)`, `rgb(97, 104, 117)`
+- Focus: `3px solid` product-appropriate color
+
+### Example Component Prompts
+- "Create a hero on dark background (#15181e). Headline at 82px HashiCorp Sans weight 600, line-height 1.17, kern enabled, white text. Sub-text at 20px system-ui weight 400, line-height 1.50, #d5d7db text. Two buttons: primary dark (#15181e, 5px radius, 9px 15px padding) and secondary white (#ffffff, 4px radius, 8px 12px padding)."
+- "Design a product card: white background, 8px radius, dual-layer shadow at rgba(97,104,117,0.05). Title at 26px HashiCorp Sans weight 700, body at 16px system-ui weight 400 line-height 1.63."
+- "Build an uppercase section label: 13px HashiCorp Sans weight 600, line-height 1.69, letter-spacing 1.3px, text-transform uppercase, #656a76 color."
+- "Create a product-specific CTA button: Terraform → #7b42bc background, Vault → #ffcf25 with dark text, Waypoint → #14c6cb. All: 5px radius, 500 weight text, 16px system-ui."
+- "Design a dark form: #0d0e12 input background, #efeff1 text, 1px solid rgb(97,104,117) border, 5px radius, 11px padding. Focus: 3px solid accent-color outline."
+
+### Iteration Guide
+1. Always start with the mode decision: light (white) for informational, dark (#15181e) for hero/product
+2. HashiCorp Sans for headings only (17px+), system-ui for everything else
+3. Shadows are at whisper level (0.05 opacity) — if visible, reduce
+4. Product colors are sacred — each product owns exactly one color
+5. Focus rings are always 3px solid, color-matched to product context
+6. Uppercase labels are the systematic wayfinding pattern — 13px, 600, 1.3px tracking

vibn-frontend/lib/scaffold/open-design/design-systems/hud/DESIGN.md

@@ -0,0 +1,173 @@
+# HUD Design System
+
+> Category: Themed & Unique
+> Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.
+
+## 1. Visual Theme & Atmosphere
+
+A **combat pilot's glass cockpit** — everything readable in a split second, in any light condition, under any G-load. The HUD projects critical flight data directly into the pilot's line of sight so they never have to look down. Translucency and glow replace depth and shadow. Every element is functional or it doesn't exist.
+
+| Element | Hex | Role |
+|---------|-----|------|
+| Background | `#0A0A0A` | Near-black, primary canvas |
+| Surface | `#111316` | Elevated panels, card backgrounds |
+| Border | `#1E2328` | Subtle panel separation |
+| Primary | `#00FF41` | Active readouts, all data values |
+| Secondary | `#7FFF00` | Standby/dimmed values, inactive fields |
+| Tertiary | `#5A9A5A` | Grid lines, tick marks, reference arcs |
+| Warning | `#FFB800` | Caution, system advisories |
+| Alert | `#FF3B3B` | Critical warnings, fault indicators |
+
+*Readings must be unambiguous at 200 knots in Instrument Meteorological Conditions.*
+
+### Use Cases
+
+HUD is purpose-built for:
+- **Flight simulation UIs** — combat sims, civil aviation trainers, helicopter hoist operations
+- **Telemetry dashboards** — real-time velocity, altitude, heading overlays
+- **Command-and-control displays** — drone operator screens, ISR stations
+- **Any high-speed, zero-ambiguity data overlay**
+
+### Prior Art
+
+F-16 Fighting Falcon HUD, Apache AH-64 attack helicopter integrated display, F-35 helmet-mounted display system, Garmin G1000 flight deck. All share: phosphor green primary, decluttered minimalism, and information hierarchy driven by operational urgency.
+
+## 2. Color Palette & Roles
+
+### Surface Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#0A0A0A` | Page canvas, primary depth |
+| Surface | `#111316` | Panels, cards, elevated areas |
+| Border | `#1E2328` | Panel dividers, subtle structure |
+
+### Data Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Primary | `#00FF41` | Speed, altitude, heading readouts |
+| Secondary | `#7FFF00` | Standby/dimmed values, inactive fields |
+| Tertiary | `#5A9A5A` | Grid lines, tick marks, reference arcs |
+| Warning | `#FFB800` | Caution, system advisories |
+| Alert | `#FF3B3B` | Critical warnings, fault indicators |
+
+All data colors on `#0A0A0A` pass WCAG AA (minimum 4.5:1).
+
+### Dark Mode
+
+Dark mode is the native and only mode. A HUD is projected in low-light or high-glare cockpit conditions; there is no light mode by design.
+
+```css
+:root {
+  --color-bg: #0A0A0A;
+  --color-surface: #111316;
+  --color-border: #1E2328;
+  --data-primary: #00FF41;
+  --data-secondary: #7FFF00;
+  --data-tertiary: #5A9A5A;
+  --data-warning: #FFB800;
+  --data-alert: #FF3B3B;
+}
+```
+
+## 3. Typography Rules
+
+| Role | Size | Weight | Line Height | Font |
+|------|------|--------|-------------|------|
+| Display | 32px | 700 | 1.0 | JetBrains Mono |
+| Heading | 12px | 700 | 1.0 | Inter, uppercase |
+| Body | 14px | 400 | 1.2 | JetBrains Mono |
+| Label | 10px | 600 | 1.0 | Inter, uppercase |
+| Micro | 8px | 700 | 1.0 | Inter, uppercase |
+
+**Font labels for catalog extraction:**
+
+```
+Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Micro: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+```
+
+## 4. Component Stylings
+
+### Data Readout
+
+Displays a single data value with label. Always uses `--data-primary` color.
+
+```css
+.data-readout {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--data-primary);
+  letter-spacing: 0.05em;
+}
+.data-readout-label {
+  font-family: 'Inter', sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--data-tertiary);
+  letter-spacing: 0.1em;
+}
+```
+
+### Status Indicator
+
+Dot or bar that reflects system state. Colors map to operational states.
+
+```css
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--data-primary); /* active */
+}
+.status-dot.standby { background: var(--data-secondary); }
+.status-dot.warning { background: var(--data-warning); }
+.status-dot.alert   { background: var(--data-alert); }
+```
+
+### Grid Lines
+
+Reference marks for spatial orientation. Thin lines in `--data-tertiary`.
+
+## 5. Layout Principles
+
+HUDs are overlay systems — they display over a visual field. The layout is absolute-positioned overlays on a transparent or dark background. Information density is high; whitespace is used to separate data clusters, not for aesthetics.
+
+Key structural patterns:
+- Grid lines reference the center of the display (crosshair)
+- Data readouts cluster by update frequency (altitude updates slower than airspeed)
+- Warning states override all other information layers
+
+## 6. Depth & Elevation
+
+HUD overlays use opacity and glow rather than elevation shadows. Panels are distinguished by border color and subtle surface shifts, not drop shadows. The HUD exists in a single visual plane.
+
+## 7. Do's and Don'ts
+
+- Do not use tertiary `#5A9A5A` for body or readout text — only grid lines and reference marks
+- Do not animate elements that do not signal operational state
+- Do not provide a light mode — a HUD only exists in low-light or high-glare conditions
+- Do not use rounded corners greater than 50% (circle reticles only)
+- Do not use gradients — flat color fills only
+- Do not convey information by color alone — reinforce with position and label
+
+## 8. Responsive Behavior
+
+HUD overlays are viewport-relative. On smaller viewports, data clusters compress proportionally. Critical readouts (speed, altitude, heading) remain visible at all sizes; secondary indicators hide or minimize. The layout uses a 12-column grid with absolute-positioned data panels anchored to screen edges.
+
+## 9. Agent Prompt Guide
+
+When generating a HUD-style interface, prompt the model to:
+- Use JetBrains Mono for all data readouts; Inter (uppercase) for labels only
+- Set `--data-primary` to `#00FF41` for all active readouts
+- Apply 150ms ease-out for state transitions, 100ms linear for data value changes
+- Include a status indicator component with active/standby/warning/alert states
+- Ensure all text passes 4.5:1 contrast on `#0A0A0A`
+- Never add decorative animation or light mode variants

vibn-frontend/lib/scaffold/open-design/design-systems/huggingface/DESIGN.md

@@ -0,0 +1,149 @@
+# Design System Inspired by Hugging Face
+
+> Category: AI & LLM
+> ML community hub. Sunny yellow accent, monospace identity, cheerful and dense.
+
+## 1. Visual Theme & Atmosphere
+
+Hugging Face is the rare ML brand that refuses to look serious. The hub leans into a sunshine-yellow accent (`#ffd21e`), a cartoon hugging-face emoji as the logo, and a confident **IBM Plex Mono** voice that reads more like a community zine than a research lab. The page background is a clean off-white (`#fafafa`) with text in a deep slate (`#0d1117`), and the yellow appears in pull quotes, tags, "new" badges, and the model-card header strip — never as an entire surface, always as punctuation.
+
+The typographic system is monospace-forward in a way few product brands attempt: **IBM Plex Mono** for headings and tags, **Source Sans Pro** (or Inter) for body. The mix gives every page a "config file is the README" vibe — fitting for a platform built around `.gitattributes` and `model-card.md`.
+
+Shapes are crisp, not soft: 4–6px radii, 1px solid borders that announce themselves rather than hide. Tables are dense, with row hover in a faint gray (`#f3f4f6`). The brand emoji punctuates everything — chips, headings, even error states wear a 🤗 — so the system feels human even when displaying technical data.
+
+**Key Characteristics:**
+- Sunshine yellow `#ffd21e` as the lone saturated accent
+- IBM Plex Mono for headings and tags; Source Sans Pro for body
+- Off-white canvas (`#fafafa`) with crisp 1px borders (`#e5e7eb`)
+- 4–6px radii — closer to brutalist than rounded
+- Hugging-face emoji 🤗 used unironically as a system glyph
+- Dense tables, minimal padding — a community hub for power users
+- Color-coded model categories (NLP blue, vision green, audio purple)
+
+## 2. Color Palette & Roles
+
+### Primary
+- **HF Yellow** (`#ffd21e`): Brand primary, badges, "new" pill, model-card header bar.
+- **HF Yellow Deep** (`#f59e0b`): Hover/active for yellow.
+- **HF Yellow Soft** (`#fff4cc`): Surface tint, callout background.
+
+### Surface & Background
+- **Canvas** (`#ffffff`): Primary page background.
+- **Canvas Subtle** (`#fafafa`): Alternate section background, footer.
+- **Canvas Inset** (`#f3f4f6`): Code block background, hover row.
+- **Canvas Dark** (`#0d1117`): Dark theme background.
+
+### Ink & Text
+- **Ink Primary** (`#0d1117`): Primary text, headings.
+- **Ink Secondary** (`#374151`): Body prose.
+- **Ink Muted** (`#6b7280`): Captions, file paths, model authors.
+- **Ink Inverse** (`#f9fafb`): Text on dark surface.
+
+### Category Accents (Model Tasks)
+- **NLP Blue** (`#2563eb`): Text/NLP task badges.
+- **Vision Green** (`#16a34a`): Computer-vision task badges.
+- **Audio Purple** (`#9333ea`): Audio/speech task badges.
+- **Multimodal Pink** (`#db2777`): Multimodal/diffusion task badges.
+- **Tabular Orange** (`#ea580c`): Tabular/structured task badges.
+
+### Semantic
+- **Success** (`#16a34a`): Build succeeded, deploy live.
+- **Warning** (`#f59e0b`): Slow inference, rate limit.
+- **Error** (`#dc2626`): Failed build, broken model.
+- **Info** (`#2563eb`): Notice banner.
+
+### Border
+- **Border Default** (`#e5e7eb`): Standard 1px hairline.
+- **Border Strong** (`#d1d5db`): Emphasized border on hover.
+- **Border Subtle** (`#f3f4f6`): Inner divider.
+
+## 3. Typography Rules
+
+### Font Family
+- **Display / UI / Headings / Tags**: `IBM Plex Mono`, with fallback: `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
+- **Body / Prose**: `Source Sans Pro`, with fallback: `Inter, system-ui, -apple-system, sans-serif`
+- **Editorial (rare, blog only)**: `Source Serif Pro`, with fallback: `Georgia, serif`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | IBM Plex Mono | 48px (3rem) | 600 | 1.1 | -0.01em | Marketing hero |
+| H1 | IBM Plex Mono | 32px (2rem) | 600 | 1.2 | normal | Page heading, model name |
+| H2 | IBM Plex Mono | 24px (1.5rem) | 600 | 1.25 | normal | Section heading |
+| H3 | IBM Plex Mono | 18px (1.125rem) | 600 | 1.3 | normal | Sub-section |
+| Body Large | Source Sans Pro | 18px (1.125rem) | 400 | 1.6 | normal | Lede, blog intro |
+| Body | Source Sans Pro | 15px (0.9375rem) | 400 | 1.55 | normal | Standard prose, model card |
+| Caption | Source Sans Pro | 13px (0.8125rem) | 500 | 1.4 | 0.01em | Author byline, timestamp |
+| Tag / Badge | IBM Plex Mono | 12px (0.75rem) | 500 | 1.2 | 0.02em | Task tags, framework chips |
+| Code | IBM Plex Mono | 14px (0.875rem) | 400 | 1.55 | normal | Code blocks, inline `model_id` |
+
+### Principles
+- **Mono everywhere it matters**: nav links, headings, tags, and metadata are all monospaced. Sans is reserved for paragraphs of prose.
+- **Weight under 600**: 600 is the cap; 700 is too loud against yellow. Hierarchy is size and color.
+- **Tags read as code**: model tags use mono so they look like the strings developers will paste into Python.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: `#0d1117`
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 6px
+- Hover: `#374151`
+- Use: "Use this model", primary forms.
+
+**Yellow CTA**
+- Background: `#ffd21e`
+- Text: `#0d1117`
+- Padding: 8px 16px
+- Radius: 6px
+- Hover: `#f59e0b`
+- Use: "Pro upgrade", "Sponsor".
+
+**Outline**
+- Background: `#ffffff`
+- Text: `#0d1117`
+- Border: 1px solid `#e5e7eb`
+- Hover: background `#f3f4f6`
+
+### Cards / Model Cards
+- Background: `#ffffff`
+- Border: 1px solid `#e5e7eb`
+- Radius: 6px
+- Padding: 16px 20px
+- Header strip: `#ffd21e` background, 4px tall, only on featured model cards.
+
+### Inputs
+- Background: `#ffffff`
+- Border: 1px solid `#e5e7eb`
+- Radius: 6px
+- Padding: 8px 12px
+- Focus: border `#0d1117`, ring `0 0 0 3px rgba(13,17,23,0.1)`
+
+### Tags / Chips (Task / Framework)
+- Background: category-tinted soft (`#dbeafe` for NLP, `#dcfce7` for vision, etc.)
+- Text: matching strong category color.
+- Padding: 2px 8px
+- Radius: 4px
+- Font: IBM Plex Mono 12px / 500
+
+### Tables
+- Header: background `#fafafa`, border-bottom 1px `#e5e7eb`.
+- Row: border-bottom 1px `#f3f4f6`, hover `#f3f4f6`.
+- Padding: 8px 16px per cell — dense by design.
+
+## 5. Spacing & Layout
+
+- **Base unit**: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64.
+- **Container**: max 1280px, 24px gutter.
+- **Sidebar (model browser)**: 280px wide.
+- **Section rhythm**: 64–96px vertical between major sections.
+
+## 6. Motion
+
+- **Duration**: 120ms for hover; 200ms for menu open.
+- **Easing**: `ease-out`.
+- **Tag pop**: a 1.05× scale on hover at 120ms — the only exception to flat-on-hover.

vibn-frontend/lib/scaffold/open-design/design-systems/ibm/DESIGN.md

@@ -0,0 +1,335 @@
+# Design System Inspired by IBM
+
+> Category: Media & Consumer
+> Enterprise technology. Carbon design system, structured blue palette.
+
+## 1. Visual Theme & Atmosphere
+
+IBM's website is the digital embodiment of enterprise authority built on the Carbon Design System — a design language so methodically structured it reads like an engineering specification rendered as a webpage. The page operates on a stark duality: a bright white (`#ffffff`) canvas with near-black (`#161616`) text, punctuated by a single, unwavering accent — IBM Blue 60 (`#0f62fe`). This isn't playful tech-startup minimalism; it's corporate precision distilled into pixels. Every element exists within Carbon's rigid 2x grid, every color maps to a semantic token, every spacing value snaps to the 8px base unit.
+
+The IBM Plex type family is the system's backbone. IBM Plex Sans at light weight (300) for display headlines creates an unexpectedly airy, almost delicate quality at large sizes — a deliberate counterpoint to IBM's corporate gravity. At body sizes, regular weight (400) with 0.16px letter-spacing on 14px captions introduces the meticulous micro-tracking that makes Carbon text feel engineered rather than designed. IBM Plex Mono serves code, data, and technical labels, completing the family trinity alongside the rarely-surfaced IBM Plex Serif.
+
+What defines IBM's visual identity beyond monochrome-plus-blue is the reliance on Carbon's component token system. Every interactive state maps to a CSS custom property prefixed with `--cds-` (Carbon Design System). Buttons don't have hardcoded colors; they reference `--cds-button-primary`, `--cds-button-primary-hover`, `--cds-button-primary-active`. This tokenized architecture means the entire visual layer is a thin skin over a deeply systematic foundation — the design equivalent of a well-typed API.
+
+**Key Characteristics:**
+- IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint
+- IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes
+- Single accent color: IBM Blue 60 (`#0f62fe`) — every interactive element, every CTA, every link
+- Carbon token system (`--cds-*`) driving all semantic colors, enabling theme-switching at the variable level
+- 8px spacing grid with strict adherence — no arbitrary values, everything aligns
+- Flat, borderless cards on `#f4f4f4` Gray 10 surface — depth through background-color layering, not shadows
+- Bottom-border inputs (not boxed) — the signature Carbon form pattern
+- 0px border-radius on primary buttons — unapologetically rectangular, no softening
+
+## 2. Color Palette & Roles
+
+### Primary
+- **IBM Blue 60** (`#0f62fe`): The singular interactive color. Primary buttons, links, focus states, active indicators. This is the only chromatic hue in the core UI palette.
+- **White** (`#ffffff`): Page background, card surfaces, button text on blue, `--cds-background`.
+- **Gray 100** (`#161616`): Primary text, headings, dark surface backgrounds, nav bar, footer. `--cds-text-primary`.
+
+### Neutral Scale (Gray Family)
+- **Gray 100** (`#161616`): Primary text, headings, dark UI chrome, footer background.
+- **Gray 90** (`#262626`): Secondary dark surfaces, hover states on dark backgrounds.
+- **Gray 80** (`#393939`): Tertiary dark, active states.
+- **Gray 70** (`#525252`): Secondary text, helper text, descriptions. `--cds-text-secondary`.
+- **Gray 60** (`#6f6f6f`): Placeholder text, disabled text.
+- **Gray 50** (`#8d8d8d`): Disabled icons, muted labels.
+- **Gray 30** (`#c6c6c6`): Borders, divider lines, input bottom-borders. `--cds-border-subtle`.
+- **Gray 20** (`#e0e0e0`): Subtle borders, card outlines.
+- **Gray 10** (`#f4f4f4`): Secondary surface background, card fills, alternating rows. `--cds-layer-01`.
+- **Gray 10 Hover** (`#e8e8e8`): Hover state for Gray 10 surfaces.
+
+### Interactive
+- **Blue 60** (`#0f62fe`): Primary interactive — buttons, links, focus. `--cds-link-primary`, `--cds-button-primary`.
+- **Blue 70** (`#0043ce`): Link hover state. `--cds-link-primary-hover`.
+- **Blue 80** (`#002d9c`): Active/pressed state for blue elements.
+- **Blue 10** (`#edf5ff`): Blue tint surface, selected row background.
+- **Focus Blue** (`#0f62fe`): `--cds-focus` — 2px inset border on focused elements.
+- **Focus Inset** (`#ffffff`): `--cds-focus-inset` — white inner ring for focus on dark backgrounds.
+
+### Support & Status
+- **Red 60** (`#da1e28`): Error, danger. `--cds-support-error`.
+- **Green 50** (`#24a148`): Success. `--cds-support-success`.
+- **Yellow 30** (`#f1c21b`): Warning. `--cds-support-warning`.
+- **Blue 60** (`#0f62fe`): Informational. `--cds-support-info`.
+
+### Dark Theme (Gray 100 Theme)
+- **Background**: Gray 100 (`#161616`). `--cds-background`.
+- **Layer 01**: Gray 90 (`#262626`). Card and container surfaces.
+- **Layer 02**: Gray 80 (`#393939`). Elevated surfaces.
+- **Text Primary**: Gray 10 (`#f4f4f4`). `--cds-text-primary`.
+- **Text Secondary**: Gray 30 (`#c6c6c6`). `--cds-text-secondary`.
+- **Border Subtle**: Gray 80 (`#393939`). `--cds-border-subtle`.
+- **Interactive**: Blue 40 (`#78a9ff`). Links and interactive elements shift lighter for contrast.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `IBM Plex Sans`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
+- **Monospace**: `IBM Plex Mono`, with fallbacks: `Menlo, Courier, monospace`
+- **Serif** (limited use): `IBM Plex Serif`, for editorial/expressive contexts
+- **Icon Font**: `ibm_icons` — proprietary icon glyphs at 20px
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display 01 | IBM Plex Sans | 60px (3.75rem) | 300 (Light) | 1.17 (70px) | 0 | Maximum impact, light weight for elegance |
+| Display 02 | IBM Plex Sans | 48px (3.00rem) | 300 (Light) | 1.17 (56px) | 0 | Secondary hero, responsive fallback |
+| Heading 01 | IBM Plex Sans | 42px (2.63rem) | 300 (Light) | 1.19 (50px) | 0 | Expressive heading |
+| Heading 02 | IBM Plex Sans | 32px (2.00rem) | 400 (Regular) | 1.25 (40px) | 0 | Section headings |
+| Heading 03 | IBM Plex Sans | 24px (1.50rem) | 400 (Regular) | 1.33 (32px) | 0 | Sub-section titles |
+| Heading 04 | IBM Plex Sans | 20px (1.25rem) | 600 (Semibold) | 1.40 (28px) | 0 | Card titles, feature headers |
+| Heading 05 | IBM Plex Sans | 20px (1.25rem) | 400 (Regular) | 1.40 (28px) | 0 | Lighter card headings |
+| Body Long 01 | IBM Plex Sans | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Standard reading text |
+| Body Long 02 | IBM Plex Sans | 16px (1.00rem) | 600 (Semibold) | 1.50 (24px) | 0 | Emphasized body, labels |
+| Body Short 01 | IBM Plex Sans | 14px (0.88rem) | 400 (Regular) | 1.29 (18px) | 0.16px | Compact body, captions |
+| Body Short 02 | IBM Plex Sans | 14px (0.88rem) | 600 (Semibold) | 1.29 (18px) | 0.16px | Bold captions, nav items |
+| Caption 01 | IBM Plex Sans | 12px (0.75rem) | 400 (Regular) | 1.33 (16px) | 0.32px | Metadata, timestamps |
+| Code 01 | IBM Plex Mono | 14px (0.88rem) | 400 (Regular) | 1.43 (20px) | 0.16px | Inline code, terminal |
+| Code 02 | IBM Plex Mono | 16px (1.00rem) | 400 (Regular) | 1.50 (24px) | 0 | Code blocks |
+| Mono Display | IBM Plex Mono | 42px (2.63rem) | 400 (Regular) | 1.19 (50px) | 0 | Hero mono decorative |
+
+### Principles
+- **Light weight at display sizes**: Carbon's expressive type set uses weight 300 (Light) at 42px+. This creates a distinctive tension — the content speaks with corporate authority while the letterforms whisper with typographic lightness.
+- **Micro-tracking at small sizes**: 0.16px letter-spacing at 14px and 0.32px at 12px. These seemingly negligible values are Carbon's secret weapon for readability at compact sizes — they open up the tight IBM Plex letterforms just enough.
+- **Three functional weights**: 300 (display/expressive), 400 (body/reading), 600 (emphasis/UI labels). Weight 700 is intentionally absent from the production type scale.
+- **Productive vs. Expressive**: Productive sets use tighter line-heights (1.29) for dense UI. Expressive sets breathe more (1.40-1.50) for marketing and editorial content.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Button (Blue)**
+- Background: `#0f62fe` (Blue 60) → `--cds-button-primary`
+- Text: `#ffffff` (White)
+- Padding: 14px 63px 14px 15px (asymmetric — room for trailing icon)
+- Border: 1px solid transparent
+- Border-radius: 0px (sharp rectangle — the Carbon signature)
+- Height: 48px (default), 40px (compact), 64px (expressive)
+- Hover: `#0353e9` (Blue 60 Hover) → `--cds-button-primary-hover`
+- Active: `#002d9c` (Blue 80) → `--cds-button-primary-active`
+- Focus: `2px solid #0f62fe` inset + `1px solid #ffffff` inner
+
+**Secondary Button (Gray)**
+- Background: `#393939` (Gray 80)
+- Text: `#ffffff`
+- Hover: `#4c4c4c` (Gray 70)
+- Active: `#6f6f6f` (Gray 60)
+- Same padding/radius as primary
+
+**Tertiary Button (Ghost Blue)**
+- Background: transparent
+- Text: `#0f62fe` (Blue 60)
+- Border: 1px solid `#0f62fe`
+- Hover: `#0353e9` text + Blue 10 background tint
+- Border-radius: 0px
+
+**Ghost Button**
+- Background: transparent
+- Text: `#0f62fe` (Blue 60)
+- Padding: 14px 16px
+- Border: none
+- Hover: `#e8e8e8` background tint
+
+**Danger Button**
+- Background: `#da1e28` (Red 60)
+- Text: `#ffffff`
+- Hover: `#b81921` (Red 70)
+
+### Cards & Containers
+- Background: `#ffffff` on white theme, `#f4f4f4` (Gray 10) for elevated cards
+- Border: none (flat design — no border or shadow on most cards)
+- Border-radius: 0px (matching the rectangular button aesthetic)
+- Hover: background shifts to `#e8e8e8` (Gray 10 Hover) for clickable cards
+- Content padding: 16px
+- Separation: background-color layering (white → gray 10 → white) rather than shadows
+
+### Inputs & Forms
+- Background: `#f4f4f4` (Gray 10) — `--cds-field`
+- Text: `#161616` (Gray 100)
+- Padding: 0px 16px (horizontal only)
+- Height: 40px (default), 48px (large)
+- Border: none on sides/top — `2px solid transparent` bottom
+- Bottom-border active: `2px solid #161616` (Gray 100)
+- Focus: `2px solid #0f62fe` (Blue 60) bottom-border — `--cds-focus`
+- Error: `2px solid #da1e28` (Red 60) bottom-border
+- Label: 12px IBM Plex Sans, 0.32px letter-spacing, Gray 70
+- Helper text: 12px, Gray 60
+- Placeholder: Gray 60 (`#6f6f6f`)
+- Border-radius: 0px (top) — inputs are sharp-cornered
+
+### Navigation
+- Background: `#161616` (Gray 100) — full-width dark masthead
+- Height: 48px
+- Logo: IBM 8-bar logo, white on dark, left-aligned
+- Links: 14px IBM Plex Sans, weight 400, `#c6c6c6` (Gray 30) default
+- Link hover: `#ffffff` text
+- Active link: `#ffffff` with bottom-border indicator
+- Platform switcher: left-aligned horizontal tabs
+- Search: icon-triggered slide-out search field
+- Mobile: hamburger with left-sliding panel
+
+### Links
+- Default: `#0f62fe` (Blue 60) with no underline
+- Hover: `#0043ce` (Blue 70) with underline
+- Visited: remains Blue 60 (no visited state change)
+- Inline links: underlined by default in body copy
+
+### Distinctive Components
+
+**Content Block (Hero/Feature)**
+- Full-width alternating white/gray-10 background bands
+- Headline left-aligned with 60px or 48px display type
+- CTA as blue primary button with arrow icon
+- Image/illustration right-aligned or below on mobile
+
+**Tile (Clickable Card)**
+- Background: `#f4f4f4` or `#ffffff`
+- Full-width bottom-border or background-shift hover
+- Arrow icon bottom-right on hover
+- No shadow — flatness is the identity
+
+**Tag / Label**
+- Background: contextual color at 10% opacity (e.g., Blue 10, Red 10)
+- Text: corresponding 60-grade color
+- Padding: 4px 8px
+- Border-radius: 24px (pill — exception to the 0px rule)
+- Font: 12px weight 400
+
+**Notification Banner**
+- Full-width bar, typically Blue 60 or Gray 100 background
+- White text, 14px
+- Close/dismiss icon right-aligned
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px (Carbon 2x grid)
+- Component spacing scale: 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px
+- Layout spacing scale: 16px, 24px, 32px, 48px, 64px, 80px, 96px, 160px
+- Mini unit: 8px (smallest usable spacing)
+- Padding within components: typically 16px
+- Gap between cards/tiles: 1px (hairline) or 16px (standard)
+
+### Grid & Container
+- 16-column grid (Carbon's 2x grid system)
+- Max content width: 1584px (max breakpoint)
+- Column gutters: 32px (16px on mobile)
+- Margin: 16px (mobile), 32px (tablet+)
+- Content typically spans 8-12 columns for readable line lengths
+- Full-bleed sections alternate with contained content
+
+### Whitespace Philosophy
+- **Functional density**: Carbon favors productive density over expansive whitespace. Sections are tightly packed compared to consumer design systems — this reflects IBM's enterprise DNA.
+- **Background-color zoning**: Instead of massive padding between sections, IBM uses alternating background colors (white → gray 10 → white) to create visual separation with minimal vertical space.
+- **Consistent 48px rhythm**: Major section transitions use 48px vertical spacing. Hero sections may use 80px–96px.
+
+### Border Radius Scale
+- **0px**: Primary buttons, inputs, tiles, cards — the dominant treatment. Carbon is fundamentally rectangular.
+- **2px**: Occasionally on small interactive elements (tags)
+- **24px**: Tags/labels (pill shape — the sole rounded exception)
+- **50%**: Avatar circles, icon containers
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, `#ffffff` background | Default page surface |
+| Layer 01 | No shadow, `#f4f4f4` background | Cards, tiles, alternating sections |
+| Layer 02 | No shadow, `#e0e0e0` background | Elevated panels within Layer 01 |
+| Raised | `0 2px 6px rgba(0,0,0,0.3)` | Dropdowns, tooltips, overflow menus |
+| Overlay | `0 2px 6px rgba(0,0,0,0.3)` + dark scrim | Modal dialogs, side panels |
+| Focus | `2px solid #0f62fe` inset + `1px solid #ffffff` | Keyboard focus ring |
+| Bottom-border | `2px solid #161616` on bottom edge | Active input, active tab indicator |
+
+**Shadow Philosophy**: Carbon is deliberately shadow-averse. IBM achieves depth primarily through background-color layering — stacking surfaces of progressively darker grays rather than adding box-shadows. This creates a flat, print-inspired aesthetic where hierarchy is communicated through color value, not simulated light. Shadows are reserved exclusively for floating elements (dropdowns, tooltips, modals) where the element genuinely overlaps content. This restraint gives the rare shadow meaningful impact — when something floats in Carbon, it matters.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use IBM Plex Sans at weight 300 for display sizes (42px+) — the lightness is intentional
+- Apply 0.16px letter-spacing on 14px body text and 0.32px on 12px captions
+- Use 0px border-radius on buttons, inputs, cards, and tiles — rectangles are the system
+- Reference `--cds-*` token names when implementing (e.g., `--cds-button-primary`, `--cds-text-primary`)
+- Use background-color layering (white → gray 10 → gray 20) for depth instead of shadows
+- Use bottom-border (not box) for input field indicators
+- Maintain the 48px default button height and asymmetric padding for icon accommodation
+- Apply Blue 60 (`#0f62fe`) as the sole accent — one blue to rule them all
+
+### Don't
+- Don't round button corners — 0px radius is the Carbon identity
+- Don't use shadows on cards or tiles — flatness is the point
+- Don't introduce additional accent colors — IBM's system is monochromatic + blue
+- Don't use weight 700 (Bold) — the scale stops at 600 (Semibold)
+- Don't add letter-spacing to display-size text — tracking is only for 14px and below
+- Don't box inputs with full borders — Carbon inputs use bottom-border only
+- Don't use gradient backgrounds — IBM's surfaces are flat, solid colors
+- Don't deviate from the 8px spacing grid — every value should be divisible by 8 (with 2px and 4px for micro-adjustments)
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Small (sm) | 320px | Single column, hamburger nav, 16px margins |
+| Medium (md) | 672px | 2-column grids begin, expanded content |
+| Large (lg) | 1056px | Full navigation visible, 3-4 column grids |
+| X-Large (xlg) | 1312px | Maximum content density, wide layouts |
+| Max | 1584px | Maximum content width, centered with margins |
+
+### Touch Targets
+- Button height: 48px default, minimum 40px (compact)
+- Navigation links: 48px row height for touch
+- Input height: 40px default, 48px large
+- Icon buttons: 48px square touch target
+- Mobile menu items: full-width 48px rows
+
+### Collapsing Strategy
+- Hero: 60px display → 42px → 32px heading as viewport narrows
+- Navigation: full horizontal masthead → hamburger with slide-out panel
+- Grid: 4-column → 2-column → single column
+- Tiles/cards: horizontal grid → vertical stack
+- Images: maintain aspect ratio, max-width 100%
+- Footer: multi-column link groups → stacked single column
+- Section padding: 48px → 32px → 16px
+
+### Image Behavior
+- Responsive images with `max-width: 100%`
+- Product illustrations scale proportionally
+- Hero images may shift from side-by-side to stacked below
+- Data visualizations maintain aspect ratio with horizontal scroll on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: IBM Blue 60 (`#0f62fe`)
+- Background: White (`#ffffff`)
+- Heading text: Gray 100 (`#161616`)
+- Body text: Gray 100 (`#161616`)
+- Secondary text: Gray 70 (`#525252`)
+- Surface/Card: Gray 10 (`#f4f4f4`)
+- Border: Gray 30 (`#c6c6c6`)
+- Link: Blue 60 (`#0f62fe`)
+- Link hover: Blue 70 (`#0043ce`)
+- Focus ring: Blue 60 (`#0f62fe`)
+- Error: Red 60 (`#da1e28`)
+- Success: Green 50 (`#24a148`)
+
+### Example Component Prompts
+- "Create a hero section on white background. Headline at 60px IBM Plex Sans weight 300, line-height 1.17, color #161616. Subtitle at 16px weight 400, line-height 1.50, color #525252, max-width 640px. Blue CTA button (#0f62fe background, #ffffff text, 0px border-radius, 48px height, 14px 63px 14px 15px padding)."
+- "Design a card tile: #f4f4f4 background, 0px border-radius, 16px padding. Title at 20px IBM Plex Sans weight 600, line-height 1.40, color #161616. Body at 14px weight 400, letter-spacing 0.16px, line-height 1.29, color #525252. Hover: background shifts to #e8e8e8."
+- "Build a form field: #f4f4f4 background, 0px border-radius, 40px height, 16px horizontal padding. Label above at 12px weight 400, letter-spacing 0.32px, color #525252. Bottom-border: 2px solid transparent default, 2px solid #0f62fe on focus. Placeholder: #6f6f6f."
+- "Create a dark navigation bar: #161616 background, 48px height. IBM logo white left-aligned. Links at 14px IBM Plex Sans weight 400, color #c6c6c6. Hover: #ffffff text. Active: #ffffff with 2px bottom border."
+- "Build a tag component: Blue 10 (#edf5ff) background, Blue 60 (#0f62fe) text, 4px 8px padding, 24px border-radius, 12px IBM Plex Sans weight 400."
+
+### Iteration Guide
+1. Always use 0px border-radius on buttons, inputs, and cards — this is non-negotiable in Carbon
+2. Letter-spacing only at small sizes: 0.16px at 14px, 0.32px at 12px — never on display text
+3. Three weights: 300 (display), 400 (body), 600 (emphasis) — no bold
+4. Blue 60 is the only accent color — do not introduce secondary accent hues
+5. Depth comes from background-color layering (white → #f4f4f4 → #e0e0e0), not shadows
+6. Inputs have bottom-border only, never fully boxed
+7. Use `--cds-` prefix for token naming to stay Carbon-compatible
+8. 48px is the universal interactive element height

vibn-frontend/lib/scaffold/open-design/design-systems/intercom/DESIGN.md

@@ -0,0 +1,149 @@
+# Design System Inspired by Intercom
+
+> Category: Productivity & SaaS
+> Customer messaging. Friendly blue palette, conversational UI patterns.
+
+## 1. Visual Theme & Atmosphere
+
+Intercom's website is a warm, confident customer service platform that communicates "AI-first helpdesk" through a clean, editorial design language. The page operates on a warm off-white canvas (`#faf9f6`) with off-black (`#111111`) text, creating an intimate, magazine-like reading experience. The signature Fin Orange (`#ff5600`) — named after Intercom's AI agent — serves as the singular vibrant accent against the warm neutral palette.
+
+The typography uses Saans — a custom geometric sans-serif with aggressive negative letter-spacing (-2.4px at 80px, -0.48px at 24px) and a consistent 1.00 line-height across all heading sizes. This creates ultra-compressed, billboard-like headlines that feel engineered and precise. Serrif provides the serif companion for editorial moments, and SaansMono handles code and uppercase technical labels. MediumLL and LLMedium appear for specific UI contexts, creating a rich five-font ecosystem.
+
+What distinguishes Intercom is its remarkably sharp geometry — 4px border-radius on buttons creates near-rectangular interactive elements that feel industrial and precise, contrasting with the warm surface colors. Button hover states use `scale(1.1)` expansion, creating a physical "growing" interaction. The border system uses warm oat tones (`#dedbd6`) and oklab-based opacity values for sophisticated color management.
+
+**Key Characteristics:**
+- Warm off-white canvas (`#faf9f6`) with oat-toned borders (`#dedbd6`)
+- Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height
+- Fin Orange (`#ff5600`) as singular brand accent
+- Sharp 4px border-radius — near-rectangular buttons and elements
+- Scale(1.1) hover with scale(0.85) active — physical button interaction
+- SaansMono uppercase labels with wide tracking (0.6px–1.2px)
+- Rich multi-color report palette (blue, green, red, pink, lime, orange)
+- oklab color values for sophisticated opacity management
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Off Black** (`#111111`): `--color-off-black`, primary text, button backgrounds
+- **Pure White** (`#ffffff`): `--wsc-color-content-primary`, primary surface
+- **Warm Cream** (`#faf9f6`): Button backgrounds, card surfaces
+- **Fin Orange** (`#ff5600`): `--color-fin`, primary brand accent
+- **Report Orange** (`#fe4c02`): `--color-report-orange`, data visualization
+
+### Report Palette
+- **Report Blue** (`#65b5ff`): `--color-report-blue`
+- **Report Green** (`#0bdf50`): `--color-report-green`
+- **Report Red** (`#c41c1c`): `--color-report-red`
+- **Report Pink** (`#ff2067`): `--color-report-pink`
+- **Report Lime** (`#b3e01c`): `--color-report-lime-300`
+- **Green** (`#00da00`): `--color-green`
+- **Deep Blue** (`#0007cb`): Deep blue accent
+
+### Neutral Scale (Warm)
+- **Black 80** (`#313130`): `--wsc-color-black-80`, dark neutral
+- **Black 60** (`#626260`): `--wsc-color-black-60`, mid neutral
+- **Black 50** (`#7b7b78`): `--wsc-color-black-50`, muted text
+- **Content Tertiary** (`#9c9fa5`): `--wsc-color-content-tertiary`
+- **Oat Border** (`#dedbd6`): Warm border color
+- **Warm Sand** (`#d3cec6`): Light warm neutral
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Saans`, fallbacks: `Saans Fallback, ui-sans-serif, system-ui`
+- **Serif**: `Serrif`, fallbacks: `Serrif Fallback, ui-serif, Georgia`
+- **Monospace**: `SaansMono`, fallbacks: `SaansMono Fallback, ui-monospace`
+- **UI**: `MediumLL` / `LLMedium`, fallbacks: `system-ui, -apple-system`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Saans | 80px | 400 | 1.00 (tight) | -2.4px |
+| Section Heading | Saans | 54px | 400 | 1.00 | -1.6px |
+| Sub-heading | Saans | 40px | 400 | 1.00 | -1.2px |
+| Card Title | Saans | 32px | 400 | 1.00 | -0.96px |
+| Feature Title | Saans | 24px | 400 | 1.00 | -0.48px |
+| Body Emphasis | Saans | 20px | 400 | 0.95 | -0.2px |
+| Nav / UI | Saans | 18px | 400 | 1.00 | normal |
+| Body | Saans | 16px | 400 | 1.50 | normal |
+| Body Light | Saans | 14px | 300 | 1.40 | normal |
+| Button | Saans | 16px / 14px | 400 | 1.50 / 1.43 | normal |
+| Button Bold | LLMedium | 16px | 700 | 1.20 | 0.16px |
+| Serif Body | Serrif | 16px | 300 | 1.40 | -0.16px |
+| Mono Label | SaansMono | 12px | 400–500 | 1.00–1.30 | 0.6px–1.2px uppercase |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark**
+- Background: `#111111`
+- Text: `#ffffff`
+- Padding: 0px 14px
+- Radius: 4px
+- Hover: white background, dark text, scale(1.1)
+- Active: green background (`#2c6415`), scale(0.85)
+
+**Outlined**
+- Background: transparent
+- Text: `#111111`
+- Border: `1px solid #111111`
+- Radius: 4px
+- Same scale hover/active behavior
+
+**Warm Card Button**
+- Background: `#faf9f6`
+- Text: `#111111`
+- Padding: 16px
+- Border: `1px solid oklab(... / 0.1)`
+
+### Cards & Containers
+- Background: `#faf9f6` (warm cream)
+- Border: `1px solid #dedbd6` (warm oat)
+- Radius: 8px
+- No visible shadows
+
+### Navigation
+- Saans 16px for links
+- Off-black text on white
+- Small 4px–6px radius buttons
+- Orange Fin accent for AI features
+
+## 5. Layout Principles
+
+### Spacing: 8px, 10px, 12px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 60px, 64px, 80px, 96px
+### Border Radius: 4px (buttons), 6px (nav items), 8px (cards, containers)
+
+## 6. Depth & Elevation
+Minimal shadows. Depth through warm border colors and surface tints.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Saans with 1.00 line-height and negative tracking on all headings
+- Apply 4px radius on buttons — sharp geometry is the identity
+- Use Fin Orange (#ff5600) for AI/brand accent only
+- Apply scale(1.1) hover on buttons
+- Use warm neutrals (#faf9f6, #dedbd6)
+
+### Don't
+- Don't round buttons beyond 4px
+- Don't use Fin Orange decoratively
+- Don't use cool gray borders — always warm oat tones
+- Don't skip the negative tracking on headings
+
+## 8. Responsive Behavior
+Breakpoints: 425px, 530px, 600px, 640px, 768px, 896px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Text: Off Black (`#111111`)
+- Background: Warm Cream (`#faf9f6`)
+- Accent: Fin Orange (`#ff5600`)
+- Border: Oat (`#dedbd6`)
+- Muted: `#7b7b78`
+
+### Example Component Prompts
+- "Create hero: warm cream (#faf9f6) background. Saans 80px weight 400, line-height 1.00, letter-spacing -2.4px, #111111. Dark button (#111111, 4px radius). Hover: scale(1.1), white bg."

vibn-frontend/lib/scaffold/open-design/design-systems/kami/DESIGN.md

@@ -0,0 +1,410 @@
+# Design System Inspired by kami (紙 / 纸)
+
+> Category: Editorial & Print
+> Editorial paper system: warm parchment canvas, ink-blue accent, serif-led hierarchy. Built for resumes, one-pagers, white papers, portfolios, slide decks — anything that should feel like high-quality print rather than UI. Multilingual by design (EN · zh-CN · ja).
+
+## 1. Visual Theme & Atmosphere
+
+kami compresses into one sentence: **warm parchment canvas, ink-blue accent, serif carries hierarchy, no cool grays, no hard shadows.** It is not a UI framework — it is a constraint system for the page, designed to keep deliverables stable, clear, and unmistakably *printed*. The name reads as **kami / 紙 / 纸** — the same word for "paper" across Japanese and Chinese — and the system is co-designed across English, Simplified Chinese, and Japanese typesetting from the ground up, not retrofitted.
+
+The page background is parchment (`#f5f4ed`), never pure white. Text sits on cream. The single chromatic move is ink-blue (`#1B365D`) — used on section numbers, primary CTAs, the left rule of a quote, the W500 weight in a metric. Everything else is a warm neutral with a yellow-brown undertone; cool blue-grays are absent on purpose.
+
+Hierarchy is carried almost entirely by **serif type at a single weight (500)**. There is no bold, no italic, no second accent color. Density is achieved through tight line-heights (1.10–1.55), four-level gray ramps, and ring/whisper shadows that act as halos rather than drops. The aesthetic borrows from editorial print, technical white papers, and old typewritten correspondence — the goal is "good content on good paper," not "modern app UI."
+
+**Key Characteristics:**
+- Warm parchment canvas (`#f5f4ed`) — never `#ffffff`
+- Single accent: ink-blue (`#1B365D`), covers ≤ 5% of any surface
+- All grays warm (R ≈ G > B), no cool blue-grays anywhere
+- Serif everywhere for hierarchy: Charter (EN), TsangerJinKai02 / Source Han Serif (CN), YuMincho (JA)
+- Locked at weight 500 — no synthetic bold (700/900) and **no italic**
+- Tight print rhythm (line-heights 1.10–1.55), much denser than typical web body
+- Depth via 1px rings and whisper shadows (`0 4px 24px rgba(0,0,0,0.05)`), never hard drop shadows
+- Tag fills are solid hex (e.g. `#E4ECF5`), never `rgba()` — print renderers double-paint alpha tags
+- Numbers sit in `font-variant-numeric: tabular-nums` so columns of metrics don't shimmy
+
+## 2. Color Palette & Roles
+
+### Brand
+- **Ink Blue** (`#1B365D`): The only chromatic color. CTAs, section numbers, link text on light surfaces, the left rule on a section title or quote, the active state of a switcher, the W500 metric value.
+- **Ink Light** (`#2D5A8A`): Brighter variant, only for links sitting on dark surfaces.
+
+> Rule: ink-blue covers ≤ **5% of document surface area**. More than that turns into ornament and the restraint collapses.
+
+### Surface
+- **Parchment** (`#f5f4ed`): The page background — warm cream, the emotional foundation. Never replace with white.
+- **Ivory** (`#faf9f5`): Cards and lifted containers. Sits one half-shade brighter than parchment.
+- **Warm Sand** (`#e8e6dc`): Default button background, secondary interactive surfaces.
+- **Dark Surface** (`#30302e`): Dark-theme containers — warm charcoal, not slate.
+- **Deep Dark** (`#141413`): Dark-theme page background. Olive-tinted near-black, never `#000000`.
+
+### Text (four levels — no fifth)
+- **Near Black** (`#141413`): Primary text. Slight olive warmth, gentler than pure black.
+- **Dark Warm** (`#3d3d3a`): Secondary text, table headers, link defaults.
+- **Olive** (`#504e49`): Subtext, captions, descriptions. (JA override: `#4d4c48` because YuMincho strokes are thinner.)
+- **Stone** (`#6b6a64`): Tertiary — dates, metadata, meta labels.
+
+### Border
+- **Border** (`#e8e6dc`): Primary border — section dividers, card edges, table headers.
+- **Border Soft** (`#e5e3d8`): Row separators, inner dividers, subtle internal lines.
+
+### Tag tints (solid, NOT rgba)
+Print renderers (WeasyPrint and friends) double-paint alpha fills, leaving a visible "double rectangle" on zoom. Tag and chip backgrounds must be solid hex, pre-blended over parchment:
+
+| Effective alpha of `#1B365D` over parchment | Solid hex |
+|---|---|
+| 0.08 | `#EEF2F7` |
+| 0.14 | `#E4ECF5` |
+| **0.18 (default tag)** | **`#E4ECF5`** |
+| 0.22 | `#D0DCE9` |
+| 0.30 | `#D6E1EE` |
+
+### Gradient System
+kami is **gradient-free** by default. The only sanctioned gradient is the soft tag brush running `#D6E1EE → #E4ECF5 → #EEF2F7` left-to-right at very low contrast — used at most once per page on a single decorative tag. Do not introduce hero gradients, brand-color washes, or backdrop-filter blurs.
+
+### Forbidden colors
+- `#ffffff` as a page background
+- `#000000` anywhere
+- Any cool-gray surface (`#f8f9fa`, `#f3f4f6`, `slate-*`)
+- Any second saturated color (no second accent — pick ink-blue or pick nothing)
+
+## 3. Typography Rules
+
+### Font Stacks
+
+```css
+/* English (default) */
+--serif: Charter, Georgia, Palatino, "Times New Roman", serif;
+
+/* Chinese */
+--serif: "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
+         "Songti SC", "STSong", Georgia, serif;
+
+/* Japanese */
+--serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
+         "Noto Serif CJK JP", "Source Han Serif JP",
+         "TsangerJinKai02", Georgia, serif;
+
+/* Mono — must include CJK fallback so labels/comments don't render as boxes */
+--mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
+        "TsangerJinKai02", "Source Han Serif SC", monospace;
+
+/* Sans always equals serif. There is no separate sans-serif family. */
+--sans: var(--serif);
+```
+
+### When to swap the stack
+
+The three stacks above are **alternative values for `--serif`**, not three families layered together. When generating an artifact, set the primary stack on `:root` based on the dominant language of the content; let the browser's per-glyph fallback resolve mixed-script text inline. Concretely:
+
+- `<html lang="en">` (or English-dominant content) → leave `--serif` on the EN stack. CJK glyphs that appear inline will fall through to the system Han fallback.
+- `<html lang="zh-CN">` → override `--serif` to the CN stack on `:root` or on `html[lang="zh-CN"]`. Latin glyphs render via the Georgia tail of the stack.
+- `<html lang="ja">` → override `--serif` to the JA stack and apply the `--olive: #4d4c48` text-color override (YuMincho strokes are thinner; the standard olive looks anemic against parchment).
+- Multi-language artifacts (e.g. a deck with one Japanese chapter): set the dominant-language stack on `:root`, then scope the override on a wrapper element (`section[lang="ja"] { --serif: …; }`). Do **not** chain all three families inside a single `font-family` — that dilutes the visual character of every page.
+
+### Hierarchy (screen, px)
+
+The hierarchy table below is sized for **screen-rendered web pages** (resume, one-pager, portfolio shown at desktop width). For other surfaces, scale from the print pt baseline using these ratios — the same rules the kami `slides.py` template applies:
+
+| Surface | Macro tokens (font, padding) | Micro tokens (border, radius, tracking) |
+|---|---|---|
+| Page / web artifact (one-pager, resume, white paper) | print pt × ~1.33 | print pt × 1 |
+| Slide / 1920×1080 deck | print pt × ~1.6 | print pt × ~0.6 |
+
+Concretely: a 22pt H1 in print becomes ~29px on a web page and ~36px on a slide; an 8pt letter-spacing value that reads as confident in print drops to ~5px on a slide. Letter-spacing always uses the slide micro ratio — print tracking applied at slide scale falls apart.
+
+| Role | Family | Size | Weight | Line-height | Letter-spacing | Notes |
+|------|--------|------|--------|-------------|----------------|-------|
+| Hero / Display | serif | 96–106px | 500 | 1.05–1.10 | -1.2px | One per page max — cover or one-pager hero |
+| Display CN/JA | serif | 48–64px | 500 | 1.10–1.12 | 0–0.3px | CJK glyphs need looser tracking and smaller absolute size |
+| Section title | serif | 28–32px | 500 | 1.20 | 0.4px | Anchors a chapter; preceded by section number |
+| H2 | serif | 22px | 500 | 1.25 | 0 | Subsection |
+| H3 | serif | 17–18px | 500 | 1.30 | 0 | Item title, card heading |
+| Manifesto / pull quote | serif | 20px | 400 | 1.65 | 0.05em | The one place letter-spacing earns its keep |
+| Lede | serif | 15–16px | 500 | 1.55 | 0 | Intro paragraph under a section title |
+| Body | serif | 14px | 400 | 1.55 | 0 (EN) · 0.35px (CN) · 0.02em (JA) | Reading body |
+| Body dense | serif | 13–14px | 400 | 1.40–1.45 | 0 | Resume, one-pager, dense lists |
+| Caption | serif | 12px | 500 | 1.45 | 0 | Notes, figure captions |
+| Eyebrow / overline | sans | 12px | 500 | 1 | 1.2px, **uppercase** | Section eyebrow, switcher, meta header |
+| Label | sans | 12px | 500 | 1.35 | 0.4px, uppercase | Small inline label, ink-blue if active |
+| Mono / spec | mono | 12–13px | 400 | 1.55 | 0.4px | Hex codes, type specs, code |
+
+### Weight rules
+- Serif uses **only weights 400 and 500**. No 600, no 700, no 900.
+- `strong { font-weight: 500 }` is explicitly set so browsers don't synthesize bold.
+- Sans labels may use 500 or 600 at small sizes for legibility.
+- **No italic anywhere.** No `font-style: italic`. If emphasis is needed, switch the color to ink-blue or wrap in a tag.
+
+### Line-height
+- Tight headline: 1.10–1.30 (display, H1, H2)
+- Dense body: 1.40–1.45 (resume, one-pager, dense lists)
+- Reading body: 1.50–1.55 (long-form chapters, letters)
+- Label / caption: 1.30–1.40
+
+Forbidden: 1.6+ (web rhythm, floats off the page) and 1.0–1.05 (lines collide except at giant display sizes).
+
+### Letter-spacing
+- EN body: `0`
+- CN body (TsangerJinKai02): `0.35px` to compensate for the font's natural density
+- JA body: `0.02em`
+- All-caps overlines and small labels (< 10pt): +0.5 to +1.2px is mandatory
+- Display CJK at 24px+: `0.2–1px` of optical breathing room
+- On slides, tracking is roughly **half** of print values — 8px tracking that reads as confident in a printed deck disintegrates at slide scale.
+
+### Tabular-nums contexts
+
+`font-variant-numeric: tabular-nums` is mandatory anywhere kami numbers stack vertically or sit alongside other numbers — uneven proportional digits read as a layout bug at print resolution. Apply it to:
+
+- Metric values (the big ink-blue number in `.metric-value`) and any side-by-side metric row
+- Slide footers and slide counters (`02 / 05`), page numbers, deck pagination
+- Section numbers in chapter heads (`01`, `02`, …) when they appear in a stacked TOC
+- Resume dates, employment ranges, and education years
+- Financial figures: revenue, ARR/MRR, valuations, tables of P&L line items
+- White-paper and equity-report data tables (every numeric column)
+- Stat-dashboard hero numbers and KPI grids
+- Changelog version numbers (`1.4.2 → 1.4.3`) and any inline release dates
+- Any inline numeric span inside a paragraph that compares values (`from 142 to 168`)
+
+Do **not** apply tabular-nums to running prose where a single number appears mid-sentence — proportional digits read better there. The rule is "stacks and tables, yes; sentences, no."
+
+## 4. Component Stylings
+
+### Cards / Containers
+```css
+background: var(--ivory);             /* never parchment — cards lift one shade */
+border: 1px solid var(--border);
+border-radius: 8px;                   /* default; featured cards 12px; hero 16–24px */
+padding: 28px 28px 24px;              /* component interior */
+transition: box-shadow 0.2s;
+/* Hover lifts via whisper shadow only — no transform, no brightness shift */
+&:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
+```
+
+### Buttons
+```css
+.btn-primary {
+  background: var(--brand);                    /* #1B365D */
+  color: var(--ivory);
+  box-shadow: 0 0 0 1px var(--brand);          /* ring shadow as edge */
+  padding: 8px 14px;
+  border-radius: 8px;
+  font: 500 12px/1 var(--sans);
+  letter-spacing: 0.4px;
+}
+.btn-secondary {
+  background: var(--warm-sand);
+  color: var(--dark-warm);
+  box-shadow: 0 0 0 1px var(--border);
+}
+.btn-ghost {
+  background: transparent;
+  color: var(--brand);
+  box-shadow: 0 0 0 1px var(--brand);
+}
+```
+
+### Tags / Chips
+```css
+.tag {
+  font: 500 12px/1 var(--sans);
+  padding: 2px 7px;
+  border-radius: 2px;
+  color: var(--brand);
+  background: #EEF2F7;        /* solid hex, NOT rgba */
+  letter-spacing: 0.4px;
+}
+.tag.standard { background: #E4ECF5; padding: 2px 8px; border-radius: 4px; }
+
+/* The single sanctioned gradient — see §2 "Gradient System".
+ * Use at most once per page on a "featured" or "new" tag. The gradient
+ * runs darkest-to-lightest left-to-right so the eye reads it as a
+ * watercolor wash, not a button highlight. */
+.tag.brush {
+  background: linear-gradient(to right, #D6E1EE, #E4ECF5 70%, #EEF2F7);
+}
+```
+
+```html
+<!-- Example: a single brush tag flagging the new chapter in a long doc -->
+<span class="tag brush">New · Edition 02</span>
+```
+
+### Quote
+```css
+.quote {
+  border-left: 2px solid var(--brand);
+  padding: 4px 0 4px 14px;
+  font: 500 15px/1.55 var(--serif);
+  color: var(--olive);
+}
+```
+
+### Section title pattern
+```html
+<div class="section-head">
+  <p class="section-num">01</p>            <!-- ink-blue, 14px serif, tracking 0.4px -->
+  <h2 class="section-title">Color</h2>     <!-- 32px serif 500 -->
+  <p class="section-lede">Optional one-line description in olive.</p>
+</div>
+```
+The number is set in the same serif as the title, in ink-blue, the same size as caption text. There is no underline, no left bar, no eyebrow — the number *is* the marker.
+
+### Metrics
+```html
+<div class="metric">
+  <div class="metric-value">8.4×</div>     <!-- serif 500 24px ink-blue, tabular-nums -->
+  <div class="metric-label">faster ship</div> <!-- serif 12px olive -->
+</div>
+```
+Numbers always sit in `font-variant-numeric: tabular-nums` so adjacent metrics align.
+
+### Lists
+```css
+ul.dash {
+  list-style: none; padding: 0;
+}
+ul.dash li {
+  position: relative; padding-left: 14px;
+}
+ul.dash li::before {
+  content: "\2013";          /* en-dash, ink-blue */
+  position: absolute; left: 0;
+  color: var(--brand);
+}
+```
+Bullets are en-dashes in ink-blue, never filled discs.
+
+### Code block
+```css
+.code {
+  background: var(--ivory);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px 14px;
+  font: 12px/1.55 var(--mono);
+  color: var(--near-black);
+  white-space: pre;
+}
+.code .k { color: var(--brand); }   /* keyword */
+.code .c { color: var(--stone); }   /* comment */
+```
+
+## 5. Layout Principles
+
+### Page geometry (print A4)
+
+| Document | Top | Right | Bottom | Left |
+|---|---|---|---|---|
+| Resume (dense) | 11mm | 13mm | 11mm | 13mm |
+| One-Pager | 15mm | 18mm | 15mm | 18mm |
+| Long Doc | 20mm | 22mm | 22mm | 22mm |
+| Letter | 25mm | 25mm | 25mm | 25mm |
+| Portfolio | 12mm | 15mm | 12mm | 15mm |
+
+Rule: **denser = smaller margins, more formal = larger margins.**
+
+### Web / screen pages
+- Max content width: `1120px`, centered, with `padding: 88px 64px 120px` on desktop.
+- Section gap: `72px` between top-level sections.
+- Card-grid columns: 2 by default at desktop; collapse to 1 below 768px.
+- Table columns sized in absolute px (not %), so kami tables don't reflow into spaghetti.
+
+### Slides (1920×1080)
+- Four-side padding baseline: `--slide-pad: 80px`.
+- Padding-top of a content slide: 72–80px (print is 96–120px; slides are more compact).
+- Sizing follows the surface ratios from §3 ("Hierarchy"): macro tokens × 1.6, micro tokens × 0.6 against the print pt baseline.
+- Cover and chapter slides may flip background to ink-blue (`#1B365D`) with ivory text; everything else stays on parchment.
+
+## 6. Depth & Elevation
+
+Three sanctioned levels — that is the entire system:
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (0) | No shadow, no border | Body text, manifesto, paragraphs on parchment |
+| Ring (1) | `1px solid var(--border)` or `0 0 0 1px var(--brand)` | Cards, primary buttons, table edges |
+| Whisper (2) | `0 4px 24px rgba(0,0,0,0.05)` | Hovered cards, lifted hero containers, screenshots |
+
+Forbidden:
+- Hard drop shadows (`0 12px 40px rgba(0,0,0,0.25)` and the like) — the page is paper, not a UI panel
+- Neumorphism, glassmorphism, backdrop-filter blurs
+- Multi-layer composite shadows
+
+### Border radius scale
+`2px → 4px → 6px → 8px (default) → 12px → 16px`. Tags hover at 2–4px, buttons and cards at 8px, featured / hero containers at 12–16px. Anything above 16px is reserved for cover-slide visuals.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use parchment (`#f5f4ed`) as the page background — the warm cream tone *is* the kami personality.
+- Use a single serif weight (500) for every heading; let size carry hierarchy.
+- Use ink-blue (`#1B365D`) only for primary CTAs, section numbers, links, the left rule of a quote, and the W500 in metrics.
+- Keep every gray warm (yellow-brown undertone). When in doubt, sample with `R ≈ G > B`.
+- Use ring shadows or whisper shadows for elevation; never hard drops.
+- Set tag backgrounds as solid hex pre-blended over parchment, never `rgba()`.
+- Set numbers in `font-variant-numeric: tabular-nums`.
+- Pair the section number with the section title in the same serif — no eyebrow needed.
+- Default bullets to ink-blue en-dashes (`–`).
+
+### Don't
+- Don't use `#ffffff` as page background, anywhere.
+- Don't introduce a second accent color or a chromatic gradient.
+- Don't use cool blue-grays (`slate-*`, `#f3f4f6`, `#6b7280`). Every neutral is warm.
+- Don't use bold (700+) on serif — weight 500 is the ceiling.
+- **Don't use italic anywhere.** No `font-style: italic`. Swap to ink-blue or a tag instead.
+- Don't use sans-serif for headlines or body — sans is reserved for eyebrows, switchers, and small labels (and the sans stack literally equals the serif stack).
+- Don't drop body line-height below 1.4 or push it above 1.55 — that range *is* kami's reading rhythm.
+- Don't use round-disc bullets, drop shadows, or pill-shaped chips with heavy borders.
+- Don't apply `backdrop-filter`, `mix-blend-mode`, or any modern compositing trick — the system targets print fidelity.
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Phone | < 768px | Single column. Hero 46px, section title 24px, manifesto 17px. Card padding drops to 20px 16px. Hide `.hero-tokens` row. |
+| Tablet | 768–979px | Most 2-col grids hold; switch tag tints from 5 to 3 columns. |
+| Desktop | ≥ 980px | Full 2-col / 4-col grids, JA gets `white-space: nowrap` rescue rules on long ledes. |
+
+### Touch targets
+- Buttons keep `8 14px` padding minimum.
+- Tap targets stay above 44×44 by giving cards generous internal padding rather than oversizing chrome.
+
+### Print
+- `@page { size: A4; margin: 14mm 16mm; background: #f5f4ed; }`.
+- Section, hero, family, comp, swatch, tint, quote, blockquote, pre, tr, anti-pattern blocks all use `break-inside: avoid` so kami pages don't snap mid-card.
+- `-webkit-print-color-adjust: exact` is required so the parchment background actually reaches paper.
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Page Background: "Parchment (#f5f4ed)"
+- Card Surface: "Ivory (#faf9f5)"
+- Brand / CTA: "Ink Blue (#1B365D)"
+- Primary Text: "Near Black (#141413)"
+- Secondary Text: "Dark Warm (#3d3d3a)"
+- Subtext / Caption: "Olive (#504e49)"
+- Tertiary / Meta: "Stone (#6b6a64)"
+- Border: "Border (#e8e6dc)"
+- Tag fill (default): "#E4ECF5 solid (NOT rgba)"
+
+### Example Component Prompts
+- "Build a kami one-pager hero on Parchment (#f5f4ed). Eyebrow row in 12px sans uppercase Stone (#6b6a64), letter-spacing 1.2px. Headline in serif 500 at 96px Near Black (#141413), line-height 1.05, letter-spacing -1.2px. Tagline below in serif 500 at 21px Olive (#504e49)."
+- "Design a kami section header. A two-line stack: section number `01` in serif 500 at 14px Ink Blue (#1B365D) tracking 0.4px, then the title in serif 500 at 32px Near Black. Optional lede in serif 500 at 16px Olive."
+- "Render a kami metric row of three metrics. Each metric is a vertical pair: value in serif 500 at 24px Ink Blue with `font-variant-numeric: tabular-nums`, label in 12px Olive. Gap between metrics: 28px."
+- "Build a kami card on Ivory (#faf9f5) with 1px Border (#e8e6dc), 8px radius, 28px padding. Title in serif 500 at 16px Near Black. Hint underneath in 12px mono Stone. On hover, add a whisper shadow `0 4px 24px rgba(0,0,0,0.05)`. No transform, no color shift."
+- "Build a kami slide cover at 1920×1080. Background ink-blue (#1B365D). Centered title in serif 500 at 96px Ivory (#faf9f5). Below, a 1px ivory rule, 96px wide. Author and date below in serif 500 at 18px Ivory at 70% opacity."
+
+### Iteration Guide
+1. **Start by checking the gray temperature.** If a gray reads cool, the design is no longer kami. Replace with the warm ramp.
+2. **Audit the accent.** If ink-blue covers more than ~5% of the visible surface, reduce — push elements back to Olive or Dark Warm.
+3. **Audit weight.** Any weight above 500 on serif is wrong. Replace with weight 500 and let size carry the contrast.
+4. **Audit italic.** No italic, ever. Swap to ink-blue color or a small tag.
+5. **Audit shadows.** If a shadow is visible at a glance, it's too strong. The only shadows are 1px rings and the `0 4px 24px rgba(0,0,0,0.05)` whisper.
+6. **Tag fills must be solid hex.** If you wrote `rgba(27, 54, 93, 0.18)`, replace with `#E4ECF5`.
+7. **Numbers tabular-nums.** Any column of numbers without `font-variant-numeric: tabular-nums` will look wrong on a print render.
+8. **For slide work, halve tracking and scale macro tokens by 1.6.** Print rhythm is too loose at 1920×1080 without the adjustment.
+
+## Attribution
+
+Aesthetic inspiration drawn from [tw93/kami](https://github.com/tw93/kami) (MIT, © Tw93 and contributors). kami is a Claude skill for typesetting professional documents and slide decks; the tokens, type rules, and "ten invariants" above adapt its print-first design language for use as an Open Design system.

vibn-frontend/lib/scaffold/open-design/design-systems/kami/components.html

@@ -0,0 +1,601 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>kami — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/kami. Every visible
+        token comes from tokens.css; the page itself follows kami's
+        print-first rules — parchment background, ink-blue accent
+        capped at ≤5%, serif at one weight, no italic, no rgba tints,
+        no hard drop shadows, no cool grays."
+    />
+
+    <style>
+      /* :root paste — sourced verbatim from
+         design-systems/kami/tokens.css. Keep this block in sync
+         when tokens.css changes. CJK overrides (`:root[lang="zh-CN"]`,
+         `:root[lang="ja"]`) live in tokens.css and should be pasted
+         only when the artifact's <html lang="..."> matches. */
+      :root {
+        --bg: #f5f4ed;
+        --surface: #faf9f5;
+        --surface-warm: #e8e6dc;
+
+        --fg: #141413;
+        --fg-2: #3d3d3a;
+        --muted: #504e49;
+        --meta: #6b6a64;
+
+        --border: #e8e6dc;
+        --border-soft: #e5e3d8;
+
+        --accent: #1b365d;
+        --accent-on: #faf9f5;
+        --accent-light: #2d5a8a;
+        --accent-hover: var(--accent);
+        --accent-active: #142a48;
+
+        --success: #4a6b3a;
+        --warn: #8a6b1f;
+        --danger: #8a3a30;
+
+        --font-display:
+          Charter, Georgia, Palatino, "Times New Roman", serif;
+        --font-body:
+          Charter, Georgia, Palatino, "Times New Roman", serif;
+        --font-mono:
+          "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
+          "TsangerJinKai02", "Source Han Serif SC", monospace;
+
+        --text-xs: 11px;
+        --text-sm: 12px;
+        --text-base: 14px;
+        --text-md: 15px;
+        --text-lg: 17px;
+        --text-xl: 22px;
+        --text-2xl: 32px;
+        --text-3xl: 48px;
+        --text-4xl: 96px;
+
+        --leading-display: 1.1;
+        --leading-tight: 1.25;
+        --leading-body: 1.55;
+        --leading-dense: 1.4;
+
+        --tracking-display: -1.2px;
+        --tracking-eyebrow: 1.2px;
+        --tracking-label: 0.4px;
+
+        --space-1: 4px;
+        --space-2: 8px;
+        --space-3: 12px;
+        --space-4: 16px;
+        --space-5: 20px;
+        --space-6: 24px;
+        --space-7: 28px;
+        --space-8: 32px;
+        --space-12: 48px;
+        --space-18: 72px;
+        --space-22: 88px;
+
+        --section-y-desktop: 72px;
+        --section-y-tablet: 48px;
+        --section-y-phone: 32px;
+
+        --radius-xs: 2px;
+        --radius-sm: 4px;
+        --radius-md: 8px;
+        --radius-lg: 12px;
+        --radius-xl: 16px;
+        --radius-pill: 9999px;
+
+        --elev-flat: none;
+        --elev-ring: 0 0 0 1px var(--border);
+        --elev-ring-accent: 0 0 0 1px var(--accent);
+        --elev-raised: 0 4px 24px rgba(0, 0, 0, 0.05);
+
+        --focus-ring: 0 0 0 2px var(--accent-active);
+
+        --motion-fast: 150ms;
+        --motion-base: 200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max: 1120px;
+        --container-gutter-desktop: 64px;
+        --container-gutter-tablet: 32px;
+        --container-gutter-phone: 16px;
+
+        --tag-bg-faint: #eef2f7;
+        --tag-bg-soft: #e4ecf5;
+        --tag-bg-base: #d6e1ee;
+        --tag-bg-strong: #d0dce9;
+      }
+
+      /* ─── Reset (minimal) ───────────────────────────────────────── */
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        font-weight: 400;
+        -webkit-font-smoothing: antialiased;
+        /* Print fidelity — kami is page-first. The on-screen render
+           still benefits from the same color-adjust hint so background
+           parchment doesn't get optimized away in print preview. */
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+      }
+      strong { font-weight: 500; } /* kami forbids synthetic bold (>500) */
+      em, i { font-style: normal; }  /* kami forbids italic — keep upright */
+
+      /* ─── Layout primitives ─────────────────────────────────────── */
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section {
+        padding-block: var(--section-y-desktop);
+      }
+      section + section {
+        border-top: 1px solid var(--border);
+      }
+      @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); }
+      }
+
+      /* ─── Typography ────────────────────────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 500;
+        margin: 0;
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        line-height: var(--leading-display);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-2xl);
+        line-height: var(--leading-tight);
+        letter-spacing: 0.4px;
+      }
+      h3 {
+        font-size: var(--text-lg);
+        line-height: 1.3;
+      }
+      p { margin: 0; }
+
+      .lede {
+        font-size: var(--text-md);
+        line-height: var(--leading-body);
+        color: var(--muted);
+      }
+      .body-muted { color: var(--muted); }
+      .body-meta { color: var(--meta); font-size: var(--text-sm); }
+      .body-sm { font-size: var(--text-sm); }
+
+      /* `.eyebrow` is the only place sans is used (and "sans" literally
+         equals serif here per DESIGN.md §3 — kami has no separate
+         sans family). Uppercase + tracking 1.2px — well above the
+         craft 0.06em floor. */
+      .eyebrow {
+        font-family: var(--font-display);
+        font-size: var(--text-sm);
+        font-weight: 500;
+        line-height: 1;
+        color: var(--meta);
+        text-transform: uppercase;
+        letter-spacing: var(--tracking-eyebrow);
+      }
+
+      /* Section number pattern — DESIGN.md §4: the number IS the
+         marker. No underline, no left bar, no eyebrow. Same serif
+         as the title, ink-blue, 14px. */
+      .section-num {
+        font-family: var(--font-display);
+        font-weight: 500;
+        font-size: var(--text-base);
+        color: var(--accent);
+        letter-spacing: var(--tracking-label);
+        font-variant-numeric: tabular-nums;
+        margin-block-end: var(--space-3);
+      }
+
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ───────────────────────────────────────────────
+       * kami buttons use `box-shadow: 0 0 0 1px ...` as the edge
+       * instead of border, so the rectangle aligns perfectly with
+       * the fill. Hover lifts via whisper shadow only — no color
+       * shift, no transform. This is kami's elevation-led
+       * interaction, encoded in tokens. */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 8px 14px;
+        border: none;
+        border-radius: var(--radius-md);
+        font-family: var(--font-display);
+        font-weight: 500;
+        font-size: var(--text-sm);
+        line-height: 1;
+        letter-spacing: var(--tracking-label);
+        cursor: pointer;
+        text-decoration: none;
+        transition:
+          box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .btn:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+      }
+      .btn-primary {
+        background: var(--accent);
+        color: var(--accent-on);
+        box-shadow: var(--elev-ring-accent);
+      }
+      .btn-primary:hover {
+        /* Layered: ring stays as edge; whisper adds lift. */
+        box-shadow: var(--elev-ring-accent), var(--elev-raised);
+      }
+      .btn-secondary {
+        background: var(--surface-warm);
+        color: var(--fg-2);
+        box-shadow: var(--elev-ring);
+      }
+      .btn-secondary:hover {
+        box-shadow: var(--elev-ring), var(--elev-raised);
+      }
+      .btn-ghost {
+        background: transparent;
+        color: var(--accent);
+        box-shadow: var(--elev-ring-accent);
+      }
+      .btn-ghost:hover {
+        box-shadow: var(--elev-ring-accent), var(--elev-raised);
+      }
+
+      /* ─── Cards ─────────────────────────────────────────────────
+       * Cards lift one shade above bg (ivory on parchment). 1px
+       * hairline border + whisper shadow on hover — no transform,
+       * no brightness shift. */
+      .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-7) var(--space-7) var(--space-6);
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-3);
+        transition: box-shadow var(--motion-base) var(--ease-standard);
+      }
+      .card:hover {
+        box-shadow: var(--elev-raised);
+      }
+
+      /* ─── Tags / chips ──────────────────────────────────────────
+       * Solid hex backgrounds, NEVER rgba — print renderers double-
+       * paint alpha. The pre-blends live as --tag-bg-* tokens.
+       * radius is 2px, 4px max — kami forbids pill chips with heavy
+       * borders. */
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        font-family: var(--font-display);
+        font-weight: 500;
+        font-size: var(--text-sm);
+        line-height: 1;
+        color: var(--accent);
+        letter-spacing: var(--tracking-label);
+        padding: 4px 8px;
+        border-radius: var(--radius-xs);
+        background: var(--tag-bg-soft);
+      }
+      .tag-faint { background: var(--tag-bg-faint); }
+      .tag-strong {
+        background: var(--tag-bg-strong);
+        padding: 4px 10px;
+        border-radius: var(--radius-sm);
+      }
+
+      /* ─── Quote ─────────────────────────────────────────────────
+       * Left rule in ink-blue, olive body, 1.55 line-height. The
+       * single place letter-spacing 0.05em earns its keep. */
+      .quote {
+        border-left: 2px solid var(--accent);
+        padding: var(--space-1) 0 var(--space-1) var(--space-3);
+        font-family: var(--font-display);
+        font-weight: 400;
+        font-size: var(--text-md);
+        line-height: var(--leading-body);
+        color: var(--muted);
+        letter-spacing: 0.05em;
+      }
+
+      /* ─── Metric (DESIGN.md §4) ─────────────────────────────────
+       * Big ink-blue value with tabular-nums so columns of metrics
+       * align across the row; olive label below. */
+      .metric {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .metric-value {
+        font-family: var(--font-display);
+        font-weight: 500;
+        font-size: var(--text-xl);
+        line-height: 1.1;
+        color: var(--accent);
+        font-variant-numeric: tabular-nums;
+      }
+      .metric-label {
+        font-family: var(--font-display);
+        font-weight: 400;
+        font-size: var(--text-sm);
+        color: var(--muted);
+      }
+
+      /* ─── Dash list (DESIGN.md §4) ──────────────────────────────
+       * Bullets are en-dashes in ink-blue. Never filled discs. */
+      ul.dash {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-2);
+      }
+      ul.dash li {
+        position: relative;
+        padding-left: var(--space-4);
+        line-height: var(--leading-body);
+      }
+      ul.dash li::before {
+        content: "\2013"; /* en-dash */
+        position: absolute;
+        left: 0;
+        color: var(--accent);
+      }
+
+      /* ─── Code block ────────────────────────────────────────────
+       * Ivory bg + hairline border + warm fg. Mono font has CJK
+       * fallback so labels in CJK code don't render as boxes. */
+      .code {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: var(--space-3) var(--space-4);
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        line-height: var(--leading-body);
+        color: var(--fg);
+        white-space: pre;
+        overflow-x: auto;
+      }
+      .code .k { color: var(--accent); }   /* keyword */
+      .code .c { color: var(--meta); }     /* comment */
+
+      /* ─── Links ─────────────────────────────────────────────────
+       * Default link color is ink-blue. Underline on hover at
+       * generous offset so the rule reads as a deliberate gesture,
+       * not a default. */
+      a {
+        color: var(--accent);
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      /* ─── Section-specific layout ───────────────────────────── */
+      .hero {
+        padding-block: var(--space-22) var(--space-18);
+      }
+      .hero h1 { margin-block-end: var(--space-6); max-width: 14ch; }
+      .hero .lede { max-width: 56ch; }
+      .hero-actions {
+        display: flex;
+        gap: var(--space-3);
+        margin-block-start: var(--space-8);
+      }
+
+      .metric-row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-12);
+      }
+      @media (max-width: 639px) {
+        .metric-row { grid-template-columns: 1fr 1fr; }
+      }
+
+      .features-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--space-5);
+        margin-block-start: var(--space-8);
+      }
+      @media (max-width: 767px) {
+        .features-grid { grid-template-columns: 1fr; }
+      }
+
+      .quote-block {
+        max-width: 56ch;
+        margin-block-start: var(--space-6);
+      }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- ════════════════════════════════════════════════════════════
+           HERO — exercises: section-num pattern, h1 (96px serif at
+           tracking -1.2px), .lede, .btn-primary (ring-shadow edge),
+           .btn-secondary (warm-sand bg), .tag (solid hex). The grid
+           is single-column intentionally — kami heroes don't use
+           asymmetric two-column layouts; the page IS the column.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section class="hero" data-od-id="hero">
+        <p class="section-num">00 · Reference</p>
+        <h1>One paper, set carefully, can hold every brand decision.</h1>
+        <p class="lede">
+          A token system distilled from the kami print rules: warm
+          parchment canvas, single ink-blue accent capped under five
+          percent of the page, serif at one weight. The fixture you
+          are reading uses the same token block agents paste into
+          every artifact.
+        </p>
+        <div class="hero-actions">
+          <a href="./tokens.css" class="btn btn-primary">View tokens</a>
+          <a href="./DESIGN.md" class="btn btn-secondary">
+            Read the spec
+          </a>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           METRICS — exercises: .metric pattern with tabular-nums
+           values, ink-blue at the W500 weight, olive label. Numbers
+           describe the fixture itself, not invented claims.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="metrics">
+        <p class="section-num">01</p>
+        <h2>Schema in numbers</h2>
+
+        <div class="metric-row" style="margin-block-start: var(--space-8)">
+          <div class="metric">
+            <div class="metric-value">42</div>
+            <div class="metric-label">tokens in :root</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value">3</div>
+            <div class="metric-label">font stacks (EN · zh · ja)</div>
+          </div>
+          <div class="metric">
+            <div class="metric-value">≤5%</div>
+            <div class="metric-label">accent surface cap</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           FEATURE CARDS — exercises: .card (ivory bg, hairline
+           border, whisper shadow on hover), h3, body text, dash list,
+           tag (solid hex bg).
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="components">
+        <p class="section-num">02</p>
+        <h2>What this fixture exercises</h2>
+
+        <div class="features-grid">
+          <article class="card">
+            <span class="tag tag-faint">Surface</span>
+            <h3>Three-tier surface ramp</h3>
+            <p class="body-muted body-sm">
+              Parchment for the page, ivory for cards, warm sand for
+              secondary buttons. Cards lift one half-shade above the
+              page; the contrast is what gives them edge without a
+              shadow.
+            </p>
+            <ul class="dash body-sm">
+              <li>--bg covers the page</li>
+              <li>--surface lifts containers</li>
+              <li>--surface-warm fills secondary controls</li>
+            </ul>
+          </article>
+
+          <article class="card">
+            <span class="tag">Accent</span>
+            <h3>One color, two states</h3>
+            <p class="body-muted body-sm">
+              Ink blue is the only chromatic move. Hover holds the
+              same color — kami expresses lift through elevation, not
+              brightness. Active darkens by a hand-picked value, not a
+              formula.
+            </p>
+            <ul class="dash body-sm">
+              <li>--accent appears at most twice on this page</li>
+              <li>--accent-hover identical to --accent</li>
+              <li>Active state is a hand-picked deeper ink</li>
+            </ul>
+          </article>
+
+          <article class="card">
+            <span class="tag tag-strong">Type</span>
+            <h3>One weight does the work</h3>
+            <p class="body-muted body-sm">
+              Serif at weight 500 carries every heading. There is no
+              bold, no italic, no second face. Hierarchy comes from
+              size, tracking, and color — never from another type
+              family.
+            </p>
+            <ul class="dash body-sm">
+              <li>--font-display equals --font-body equals serif</li>
+              <li>Display tracking compresses (-1.2px at 96px)</li>
+              <li>Eyebrow tracking opens (1.2px on uppercase)</li>
+            </ul>
+          </article>
+
+          <article class="card">
+            <span class="tag">Elevation</span>
+            <h3>Ring before whisper before drop</h3>
+            <p class="body-muted body-sm">
+              Three sanctioned levels. A 1px hairline ring is the
+              default edge; a 4-24-rgba whisper appears only on hover.
+              The schema reserves --elev-ring as a first-class level so
+              brands like this one don't have to misuse --elev-raised
+              for hairlines.
+            </p>
+          </article>
+        </div>
+      </section>
+
+      <!-- ════════════════════════════════════════════════════════════
+           QUOTE + CODE — exercises: .quote (left rule in ink-blue),
+           .code with .k / .c spans, link.
+      ═══════════════════════════════════════════════════════════════ -->
+      <section data-od-id="quote">
+        <p class="section-num">03</p>
+        <h2>The token block, in full</h2>
+
+        <div class="quote-block">
+          <blockquote class="quote">
+            kami is not a UI framework. It is a constraint system for
+            the page, designed to keep deliverables stable, clear, and
+            unmistakably printed.
+          </blockquote>
+        </div>
+
+        <pre class="code" style="margin-block-start: var(--space-8)"><span class="c">/* Paste this block into the first &lt;style&gt; of every kami artifact. */</span>
+<span class="k">:root</span> {
+  <span class="c">/* Surface */</span>
+  <span class="k">--bg</span>: <span>#f5f4ed</span>;
+  <span class="k">--surface</span>: <span>#faf9f5</span>;
+  <span class="k">--accent</span>: <span>#1b365d</span>;
+  <span class="c">/* … 38 more, see tokens.css */</span>
+}</pre>
+
+        <p class="body-meta" style="margin-block-start: var(--space-4)">
+          Full reference at
+          <a href="./tokens.css">tokens.css</a> ·
+          spec at
+          <a href="./DESIGN.md">DESIGN.md</a>
+        </p>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/kami/tokens.css

@@ -0,0 +1,272 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/kami/tokens.css
+ *
+ * Structured token bindings for "kami / 紙 / 纸" — a print-first
+ * editorial system: warm parchment canvas, single ink-blue accent,
+ * serif at one weight (500), no italic, no cool grays.
+ *
+ * This file pre-compiles the values described in `DESIGN.md` into
+ * the schema shared with all OD design systems. Two paste paths:
+ *
+ *   1. Agents generating an artifact for kami should paste the
+ *      :root block verbatim into the first <style> of the artifact,
+ *      then reference everything via var(--*).
+ *   2. The optional `:root[lang="zh-CN"]` and `:root[lang="ja"]`
+ *      blocks below override --font-display / --font-body for
+ *      Chinese and Japanese typesetting. Include them only when
+ *      the artifact's <html lang="..."> matches; otherwise drop
+ *      to keep the paste minimal.
+ *
+ * Schema notes (kami pushed the schema in five places — see comments
+ * inline tagged "#Gap N" for the matching item in the design log):
+ *   #Gap 1  — 4-level foreground ramp (--fg / --fg-2 / --muted / --meta)
+ *   #Gap 2  — 3-level surface (--bg / --surface / --surface-warm)
+ *   #Gap 3  — 2-level border (--border / --border-soft)
+ *   #Gap 4  — accent-hover binds to value, not formula
+ *   #Gap 5  — ring elevation as a first-class level (--elev-ring)
+ *
+ * Brand-specific extensions (NOT part of the shared schema, only in
+ * kami because of print-fidelity needs — see DESIGN.md §2 "Tag tints"):
+ *   --tag-bg-soft / --tag-bg-base / --tag-bg-strong  — solid-hex
+ *   pre-blends of ink-blue over parchment, replacing rgba/color-mix
+ *   tints because print renderers double-paint alpha fills.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface (3 levels — #Gap 2) ────────────────────────────────
+   * Warm parchment canvas; cards lift one half-shade brighter to
+   * ivory; secondary interactive surfaces drop to warm-sand. Never
+   * #ffffff anywhere — the cream tone *is* kami's identity.
+   * `--surface-warm` is new in the shared schema; brands without a
+   * tertiary surface tier should alias it to var(--surface). */
+  --bg: #f5f4ed;            /* parchment — page background */
+  --surface: #faf9f5;       /* ivory — cards, lifted containers */
+  --surface-warm: #e8e6dc;  /* warm sand — default button bg, secondary surfaces */
+
+  /* ─── Foreground ramp (4 levels — #Gap 1) ───────────────────────
+   * kami's text uses four named levels — primary / secondary /
+   * subtext / metadata. Cool blue-grays are forbidden everywhere;
+   * each token below has the warm yellow-brown undertone (R ≈ G > B)
+   * the brand requires.
+   *
+   * `--fg-2` and `--meta` are new in the shared schema; brands that
+   * only differentiate two levels should alias these to var(--fg)
+   * and var(--muted). */
+  --fg: #141413;            /* near-black — primary text, slight olive warmth */
+  --fg-2: #3d3d3a;          /* dark warm — secondary text, table headers */
+  --muted: #504e49;         /* olive — subtext, captions */
+  --meta: #6b6a64;          /* stone — tertiary, dates, metadata */
+
+  /* ─── Border (2 levels — #Gap 3) ────────────────────────────────
+   * Primary border for card edges and section dividers; soft border
+   * for inner row separators that should not visually compete.
+   * `--border-soft` is new in the shared schema; brands with one
+   * border tier should alias it to var(--border). */
+  --border: #e8e6dc;
+  --border-soft: #e5e3d8;
+
+  /* ─── Accent ─────────────────────────────────────────────────────
+   * The single chromatic move. CTAs, section numbers, link text,
+   * the left rule of a quote, the W500 weight in a metric. Hard
+   * cap of ≤5% of any surface area (DESIGN.md §2). */
+  --accent: #1b365d;        /* ink blue */
+  --accent-on: #faf9f5;     /* ivory — fg when accent is the bg (NOT pure white) */
+  --accent-light: #2d5a8a;  /* brighter variant — links on dark surfaces only */
+
+  /* ─── Accent states (#Gap 4) ────────────────────────────────────
+   * kami treats --accent-hover and --accent-active as VALUE
+   * bindings, not formula derivations. Ink blue is already deep;
+   * mixing further black makes hover invisible. The brand instead
+   * expresses hover through elevation (whisper shadow) and keeps
+   * the color identical. Active darkens slightly via a hand-picked
+   * value, not a formula.
+   *
+   * Schema rule: every brand provides --accent-hover and
+   * --accent-active. Default's brand uses a black-mix formula;
+   * kami uses identity / hand-picked. Both satisfy the contract. */
+  --accent-hover: var(--accent);                /* color-stable; hover via elevation */
+  --accent-active: #142a48;                     /* hand-picked, ~12% darker ink */
+
+  /* ─── Semantic ───────────────────────────────────────────────────
+   * kami's DESIGN.md doesn't specify success/warn/danger because the
+   * system is print-first and rarely renders status. We bind them to
+   * desaturated warm hues that survive parchment without breaking
+   * the "single chromatic move" rule. Use sparingly; kami artifacts
+   * almost never need these. */
+  --success: #4a6b3a;       /* warm forest — toned down for parchment */
+  --warn: #8a6b1f;          /* burnt sienna */
+  --danger: #8a3a30;        /* warm terracotta — never tailwind red */
+
+  /* ─── Typography ─────────────────────────────────────────────────
+   * Default to English Charter stack on :root. The `:root[lang]`
+   * blocks below override for CN and JA. `--font-body` and
+   * `--font-display` are equal — kami uses a single serif weight
+   * (500) and lets size carry hierarchy.
+   *
+   * Sans is reserved for eyebrows, switchers, small labels — it
+   * literally equals the serif stack, so there is no separate
+   * sans token. */
+  --font-display:
+    Charter, Georgia, Palatino, "Times New Roman", serif;
+  --font-body:
+    Charter, Georgia, Palatino, "Times New Roman", serif;
+  --font-mono:
+    "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco,
+    "TsangerJinKai02", "Source Han Serif SC", monospace;
+
+  /* Type scale (px) — derived from DESIGN.md §3 hierarchy table.
+   * kami runs lighter on the small end and heavier on the display
+   * end than default's 12–64 — print rhythm needs both 11px captions
+   * and 96px hero display.
+   *
+   * `--text-md` (15px) is a brand-specific extension — kami needs an
+   * in-between size for ledes that the schema's --text-base (body)
+   * and --text-lg (H3) ramp doesn't supply. Generic cross-brand
+   * components must NOT reference --text-md; only kami's own
+   * components.html consumes it. Promote to schema if a second
+   * brand reports the same need. */
+  --text-xs: 11px;
+  --text-sm: 12px;
+  --text-base: 14px;        /* body — print-dense */
+  --text-md: 15px;          /* brand-specific — lede / large body */
+  --text-lg: 17px;          /* H3 */
+  --text-xl: 22px;          /* H2 */
+  --text-2xl: 32px;         /* section title */
+  --text-3xl: 48px;         /* CJK display ceiling */
+  --text-4xl: 96px;         /* EN hero / cover slide title */
+
+  /* kami's line-height envelope is 1.10–1.55, narrower than default's */
+  --leading-display: 1.1;   /* hero, H1, H2 */
+  --leading-tight: 1.25;    /* section title */
+  --leading-body: 1.55;     /* reading body */
+  --leading-dense: 1.4;     /* resume / one-pager */
+
+  /* Letter-spacing rules from DESIGN.md §3. EN body is 0; CN/JA
+   * override below. Display tracking is negative (compresses
+   * 96px hero); eyebrow tracking is positive (uppercase labels). */
+  --tracking-display: -1.2px;   /* applied to 96px hero only */
+  --tracking-eyebrow: 1.2px;    /* uppercase eyebrow / overline */
+  --tracking-label: 0.4px;      /* small uppercase labels */
+
+  /* ─── Spacing ────────────────────────────────────────────────────
+   * kami is print-rooted; section gaps and card paddings come from
+   * the layout grid in DESIGN.md §5, not the 4px web-grid that
+   * default uses. We keep the same token names but rebind values
+   * to kami's actual rhythm. */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;          /* card interior */
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-18: 72px;         /* section gap (web) */
+  --space-22: 88px;         /* page top padding (web) */
+
+  /* Web page geometry (DESIGN.md §5) */
+  --section-y-desktop: 72px;
+  --section-y-tablet: 48px;
+  --section-y-phone: 32px;
+
+  /* ─── Radius ─────────────────────────────────────────────────────
+   * `2px → 4px → 6px → 8px → 12px → 16px` per DESIGN.md §6. Tags
+   * sit at 2–4px; buttons and cards at 8px; featured at 12–16px. */
+  --radius-xs: 2px;         /* tags */
+  --radius-sm: 4px;         /* small chips */
+  --radius-md: 8px;         /* default — buttons, cards */
+  --radius-lg: 12px;        /* featured cards */
+  --radius-xl: 16px;        /* hero containers */
+  --radius-pill: 9999px;    /* avatars (rare) */
+
+  /* ─── Elevation (3 levels — #Gap 5) ─────────────────────────────
+   * kami forbids hard drop shadows. Three sanctioned levels:
+   * flat / ring (1px hairline OR 1px brand ring) / whisper. The
+   * shared schema gains `--elev-ring` so brands using ring shadows
+   * as primary elevation (kami, paper, editorial) don't have to
+   * rebind --elev-raised away from blur shadow.
+   *
+   * `--elev-ring-accent` is brand-specific — kami uses it as the
+   * edge for primary buttons (`box-shadow: var(--elev-ring-accent)`
+   * instead of border, to keep the rectangle perfectly aligned
+   * with the fill). */
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-ring-accent: 0 0 0 1px var(--accent); /* brand-specific */
+  --elev-raised: 0 4px 24px rgba(0, 0, 0, 0.05);  /* whisper */
+
+  /* ─── Focus ring ─────────────────────────────────────────────────
+   * kami's focus is more restrained than default's — the brand
+   * forbids cool-blue glows. We use a smaller ring with the active
+   * variant of accent. */
+  --focus-ring: 0 0 0 2px var(--accent-active);
+
+  /* ─── Motion ─────────────────────────────────────────────────────
+   * kami's hover is a 200ms whisper-shadow lift only — no transform,
+   * no brightness shift. Two durations, one easing. */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ─────────────────────────────────────────────────────
+   * Web container: 1120px max, 64px gutter desktop. Print pages
+   * have margin tokens specific to document type (resume / one-pager
+   * / long-doc / letter / portfolio) — those live in the print
+   * skill, not in this shared token block. */
+  --container-max: 1120px;
+  --container-gutter-desktop: 64px;
+  --container-gutter-tablet: 32px;
+  --container-gutter-phone: 16px;
+
+  /* ─── Brand-specific: tag tint scale (#Gap 6) ────────────────────
+   * Print renderers double-paint alpha fills. kami pre-blends ink
+   * blue over parchment as solid hex at 5 effective alphas. These
+   * tokens are NOT part of the shared schema; they live here only
+   * because kami's rendering target needs them. Other brands tint
+   * with `color-mix(... transparent N%)` inline. */
+  --tag-bg-faint: #eef2f7;     /* ≈ ink at 0.08 */
+  --tag-bg-soft: #e4ecf5;      /* ≈ ink at 0.18 — DEFAULT tag */
+  --tag-bg-base: #d6e1ee;      /* ≈ ink at 0.30 */
+  --tag-bg-strong: #d0dce9;    /* ≈ ink at 0.22, denser */
+}
+
+/* ─── i18n font overrides (#Gap 7) ──────────────────────────────────
+ * Switch the dominant font stack based on the artifact's lang.
+ * Apply ONLY ONE of these blocks — the one matching <html lang="...">
+ * — and keep --font-mono on the EN stack since code labels stay Latin
+ * regardless of the document language.
+ *
+ * For multi-language artifacts (e.g. a deck with one Japanese chapter),
+ * keep the dominant stack on :root and scope the override on a
+ * wrapper element instead:
+ *
+ *   section[lang="ja"] { --font-display: <JA stack>; ... }
+ *
+ * Do NOT chain all three font families inside a single font-family
+ * declaration — that dilutes the visual character of every page.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root[lang="zh-CN"],
+:root[lang="zh"] {
+  --font-display:
+    "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
+    "Songti SC", "STSong", Georgia, serif;
+  --font-body:
+    "TsangerJinKai02", "Source Han Serif SC", "Noto Serif CJK SC",
+    "Songti SC", "STSong", Georgia, serif;
+}
+
+:root[lang="ja"] {
+  --font-display:
+    "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
+    "Noto Serif CJK JP", "Source Han Serif JP",
+    "TsangerJinKai02", Georgia, serif;
+  --font-body:
+    "YuMincho", "Yu Mincho", "Hiragino Mincho ProN",
+    "Noto Serif CJK JP", "Source Han Serif JP",
+    "TsangerJinKai02", Georgia, serif;
+  /* JA needs the lighter olive override — YuMincho strokes are thinner
+   * and the standard olive looks anemic against parchment. */
+  --muted: #4d4c48;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/kraken/DESIGN.md

@@ -0,0 +1,128 @@
+# Design System Inspired by Kraken
+
+> Category: Fintech & Crypto
+> Crypto trading. Purple-accented dark UI, data-dense dashboards.
+
+## 1. Visual Theme & Atmosphere
+
+Kraken's website is a clean, trustworthy crypto exchange that uses purple as its commanding brand color. The design operates on white backgrounds with Kraken Purple (`#7132f5`, `#5741d8`, `#5b1ecf`) creating a distinctive, professional crypto identity. The proprietary Kraken-Brand font handles display headings with bold (700) weight and negative tracking, while Kraken-Product (with IBM Plex Sans fallback) serves as the UI workhorse.
+
+**Key Characteristics:**
+- Kraken Purple (`#7132f5`) as primary brand with darker variants (`#5741d8`, `#5b1ecf`)
+- Kraken-Brand (display) + Kraken-Product (UI) dual font system
+- Near-black (`#101114`) text with cool blue-gray neutral scale
+- 12px radius buttons (rounded but not pill)
+- Subtle shadows (`rgba(0,0,0,0.03) 0px 4px 24px`) — whisper-level
+- Green accent (`#149e61`) for positive/success states
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Kraken Purple** (`#7132f5`): Primary CTA, brand accent, links
+- **Purple Dark** (`#5741d8`): Button borders, outlined variants
+- **Purple Deep** (`#5b1ecf`): Deepest purple
+- **Purple Subtle** (`rgba(133,91,251,0.16)`): Purple at 16% — subtle button backgrounds
+- **Near Black** (`#101114`): Primary text
+
+### Neutral
+- **Cool Gray** (`#686b82`): Primary neutral, borders at 24% opacity
+- **Silver Blue** (`#9497a9`): Secondary text, muted elements
+- **White** (`#ffffff`): Primary surface
+- **Border Gray** (`#dedee5`): Divider borders
+
+### Semantic
+- **Green** (`#149e61`): Success/positive at 16% opacity for badges
+- **Green Dark** (`#026b3f`): Badge text
+
+## 3. Typography Rules
+
+### Font Families
+- **Display**: `Kraken-Brand`, fallbacks: `IBM Plex Sans, Helvetica, Arial`
+- **UI / Body**: `Kraken-Product`, fallbacks: `Helvetica Neue, Helvetica, Arial`
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing |
+|------|------|------|--------|-------------|----------------|
+| Display Hero | Kraken-Brand | 48px | 700 | 1.17 | -1px |
+| Section Heading | Kraken-Brand | 36px | 700 | 1.22 | -0.5px |
+| Sub-heading | Kraken-Brand | 28px | 700 | 1.29 | -0.5px |
+| Feature Title | Kraken-Product | 22px | 600 | 1.20 | normal |
+| Body | Kraken-Product | 16px | 400 | 1.38 | normal |
+| Body Medium | Kraken-Product | 16px | 500 | 1.38 | normal |
+| Button | Kraken-Product | 16px | 500–600 | 1.38 | normal |
+| Caption | Kraken-Product | 14px | 400–700 | 1.43–1.71 | normal |
+| Small | Kraken-Product | 12px | 400–500 | 1.33 | normal |
+| Micro | Kraken-Product | 7px | 500 | 1.00 | uppercase |
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Purple**
+- Background: `#7132f5`
+- Text: `#ffffff`
+- Padding: 13px 16px
+- Radius: 12px
+
+**Purple Outlined**
+- Background: `#ffffff`
+- Text: `#5741d8`
+- Border: `1px solid #5741d8`
+- Radius: 12px
+
+**Purple Subtle**
+- Background: `rgba(133,91,251,0.16)`
+- Text: `#7132f5`
+- Padding: 8px
+- Radius: 12px
+
+**White Button**
+- Background: `#ffffff`
+- Text: `#101114`
+- Radius: 10px
+- Shadow: `rgba(0,0,0,0.03) 0px 4px 24px`
+
+**Secondary Gray**
+- Background: `rgba(148,151,169,0.08)`
+- Text: `#101114`
+- Radius: 12px
+
+### Badges
+- Success: `rgba(20,158,97,0.16)` bg, `#026b3f` text, 6px radius
+- Neutral: `rgba(104,107,130,0.12)` bg, `#484b5e` text, 8px radius
+
+## 5. Layout Principles
+
+### Spacing: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 13px, 15px, 16px, 20px, 24px, 25px
+### Border Radius: 3px, 6px, 8px, 10px, 12px, 16px, 9999px, 50%
+
+## 6. Depth & Elevation
+- Subtle: `rgba(0,0,0,0.03) 0px 4px 24px`
+- Micro: `rgba(16,24,40,0.04) 0px 1px 4px`
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Kraken Purple (#7132f5) for CTAs and links
+- Apply 12px radius on all buttons
+- Use Kraken-Brand for headings, Kraken-Product for body
+
+### Don't
+- Don't use pill buttons — 12px is the max radius for buttons
+- Don't use other purples outside the defined scale
+
+## 8. Responsive Behavior
+Breakpoints: 375px, 425px, 640px, 768px, 1024px, 1280px, 1536px
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Brand: Kraken Purple (`#7132f5`)
+- Dark variant: `#5741d8`
+- Text: Near Black (`#101114`)
+- Secondary text: `#9497a9`
+- Background: White (`#ffffff`)
+
+### Example Component Prompts
+- "Create hero: white background. Kraken-Brand 48px weight 700, letter-spacing -1px. Purple CTA (#7132f5, 12px radius, 13px 16px padding)."

vibn-frontend/lib/scaffold/open-design/design-systems/lamborghini/DESIGN.md

@@ -0,0 +1,291 @@
+# Design System Inspired by Lamborghini
+
+> Category: Automotive
+> Supercar brand. True black surfaces, gold accents, dramatic uppercase typography.
+
+## 1. Visual Theme & Atmosphere
+
+Lamborghini's website is a cathedral of darkness — a digital stage where jet-black surfaces stretch infinitely and every element emerges from the void like a machine under a spotlight. The page is almost entirely black. Not dark gray, not near-black — true, uncompromising black (`#000000`) that saturates the viewport and refuses to yield. Into this abyss, white type and Lamborghini Gold (`#FFC000`) are deployed with surgical precision, creating a visual language that feels like walking through a nighttime motorsport event where every surface absorbs light except the things that matter.
+
+The hero is a full-viewport video — dark, cinematic, immersive — showing event footage or vehicle reveals with the Lamborghini bull logo floating ethereally above. The navigation is minimal: a centered bull logo, a "MENU" hamburger on the left, and search/bookmark icons on the right, all rendered in white against the black canvas. There are no borders, no visible nav containers, no background color on the header — just white marks floating in darkness. The overall mood is nocturnal luxury: exclusive, theatrical, and deliberately intimidating. Each section transition is a scroll through darkness into the next revelation.
+
+Typography is the voice of this darkness. LamboType — a custom Neo-Grotesk typeface created by Character Type and design agency Strichpunkt — is used for everything from 120px uppercase display headlines to 10px micro labels. Its distinctive 12° angled terminals are inspired by the aerodynamic lines of Lamborghini's super sports cars, and its proportions range from Normal to Ultracompressed width. Headlines SHOUT in uppercase at enormous scales with tight line-heights (0.92 at 120px), creating dense blocks of text that feel stamped from steel. The typeface carries hexagonal geometric DNA — constructed from hexagons, three-armed stars, and circles — that echoes throughout the interface in the hexagonal pause button and UI icons. Built on Bootstrap grid with 68 Element Plus/UI components, the technical infrastructure is substantial beneath the theatrical surface.
+
+**Key Characteristics:**
+- True black (`#000000`) dominant surfaces with white and gold as the only relief colors
+- LamboType custom Neo-Grotesk font with 12° angled terminals inspired by aerodynamic car lines
+- Lamborghini Gold (`#FFC000`) as the sole accent color — used exclusively for primary CTA buttons
+- All-uppercase display typography at extreme scales (120px, 80px, 54px) with tight line-heights
+- Full-viewport video heroes with cinematic event/vehicle content
+- Zero border-radius on buttons — sharp, angular, uncompromising rectangles
+- Hexagonal motifs in UI elements (pause button, icon system) echoing brand geometry
+- Bootstrap grid system + Element Plus/UI 68 components underneath
+- Transparent ghost buttons with white borders at 50% opacity as the secondary CTA pattern
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Lamborghini Gold** (`#FFC000`): The signature accent color — a warm, saturated amber-gold (rgb 255, 192, 0) used exclusively for primary action buttons ("Discover More", "Tickets", "Start Configuration"). The only chromatic color in the entire interface, it ignites against the black canvas like a headlight cutting through night
+- **Pure White** (`#FFFFFF`): Primary text color on dark surfaces, logo rendering, nav elements, and light-mode button fills — the voice that speaks from the darkness
+
+### Secondary & Accent
+- **Dark Gold** (`#917300`): Hover/pressed state for gold buttons — a deep amber (rgb 145, 115, 0) that darkens the gold to signal interaction
+- **Gold Text** (`#FFCE3E`): Slightly lighter gold variant (rgb 255, 206, 62) used for inline text accents and highlighted labels
+- **Cyan Pulse** (`#29ABE2`): Electric blue-cyan (rgb 41, 171, 226) appearing as an informational accent and interactive element highlight
+- **Link Blue** (`#3860BE`): Medium blue (rgb 56, 96, 190) used universally for link hover states across all text colors
+
+### Surface & Background
+- **Absolute Black** (`#000000`): The dominant surface color — used for page background, hero sections, header, footer, and most containers
+- **Charcoal** (`#202020`): Elevated dark surface (rgb 32, 32, 32) — the primary "dark gray" for cards, panels, and text containers sitting above the black canvas
+- **Dark Iron** (`#181818`): Subtle surface variant (rgb 24, 24, 24) — barely distinguishable from black, used for footer and deep sections
+- **Overlay Black** (`rgba(0,0,0,0.7)`): Semi-transparent overlay for modals and video dimming
+- **Near White** (`#F8F8F8`): Rare light surface (rgb 248, 248, 248) for content blocks in white-mode sections
+- **Mist** (`#E6E6E6`): Light gray surface for secondary light-mode containers
+
+### Neutrals & Text
+- **Pure White** (`#FFFFFF`): Primary text on dark backgrounds — headlines, body, nav labels
+- **Smoke** (`#F5F5F5`): Secondary text on dark surfaces — slightly softer than pure white
+- **Graphite** (`#494949`): Dark gray text on light surfaces (rgb 73, 73, 73)
+- **Ash** (`#7D7D7D`): Mid-range gray for muted text, timestamps, and metadata (rgb 125, 125, 125)
+- **Steel** (`#969696`): Lighter gray for disabled text and subtle labels (rgb 150, 150, 150)
+- **Slate** (`#666666`): Alternative mid-gray for secondary content
+- **Iron** (`#555555`): Dark mid-gray for body text variants
+- **Shadow** (`#313131`): Very dark gray for text on dark surfaces where white is too strong
+
+### Semantic & Accent
+- **Cyan Pulse** (`#29ABE2`): Used for informational highlights and interactive feedback
+- **Link Blue** (`#3860BE`): Universal hover state for all hyperlinks
+- **Teal Action** (`#1EAEDB`): Button hover background for transparent/ghost variants (rgb 30, 174, 219)
+
+### Gradient System
+- No explicit gradients in the color palette — the dark-to-light progression is achieved through surface layering: `#000000` → `#181818` → `#202020` → `#494949` → `#7D7D7D`
+- Video heroes use natural atmospheric gradients from the content itself
+- Top-of-page gradient: subtle dark-to-darker fade at the edges of full-bleed imagery
+
+## 3. Typography Rules
+
+### Font Family
+- **Display & UI**: `LamboType`, Roboto, Helvetica Neue, Arial — custom Neo-Grotesk typeface by Character Type for Lamborghini's 2024 brand refresh. Available in widths from Normal to Ultracompressed and weights from Light (300) to Black. Features 12° angled terminals inspired by aerodynamic car geometry, hexagonal construction logic, and support for 200+ languages including Latin, Cyrillic, and Greek
+- **Fallback/UI**: `Open Sans` — used for some button/form contexts as system fallback
+- **No italic variants** observed on the marketing site — the brand voice is always upright
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Hero Display | 120px (7.50rem) | 400 | 0.92 | normal | LamboType, uppercase, maximum impact |
+| Display 2 | 80px (5.00rem) | 400 | 1.13 | normal | LamboType, uppercase, major section titles |
+| Section Title | 54px (3.38rem) | 400 | 1.19 | normal | LamboType, uppercase |
+| Sub-section | 40px (2.50rem) | 400 | 1.15 | normal | LamboType, uppercase |
+| Feature Heading | 27px (1.69rem) | 400 | 1.37 | normal | LamboType, uppercase |
+| Card Title | 24px (1.50rem) | 400 | — | normal | LamboType |
+| Body Large | 18px (1.13rem) | 400 | 1.56 | normal | LamboType, mixed case and uppercase variants |
+| Body / UI | 16px (1.00rem) | 400/700 | 1.50 | normal/0.16px | LamboType, primary body text |
+| Button Large | 16px (1.00rem) | 400 | 1.50 | normal | Gold CTA buttons |
+| Button Standard | 14.4px (0.90rem) | 300/700 | 1.00 | 0.14–0.2px | LamboType, uppercase, ghost buttons |
+| Button Small | 13px (0.81rem) | 300/500 | 1.20 | 0.13–0.2px | LamboType, compact button variant |
+| Caption | 14px (0.88rem) | 600/700 | 1.14–1.50 | -0.42px | LamboType, uppercase, negative tracking |
+| Label | 12px (0.75rem) | 400/500 | 1.83 | 0.96px | LamboType, uppercase badges and micro labels |
+| Micro | 10px (0.63rem) | 400 | 1.00–2.00 | 0.225px | LamboType, uppercase, smallest text |
+
+### Principles
+- **ALL-CAPS is the default voice**: Display and feature headings are universally uppercase. This creates a shouting, commanding tone that matches the brand's aggression
+- **Extreme scale range**: From 120px heroes to 10px micro labels — a 12:1 ratio that creates dramatic visual hierarchy
+- **Tight line-heights at scale**: Display sizes use 0.92-1.19 line-height, creating dense, compressed blocks of type that feel stamped rather than typeset
+- **Weight 400 dominates**: Unlike many design systems that use bold for emphasis, Lamborghini's regular weight carries the headlines — the typeface itself is so distinctive it doesn't need weight variation
+- **Negative tracking on captions**: -0.42px letter-spacing on 14px captions creates a compressed, technical aesthetic
+- **Positive tracking on micro text**: +0.225px at 10px ensures legibility at the smallest sizes
+- **Single typeface discipline**: LamboType handles everything — the 12° angled terminals and hexagonal geometry provide visual coherence across all sizes
+
+## 4. Component Stylings
+
+### Buttons
+All buttons use **zero border-radius** — sharp, angular rectangles that echo the aggressive lines of Lamborghini vehicles.
+
+**Gold Accent CTA** — The primary action:
+- Default: bg `#FFC000` (Lamborghini Gold), text `#000000`, padding 24px, fontSize 16px, fontWeight 400, borderRadius 0px, no border
+- Hover: bg `#917300` (Dark Gold), darkens significantly
+- Class: `btn-accent btn-large`
+- Used for: "Discover More", "Tickets", "Start Configuration"
+
+**Transparent Ghost** — The secondary action on dark backgrounds:
+- Default: bg transparent, text `#FFFFFF`, border 1px solid `#FFFFFF`, padding 16px, opacity 0.5
+- Hover: bg `#1EAEDB` (Teal Action), text white, opacity 0.7
+- Focus: bg `#1EAEDB`, border 1px solid `#000000`, outline 2px solid `#000000`
+- Used for: secondary CTAs on hero sections and dark panels
+
+**White Filled** — Light-mode primary:
+- Default: bg `#FFFFFF`, text `#202020`, no border
+- Used for: CTAs on dark sections where gold isn't appropriate
+
+**Black Filled** — Dark filled variant:
+- Default: bg `#000000`, text `#202020`
+- Used for: Inverted CTA on light sections
+
+**Gray Neutral** — Subtle action:
+- Default: bg `#969696`, text `#202020`
+- Used for: secondary/tertiary actions, badge-like buttons
+
+### Cards & Containers
+- Background: `#202020` (Charcoal) on black canvas, or `#000000` on lighter sections
+- Border: `0px 1px solid #202020` bottom borders for section dividers
+- Border-radius: 0px (completely sharp corners)
+- Shadow: minimal, uses overlay opacity for depth
+- Content: full-bleed photography + overlaid text in white
+
+### Inputs & Forms
+- Minimal form presence on the marketing site
+- Switch elements: border-radius 20px (the only rounded element), border 1px solid `#DDDDDD`
+- Cookie banner input style: white text on black with `#7D7D7D` borders
+
+### Navigation
+- **Desktop**: Centered bull logo, "MENU" hamburger with icon on left, search icon + bookmarks icon on right
+- **Background**: Transparent (inherits black page background)
+- **Sticky**: Fixed to top, floats above content
+- **No visible borders or shadows** — elements float in the darkness
+- **"MENU" label**: White text at 14px weight 400, uppercase, accompanies hamburger icon
+- **Hexagonal motifs**: Pause button on hero sections uses hexagonal outline shape
+
+### Image Treatment
+- **Hero**: Full-viewport video sections (100vh) with cinematic event/vehicle footage
+- **Event photography**: Full-bleed aerial shots of Lamborghini Arena events
+- **Vehicle imagery**: High-contrast studio shots on dark backgrounds, full-width
+- **Aspect ratios**: Predominantly 16:9 and wider for cinematic feel
+- **Dark gradient overlays**: Subtle darkening at top/bottom edges of video to ensure text legibility
+
+### Distinctive Components
+- **Hexagonal Pause Button**: Video control uses a hexagonal outline (matching the brand's geometric DNA from the typeface), positioned bottom-right of hero sections
+- **Progress Bar**: Thin white line at bottom of hero sections indicating video/slide progress
+- **Badge/Tag**: bg `#969696`, text white, padding 8px, fontSize 10px, borderRadius 2px — tiny metallic pills
+
+## 5. Layout Principles
+
+### Spacing System
+- **Base unit**: 8px
+- **Full scale**: 2px, 4px, 5px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 48px, 56px
+- **Button padding**: 16px (ghost), 24px (gold accent)
+- **Section padding**: 48–56px vertical, 40px horizontal
+- **Small spacing**: 2–5px for fine adjustments (badge padding, border spacing)
+
+### Grid & Container
+- **Framework**: Bootstrap grid system (container + row + col)
+- **Max width**: 1440px (largest breakpoint)
+- **Columns**: Standard 12-column Bootstrap grid
+- **Full-bleed**: Hero sections break out of grid to fill viewport edge-to-edge
+- **Content areas**: Centered within 1200px max-width containers
+
+### Whitespace Philosophy
+Lamborghini uses darkness as whitespace. The generous black expanses between content blocks serve the same function as white space in a light design — creating breathing room that elevates each element to the status of exhibit. A model name floating in the middle of a black viewport has the same visual weight as a gallery piece on a white wall. The absence of color IS the design.
+
+### Border Radius Scale
+| Value | Context |
+|-------|---------|
+| 0px | Default for everything — buttons, cards, containers, images |
+| 1px | Subtle span elements |
+| 2px | Badges, close buttons, cookie elements — barely perceptible |
+| 20px | Toggle switches only — the sole rounded element |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Level 0 (Abyss) | `#000000` flat | Page background, deepest layer |
+| Level 1 (Surface) | `#181818` or `#202020` | Cards, content panels, elevated sections |
+| Level 2 (Overlay) | `rgba(0,0,0,0.7)` | Modal backdrops, video dimming |
+| Level 3 (Fog) | `rgba(0,0,0,0.5)` | Lighter overlays, hover states |
+| Level 4 (Mist) | `rgba(0,0,0,0.25)` | Subtle depth hints |
+
+### Shadow Philosophy
+Lamborghini achieves depth through surface color layering rather than shadows. On a black canvas, traditional drop shadows are invisible — instead, the system creates elevation by shifting from absolute black to progressively lighter dark grays: `#000000` → `#181818` → `#202020` → `#494949`. This "darkness gradient" approach means that elevated elements are literally lighter than their surroundings, inverting the traditional shadow model.
+
+### Decorative Depth
+- Full-bleed video provides atmospheric depth through cinematic lighting
+- The hexagonal pause button floats with a thin white outline stroke
+- Progress bars at hero section bottoms create a subtle horizon line
+- No gradients, glows, or blur effects on UI elements — the photography provides all visual richness
+
+## 7. Do's and Don'ts
+
+### Do
+- Use absolute black (`#000000`) as the primary background — never dark gray as a substitute
+- Apply Lamborghini Gold (`#FFC000`) exclusively for primary CTA buttons — never for decorative purposes
+- Set all display headings in uppercase with LamboType — the brand voice is always SHOUTING
+- Use zero border-radius on buttons and cards — sharp angles are non-negotiable
+- Maintain tight line-heights (0.92–1.19) on display type to create dense, architectural text blocks
+- Use the transparent ghost button (white border, 50% opacity) as the secondary CTA on dark backgrounds
+- Let full-viewport video/photography carry emotional weight — UI is infrastructure, not decoration
+- Reserve hexagonal geometry for UI icons and the video control button
+- Use weight 400 (regular) for headlines — the typeface is distinctive enough without bold emphasis
+- Keep the gray palette achromatic — all neutrals are pure gray without color tinting
+
+### Don't
+- Introduce additional accent colors beyond gold — the monochrome-plus-gold system is sacred
+- Apply border-radius to buttons or cards — curved edges contradict the angular vehicle aesthetic
+- Use LamboType in italic or decorative styles — the brand is always upright and direct
+- Add gradients to buttons or surfaces — depth comes from surface layering, not blending
+- Use light backgrounds as the primary canvas — darkness is the default state, light is the exception
+- Mix lowercase into display headings — the uppercase convention communicates authority and power
+- Add hover animations with scale or translate — interactions should be color-only (background/opacity shifts)
+- Use Open Sans for display text — LamboType must handle all visible typography
+- Create busy layouts with many small elements — Lamborghini's design is about singular, bold statements
+- Apply shadows to elements — on a black canvas, shadows are meaningless; use surface color shifts instead
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <425px | Single column, reduced type scale, stacked buttons |
+| Mobile | 425-576px | Single column, hamburger nav, hero text ~40px |
+| Tablet Small | 576-768px | 2-column grid begins, padding adjusts |
+| Tablet | 768-1024px | 2-column layout, expanded hero, vehicle cards side-by-side |
+| Desktop | 1024-1280px | Full navigation, 3+ column grids, display text at 80px |
+| Desktop Large | 1280-1440px | Full layout, hero at 120px display, max-width containers |
+| Wide | >1440px | Content centered, margins expand, hero fills viewport |
+
+### Touch Targets
+- Gold CTA buttons: 48px+ minimum height with 24px padding (exceeds WCAG 44×44px)
+- Ghost buttons: 48px+ with 16px padding
+- Hamburger menu: large touch target (~48px square)
+- Hexagonal pause button: approximately 48px diameter
+
+### Collapsing Strategy
+- **Navigation**: Always hamburger-based ("MENU" + icon) — no horizontal nav expansion on any breakpoint
+- **Hero video**: Maintains full-viewport height across all breakpoints, adjusting object-fit
+- **Display type**: Scales from 120px (desktop) → 80px (tablet) → 54px/40px (mobile)
+- **Button layout**: Side-by-side on desktop, stacks vertically on mobile
+- **Grid columns**: 3-column → 2-column → 1-column progression
+- **Section spacing**: Reduces from 56px → 40px → 24px vertical padding
+
+### Image Behavior
+- Hero videos use `object-fit: cover` to maintain cinematic framing at all sizes
+- Vehicle images scale within their containers with maintained aspect ratios
+- Event photography crops to viewport width on narrow screens
+- Background images darken at edges to maintain text contrast on all viewports
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: "Lamborghini Gold (#FFC000)"
+- Background: "Absolute Black (#000000)"
+- Surface: "Charcoal (#202020)"
+- Heading text: "Pure White (#FFFFFF)"
+- Body text: "Ash (#7D7D7D)"
+- Link hover: "Link Blue (#3860BE)"
+- Accent: "Cyan Pulse (#29ABE2)"
+- Border: "Pure White (#FFFFFF) at 50% opacity"
+
+### Example Component Prompts
+- "Create a hero section with a full-viewport black background, the model name 'TEMERARIO' in LamboType at 120px uppercase weight 400 white text with 0.92 line-height, centered vertically, with a Lamborghini Gold (#FFC000) 'Discover More' button below — sharp corners, 0px radius, 24px padding, black text"
+- "Design a transparent ghost button with 1px solid white border at 50% opacity, white text at 14.4px uppercase with 0.2px letter-spacing, padding 16px, on a black background — hover state changes to Teal Action (#1EAEDB) background with 70% opacity"
+- "Build a navigation bar with zero visible background on absolute black, a centered bull logo, 'MENU' text label with hamburger icon on the left, and search + bookmark icons on the right — all in white, sticky position"
+- "Create a news card grid on charcoal (#202020) background with white headlines at 27px uppercase, body text in #7D7D7D at 16px, and a white underlined 'Read More' link that turns #3860BE on hover"
+- "Design a section divider using a 1px solid bottom border in #202020 on a black canvas — the elevation difference is purely through surface color shift, not shadow"
+
+### Iteration Guide
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time — Lamborghini's system is extreme and every element must feel aggressive
+2. Reference specific color names and hex codes from this document — the palette has only about 5 active colors
+3. Use natural language descriptions, not CSS values — "sharp-cut golden rectangle" not "border-radius: 0px; background: #FFC000"
+4. Describe the desired "feel" alongside specific measurements — "floating in total darkness" communicates the black canvas better than "background: #000000"
+5. Remember that UPPERCASE IS THE DEFAULT — if text isn't uppercase at display sizes, it probably should be

vibn-frontend/lib/scaffold/open-design/design-systems/levels/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Levels
+
+> Category: Layout & Structure
+> Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.
+
+## 1. Visual Theme & Atmosphere
+
+Conversion-focused design that removes friction and guides users toward action through clarity, trust, and speed.
+
+- **Visual style:** modern, 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:** `#27272A` — 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 (#27272A) 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 `#27272A`; 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 (#27272A) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/linear-app/DESIGN.md

@@ -0,0 +1,370 @@
+# Design System Inspired by Linear
+
+> Category: Productivity & SaaS
+> Project management. Ultra-minimal, precise, purple accent.
+
+## 1. Visual Theme & Atmosphere
+
+Linear's website is a masterclass in dark-mode-first product design — a near-black canvas (`#08090a`) where content emerges from darkness like starlight. The overall impression is one of extreme precision engineering: every element exists in a carefully calibrated hierarchy of luminance, from barely-visible borders (`rgba(255,255,255,0.05)`) to soft, luminous text (`#f7f8f8`). This is not a dark theme applied to a light design — it is darkness as the native medium, where information density is managed through subtle gradations of white opacity rather than color variation.
+
+The typography system is built entirely on Inter Variable with OpenType features `"cv01"` and `"ss03"` enabled globally, giving the typeface a cleaner, more geometric character. Inter is used at a remarkable range of weights — from 300 (light body) through 510 (medium, Linear's signature weight) to 590 (semibold emphasis). The 510 weight is particularly distinctive: it sits between regular and medium, creating a subtle emphasis that doesn't shout. At display sizes (72px, 64px, 48px), Inter uses aggressive negative letter-spacing (-1.584px to -1.056px), creating compressed, authoritative headlines that feel engineered rather than designed. Berkeley Mono serves as the monospace companion for code and technical labels, with fallbacks to ui-monospace, SF Mono, and Menlo.
+
+The color system is almost entirely achromatic — dark backgrounds with white/gray text — punctuated by a single brand accent: Linear's signature indigo-violet (`#5e6ad2` for backgrounds, `#7170ff` for interactive accents). This accent color is used sparingly and intentionally, appearing only on CTAs, active states, and brand elements. The border system uses ultra-thin, semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) that create structure without visual noise, like wireframes drawn in moonlight.
+
+**Key Characteristics:**
+- Dark-mode-native: `#08090a` marketing background, `#0f1011` panel background, `#191a1b` elevated surfaces
+- Inter Variable with `"cv01", "ss03"` globally — geometric alternates for a cleaner aesthetic
+- Signature weight 510 (between regular and medium) for most UI text
+- Aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
+- Brand indigo-violet: `#5e6ad2` (bg) / `#7170ff` (accent) / `#828fff` (hover) — the only chromatic color in the system
+- Semi-transparent white borders throughout: `rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`
+- Button backgrounds at near-zero opacity: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
+- Multi-layered shadows with inset variants for depth on dark surfaces
+- Radix UI primitives as the component foundation (6 detected primitives)
+- Success green (`#27a644`, `#10b981`) used only for status indicators
+
+## 2. Color Palette & Roles
+
+### Background Surfaces
+- **Marketing Black** (`#010102` / `#08090a`): The deepest background — the canvas for hero sections and marketing pages. Near-pure black with an imperceptible blue-cool undertone.
+- **Panel Dark** (`#0f1011`): Sidebar and panel backgrounds. One step up from the marketing black.
+- **Level 3 Surface** (`#191a1b`): Elevated surface areas, card backgrounds, dropdowns.
+- **Secondary Surface** (`#28282c`): The lightest dark surface — used for hover states and slightly elevated components.
+
+### Text & Content
+- **Primary Text** (`#f7f8f8`): Near-white with a barely-warm cast. The default text color — not pure white, preventing eye strain on dark backgrounds.
+- **Secondary Text** (`#d0d6e0`): Cool silver-gray for body text, descriptions, and secondary content.
+- **Tertiary Text** (`#8a8f98`): Muted gray for placeholders, metadata, and de-emphasized content.
+- **Quaternary Text** (`#62666d`): The most subdued text — timestamps, disabled states, subtle labels.
+
+### Brand & Accent
+- **Brand Indigo** (`#5e6ad2`): Primary brand color — used for CTA button backgrounds, brand marks, and key interactive surfaces.
+- **Accent Violet** (`#7170ff`): Brighter variant for interactive elements — links, active states, selected items.
+- **Accent Hover** (`#828fff`): Lighter, more saturated variant for hover states on accent elements.
+- **Security Lavender** (`#7a7fad`): Muted indigo used specifically for security-related UI elements.
+
+### Status Colors
+- **Green** (`#27a644`): Primary success/active status. Used for "in progress" indicators.
+- **Emerald** (`#10b981`): Secondary success — pill badges, completion states.
+
+### Border & Divider
+- **Border Primary** (`#23252a`): Solid dark border for prominent separations.
+- **Border Secondary** (`#34343a`): Slightly lighter solid border.
+- **Border Tertiary** (`#3e3e44`): Lightest solid border variant.
+- **Border Subtle** (`rgba(255,255,255,0.05)`): Ultra-subtle semi-transparent border — the default.
+- **Border Standard** (`rgba(255,255,255,0.08)`): Standard semi-transparent border for cards, inputs, code blocks.
+- **Line Tint** (`#141516`): Nearly invisible line for the subtlest divisions.
+- **Line Tertiary** (`#18191a`): Slightly more visible divider line.
+
+### Light Mode Neutrals (for light theme contexts)
+- **Light Background** (`#f7f8f8`): Page background in light mode.
+- **Light Surface** (`#f3f4f5` / `#f5f6f7`): Subtle surface tinting.
+- **Light Border** (`#d0d6e0`): Visible border in light contexts.
+- **Light Border Alt** (`#e6e6e6`): Alternative lighter border.
+- **Pure White** (`#ffffff`): Card surfaces, highlights.
+
+### Overlay
+- **Overlay Primary** (`rgba(0,0,0,0.85)`): Modal/dialog backdrop — extremely dark for focus isolation.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Inter Variable`, with fallbacks: `SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue`
+- **Monospace**: `Berkeley Mono`, with fallbacks: `ui-monospace, SF Mono, Menlo`
+- **OpenType Features**: `"cv01", "ss03"` enabled globally — cv01 provides an alternate lowercase 'a' (single-story), ss03 adjusts specific letterforms for a cleaner geometric appearance.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display XL | Inter Variable | 72px (4.50rem) | 510 | 1.00 (tight) | -1.584px | Hero headlines, maximum impact |
+| Display Large | Inter Variable | 64px (4.00rem) | 510 | 1.00 (tight) | -1.408px | Secondary hero text |
+| Display | Inter Variable | 48px (3.00rem) | 510 | 1.00 (tight) | -1.056px | Section headlines |
+| Heading 1 | Inter Variable | 32px (2.00rem) | 400 | 1.13 (tight) | -0.704px | Major section titles |
+| Heading 2 | Inter Variable | 24px (1.50rem) | 400 | 1.33 | -0.288px | Sub-section headings |
+| Heading 3 | Inter Variable | 20px (1.25rem) | 590 | 1.33 | -0.24px | Feature titles, card headers |
+| Body Large | Inter Variable | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.165px | Introduction text, feature descriptions |
+| Body Emphasis | Inter Variable | 17px (1.06rem) | 590 | 1.60 (relaxed) | normal | Emphasized body, sub-headings in content |
+| Body | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
+| Body Medium | Inter Variable | 16px (1.00rem) | 510 | 1.50 | normal | Navigation, labels |
+| Body Semibold | Inter Variable | 16px (1.00rem) | 590 | 1.50 | normal | Strong emphasis |
+| Small | Inter Variable | 15px (0.94rem) | 400 | 1.60 (relaxed) | -0.165px | Secondary body text |
+| Small Medium | Inter Variable | 15px (0.94rem) | 510 | 1.60 (relaxed) | -0.165px | Emphasized small text |
+| Small Semibold | Inter Variable | 15px (0.94rem) | 590 | 1.60 (relaxed) | -0.165px | Strong small text |
+| Small Light | Inter Variable | 15px (0.94rem) | 300 | 1.47 | -0.165px | De-emphasized body |
+| Caption Large | Inter Variable | 14px (0.88rem) | 510–590 | 1.50 | -0.182px | Sub-labels, category headers |
+| Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Metadata, timestamps |
+| Label | Inter Variable | 12px (0.75rem) | 400–590 | 1.40 | normal | Button text, small labels |
+| Micro | Inter Variable | 11px (0.69rem) | 510 | 1.40 | normal | Tiny labels |
+| Tiny | Inter Variable | 10px (0.63rem) | 400–510 | 1.50 | -0.15px | Overline text, sometimes uppercase |
+| Link Large | Inter Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard links |
+| Link Medium | Inter Variable | 15px (0.94rem) | 510 | 2.67 | normal | Spaced navigation links |
+| Link Small | Inter Variable | 14px (0.88rem) | 510 | 1.50 | normal | Compact links |
+| Link Caption | Inter Variable | 13px (0.81rem) | 400–510 | 1.50 | -0.13px | Footer, metadata links |
+| Mono Body | Berkeley Mono | 14px (0.88rem) | 400 | 1.50 | normal | Code blocks |
+| Mono Caption | Berkeley Mono | 13px (0.81rem) | 400 | 1.50 | normal | Code labels |
+| Mono Label | Berkeley Mono | 12px (0.75rem) | 400 | 1.40 | normal | Code metadata, sometimes uppercase |
+
+### Principles
+- **510 is the signature weight**: Linear uses Inter Variable's 510 weight (between regular 400 and medium 500) as its default emphasis weight. This creates a subtly bolded feel without the heaviness of traditional medium or semibold.
+- **Compression at scale**: Display sizes use progressively tighter letter-spacing — -1.584px at 72px, -1.408px at 64px, -1.056px at 48px, -0.704px at 32px. Below 24px, spacing relaxes toward normal.
+- **OpenType as identity**: `"cv01", "ss03"` aren't decorative — they transform Inter into Linear's distinctive typeface, giving it a more geometric, purposeful character.
+- **Three-tier weight system**: 400 (reading), 510 (emphasis/UI), 590 (strong emphasis). The 300 weight appears only in deliberately de-emphasized contexts.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost Button (Default)**
+- Background: `rgba(255,255,255,0.02)`
+- Text: `#e2e4e7` (near-white)
+- Padding: comfortable
+- Radius: 6px
+- Border: `1px solid rgb(36, 40, 44)`
+- Outline: none
+- Focus shadow: `rgba(0,0,0,0.1) 0px 4px 12px`
+- Use: Standard actions, secondary CTAs
+
+**Subtle Button**
+- Background: `rgba(255,255,255,0.04)`
+- Text: `#d0d6e0` (silver-gray)
+- Padding: 0px 6px
+- Radius: 6px
+- Use: Toolbar actions, contextual buttons
+
+**Primary Brand Button (Inferred)**
+- Background: `#5e6ad2` (brand indigo)
+- Text: `#ffffff`
+- Padding: 8px 16px
+- Radius: 6px
+- Hover: `#828fff` shift
+- Use: Primary CTAs ("Start building", "Sign up")
+
+**Icon Button (Circle)**
+- Background: `rgba(255,255,255,0.03)` or `rgba(255,255,255,0.05)`
+- Text: `#f7f8f8` or `#ffffff`
+- Radius: 50%
+- Border: `1px solid rgba(255,255,255,0.08)`
+- Use: Close, menu toggle, icon-only actions
+
+**Pill Button**
+- Background: transparent
+- Text: `#d0d6e0`
+- Padding: 0px 10px 0px 5px
+- Radius: 9999px
+- Border: `1px solid rgb(35, 37, 42)`
+- Use: Filter chips, tags, status indicators
+
+**Small Toolbar Button**
+- Background: `rgba(255,255,255,0.05)`
+- Text: `#62666d` (muted)
+- Radius: 2px
+- Border: `1px solid rgba(255,255,255,0.05)`
+- Shadow: `rgba(0,0,0,0.03) 0px 1.2px 0px 0px`
+- Font: 12px weight 510
+- Use: Toolbar actions, quick-access controls
+
+### Cards & Containers
+- Background: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)` (never solid — always translucent)
+- Border: `1px solid rgba(255,255,255,0.08)` (standard) or `1px solid rgba(255,255,255,0.05)` (subtle)
+- Radius: 8px (standard), 12px (featured), 22px (large panels)
+- Shadow: `rgba(0,0,0,0.2) 0px 0px 0px 1px` or layered multi-shadow stacks
+- Hover: subtle background opacity increase
+
+### Inputs & Forms
+
+**Text Area**
+- Background: `rgba(255,255,255,0.02)`
+- Text: `#d0d6e0`
+- Border: `1px solid rgba(255,255,255,0.08)`
+- Padding: 12px 14px
+- Radius: 6px
+
+**Search Input**
+- Background: transparent
+- Text: `#f7f8f8`
+- Padding: 1px 32px (icon-aware)
+
+**Button-style Input**
+- Text: `#8a8f98`
+- Padding: 1px 6px
+- Radius: 5px
+- Focus shadow: multi-layer stack
+
+### Badges & Pills
+
+**Success Pill**
+- Background: `#10b981`
+- Text: `#f7f8f8`
+- Radius: 50% (circular)
+- Font: 10px weight 510
+- Use: Status dots, completion indicators
+
+**Neutral Pill**
+- Background: transparent
+- Text: `#d0d6e0`
+- Padding: 0px 10px 0px 5px
+- Radius: 9999px
+- Border: `1px solid rgb(35, 37, 42)`
+- Font: 12px weight 510
+- Use: Tags, filter chips, category labels
+
+**Subtle Badge**
+- Background: `rgba(255,255,255,0.05)`
+- Text: `#f7f8f8`
+- Padding: 0px 8px 0px 2px
+- Radius: 2px
+- Border: `1px solid rgba(255,255,255,0.05)`
+- Font: 10px weight 510
+- Use: Inline labels, version tags
+
+### Navigation
+- Dark sticky header on near-black background
+- Linear logomark left-aligned (SVG icon)
+- Links: Inter Variable 13–14px weight 510, `#d0d6e0` text
+- Active/hover: text lightens to `#f7f8f8`
+- CTA: Brand indigo button or ghost button
+- Mobile: hamburger collapse
+- Search: command palette trigger (`/` or `Cmd+K`)
+
+### Image Treatment
+- Product screenshots on dark backgrounds with subtle border (`rgba(255,255,255,0.08)`)
+- Top-rounded images: `12px 12px 0px 0px` radius
+- Dashboard/issue previews dominate feature sections
+- Subtle shadow beneath screenshots: `rgba(0,0,0,0.4) 0px 2px 4px`
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 1px, 4px, 7px, 8px, 11px, 12px, 16px, 19px, 20px, 22px, 24px, 28px, 32px, 35px
+- The 7px and 11px values suggest micro-adjustments for optical alignment
+- Primary rhythm: 8px, 16px, 24px, 32px (standard 8px grid)
+
+### Grid & Container
+- Max content width: approximately 1200px
+- Hero: centered single-column with generous vertical padding
+- Feature sections: 2–3 column grids for feature cards
+- Full-width dark sections with internal max-width constraints
+- Changelog: single-column timeline layout
+
+### Whitespace Philosophy
+- **Darkness as space**: On Linear's dark canvas, empty space isn't white — it's absence. The near-black background IS the whitespace, and content emerges from it.
+- **Compressed headlines, expanded surroundings**: Display text at 72px with -1.584px tracking is dense and compressed, but sits within vast dark padding. The contrast between typographic density and spatial generosity creates tension.
+- **Section isolation**: Each feature section is separated by generous vertical padding (80px+) with no visible dividers — the dark background provides natural separation.
+
+### Border Radius Scale
+- Micro (2px): Inline badges, toolbar buttons, subtle tags
+- Standard (4px): Small containers, list items
+- Comfortable (6px): Buttons, inputs, functional elements
+- Card (8px): Cards, dropdowns, popovers
+- Panel (12px): Panels, featured cards, section containers
+- Large (22px): Large panel elements
+- Full Pill (9999px): Chips, filter pills, status tags
+- Circle (50%): Icon buttons, avatars, status dots
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, `#010102` bg | Page background, deepest canvas |
+| Subtle (Level 1) | `rgba(0,0,0,0.03) 0px 1.2px 0px` | Toolbar buttons, micro-elevation |
+| Surface (Level 2) | `rgba(255,255,255,0.05)` bg + `1px solid rgba(255,255,255,0.08)` border | Cards, input fields, containers |
+| Inset (Level 2b) | `rgba(0,0,0,0.2) 0px 0px 12px 0px inset` | Recessed panels, inner shadows |
+| Ring (Level 3) | `rgba(0,0,0,0.2) 0px 0px 0px 1px` | Border-as-shadow technique |
+| Elevated (Level 4) | `rgba(0,0,0,0.4) 0px 2px 4px` | Floating elements, dropdowns |
+| Dialog (Level 5) | Multi-layer stack: `rgba(0,0,0,0) 0px 8px 2px, rgba(0,0,0,0.01) 0px 5px 2px, rgba(0,0,0,0.04) 0px 3px 2px, rgba(0,0,0,0.07) 0px 1px 1px, rgba(0,0,0,0.08) 0px 0px 1px` | Popovers, command palette, modals |
+| Focus | `rgba(0,0,0,0.1) 0px 4px 12px` + additional layers | Keyboard focus on interactive elements |
+
+**Shadow Philosophy**: On dark surfaces, traditional shadows (dark on dark) are nearly invisible. Linear solves this by using semi-transparent white borders as the primary depth indicator. Elevation isn't communicated through shadow darkness but through background luminance steps — each level slightly increases the white opacity of the surface background (`0.02` → `0.04` → `0.05`), creating a subtle stacking effect. The inset shadow technique (`rgba(0,0,0,0.2) 0px 0px 12px 0px inset`) creates a unique "sunken" effect for recessed panels, adding dimensional depth that traditional dark themes lack.
+
+## 7. Do's and Don'ts
+
+### Do
+- Use Inter Variable with `"cv01", "ss03"` on ALL text — these features are fundamental to Linear's typeface identity
+- Use weight 510 as your default emphasis weight — it's Linear's signature between-weight
+- Apply aggressive negative letter-spacing at display sizes (-1.584px at 72px, -1.056px at 48px)
+- Build on near-black backgrounds: `#08090a` for marketing, `#0f1011` for panels, `#191a1b` for elevated surfaces
+- Use semi-transparent white borders (`rgba(255,255,255,0.05)` to `rgba(255,255,255,0.08)`) instead of solid dark borders
+- Keep button backgrounds nearly transparent: `rgba(255,255,255,0.02)` to `rgba(255,255,255,0.05)`
+- Reserve brand indigo (`#5e6ad2` / `#7170ff`) for primary CTAs and interactive accents only
+- Use `#f7f8f8` for primary text — not pure `#ffffff`, which would be too harsh
+- Apply the luminance stacking model: deeper = darker bg, elevated = slightly lighter bg
+
+### Don't
+- Don't use pure white (`#ffffff`) as primary text — `#f7f8f8` prevents eye strain
+- Don't use solid colored backgrounds for buttons — transparency is the system (rgba white at 0.02–0.05)
+- Don't apply the brand indigo decoratively — it's reserved for interactive/CTA elements only
+- Don't use positive letter-spacing on display text — Inter at large sizes always runs negative
+- Don't use visible/opaque borders on dark backgrounds — borders should be whisper-thin semi-transparent white
+- Don't skip the OpenType features (`"cv01", "ss03"`) — without them, it's generic Inter, not Linear's Inter
+- Don't use weight 700 (bold) — Linear's maximum weight is 590, with 510 as the workhorse
+- Don't introduce warm colors into the UI chrome — the palette is cool gray with blue-violet accent only
+- Don't use drop shadows for elevation on dark surfaces — use background luminance stepping instead
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <600px | Single column, compact padding |
+| Mobile | 600–640px | Standard mobile layout |
+| Tablet | 640–768px | Two-column grids begin |
+| Desktop Small | 768–1024px | Full card grids, expanded padding |
+| Desktop | 1024–1280px | Standard desktop, full navigation |
+| Large Desktop | >1280px | Full layout, generous margins |
+
+### Touch Targets
+- Buttons use comfortable padding with 6px radius minimum
+- Navigation links at 13–14px with adequate spacing
+- Pill tags have 10px horizontal padding for touch accessibility
+- Icon buttons at 50% radius ensure circular, easy-to-tap targets
+- Search trigger is prominently placed with generous hit area
+
+### Collapsing Strategy
+- Hero: 72px → 48px → 32px display text, tracking adjusts proportionally
+- Navigation: horizontal links + CTAs → hamburger menu at 768px
+- Feature cards: 3-column → 2-column → single column stacked
+- Product screenshots: maintain aspect ratio, may reduce padding
+- Changelog: timeline maintains single-column through all sizes
+- Footer: multi-column → stacked single column
+- Section spacing: 80px+ → 48px on mobile
+
+### Image Behavior
+- Dashboard screenshots maintain border treatment at all sizes
+- Hero visuals simplify on mobile (fewer floating UI elements)
+- Product screenshots use responsive sizing with consistent radius
+- Dark background ensures screenshots blend naturally at any viewport
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Brand Indigo (`#5e6ad2`)
+- Page Background: Marketing Black (`#08090a`)
+- Panel Background: Panel Dark (`#0f1011`)
+- Surface: Level 3 (`#191a1b`)
+- Heading text: Primary White (`#f7f8f8`)
+- Body text: Silver Gray (`#d0d6e0`)
+- Muted text: Tertiary Gray (`#8a8f98`)
+- Subtle text: Quaternary Gray (`#62666d`)
+- Accent: Violet (`#7170ff`)
+- Accent Hover: Light Violet (`#828fff`)
+- Border (default): `rgba(255,255,255,0.08)`
+- Border (subtle): `rgba(255,255,255,0.05)`
+- Focus ring: Multi-layer shadow stack
+
+### Example Component Prompts
+- "Create a hero section on `#08090a` background. Headline at 48px Inter Variable weight 510, line-height 1.00, letter-spacing -1.056px, color `#f7f8f8`, font-feature-settings `'cv01', 'ss03'`. Subtitle at 18px weight 400, line-height 1.60, color `#8a8f98`. Brand CTA button (`#5e6ad2`, 6px radius, 8px 16px padding) and ghost button (`rgba(255,255,255,0.02)` bg, `1px solid rgba(255,255,255,0.08)` border, 6px radius)."
+- "Design a card on dark background: `rgba(255,255,255,0.02)` background, `1px solid rgba(255,255,255,0.08)` border, 8px radius. Title at 20px Inter Variable weight 590, letter-spacing -0.24px, color `#f7f8f8`. Body at 15px weight 400, color `#8a8f98`, letter-spacing -0.165px."
+- "Build a pill badge: transparent background, `#d0d6e0` text, 9999px radius, 0px 10px padding, `1px solid #23252a` border, 12px Inter Variable weight 510."
+- "Create navigation: dark sticky header on `#0f1011`. Inter Variable 13px weight 510 for links, `#d0d6e0` text. Brand indigo CTA `#5e6ad2` right-aligned with 6px radius. Bottom border: `1px solid rgba(255,255,255,0.05)`."
+- "Design a command palette: `#191a1b` background, `1px solid rgba(255,255,255,0.08)` border, 12px radius, multi-layer shadow stack. Input at 16px Inter Variable weight 400, `#f7f8f8` text. Results list with 13px weight 510 labels in `#d0d6e0` and 12px metadata in `#62666d`."
+
+### Iteration Guide
+1. Always set font-feature-settings `"cv01", "ss03"` on all Inter text — this is non-negotiable for Linear's look
+2. Letter-spacing scales with font size: -1.584px at 72px, -1.056px at 48px, -0.704px at 32px, normal below 16px
+3. Three weights: 400 (read), 510 (emphasize/navigate), 590 (announce)
+4. Surface elevation via background opacity: `rgba(255,255,255, 0.02 → 0.04 → 0.05)` — never solid backgrounds on dark
+5. Brand indigo (`#5e6ad2` / `#7170ff`) is the only chromatic color — everything else is grayscale
+6. Borders are always semi-transparent white, never solid dark colors on dark backgrounds
+7. Berkeley Mono for any code or technical content, Inter Variable for everything else

vibn-frontend/lib/scaffold/open-design/design-systems/linear-app/components.html

@@ -0,0 +1,370 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Linear — reference components</title>
+    <meta
+      name="description"
+      content="Reference fixture for design-systems/linear-app. Every visible
+        value comes from tokens.css. Linear's signature moves: near-black
+        canvas, Inter Variable with cv01+ss03, weight-510 emphasis, indigo
+        accent, semi-transparent white borders, luminance stepping for depth."
+    />
+
+    <style>
+      :root {
+        --bg:           #08090a;
+        --surface:      #191a1b;
+        --surface-warm: var(--surface);
+
+        --fg:   #f7f8f8;
+        --fg-2: #d0d6e0;
+        --muted: #8a8f98;
+        --meta:  #62666d;
+
+        --border:      rgba(255, 255, 255, 0.08);
+        --border-soft: rgba(255, 255, 255, 0.05);
+
+        --accent:        #5e6ad2;
+        --accent-on:     #ffffff;
+        --accent-hover:  #828fff;
+        --accent-active: #4752c4;
+
+        --success: #27a644;
+        --warn:    #eab308;
+        --danger:  #dc2626;
+
+        --font-display: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
+        --font-body:    "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
+        --font-mono:    "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+        --text-xs:   12px;
+        --text-sm:   14px;
+        --text-base: 16px;
+        --text-lg:   18px;
+        --text-xl:   24px;
+        --text-2xl:  32px;
+        --text-3xl:  48px;
+        --text-4xl:  72px;
+
+        --leading-body:     1.5;
+        --leading-tight:    1.00;
+        --tracking-display: -0.022em;
+
+        --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: 80px;
+        --section-y-tablet:  48px;
+        --section-y-phone:   32px;
+
+        --radius-sm:   6px;
+        --radius-md:   8px;
+        --radius-lg:   12px;
+        --radius-pill: 9999px;
+
+        --elev-flat:   none;
+        --elev-ring:   0 0 0 1px var(--border);
+        --elev-raised:
+          rgba(0, 0, 0, 0.4) 0px 2px 4px,
+          0 0 0 1px rgba(255, 255, 255, 0.05);
+
+        --focus-ring: 0 0 0 2px color-mix(in oklab, var(--accent), transparent 30%), 0 4px 12px rgba(0, 0, 0, 0.1);
+
+        --motion-fast:   150ms;
+        --motion-base:   200ms;
+        --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+        --container-max:            1200px;
+        --container-gutter-desktop: 24px;
+        --container-gutter-tablet:  16px;
+        --container-gutter-phone:   12px;
+      }
+
+      *, *::before, *::after { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; }
+      body {
+        background: var(--bg);
+        color: var(--fg-2);
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        line-height: var(--leading-body);
+        /* Linear's signature: cv01 (alternate 'a') + ss03 (geometric alternates). */
+        font-feature-settings: "cv01", "ss03";
+        -webkit-font-smoothing: antialiased;
+      }
+
+      .container {
+        max-width: var(--container-max);
+        margin-inline: auto;
+        padding-inline: var(--container-gutter-desktop);
+      }
+      section { padding-block: var(--section-y-desktop); }
+      section + section { border-top: 1px solid var(--border); }
+      @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); }
+      }
+
+      /* ─── Typography ────────────────────────────────────────────── */
+      h1, h2, h3 {
+        font-family: var(--font-display);
+        font-weight: 510;              /* Linear's signature between-weight */
+        margin: 0;
+        color: var(--fg);
+        font-feature-settings: "cv01", "ss03";
+        line-height: var(--leading-tight);
+      }
+      h1 {
+        font-size: var(--text-4xl);
+        letter-spacing: var(--tracking-display);
+      }
+      h2 {
+        font-size: var(--text-2xl);
+        /* 32px heading 1: line-height 1.13, tracking -0.704px (-0.022em). */
+        line-height: 1.13;
+        letter-spacing: -0.022em;
+      }
+      h3 {
+        font-size: var(--text-xl);
+        /* 24px heading 2: line-height 1.33, tracking -0.288px (-0.012em).
+           Overrides the shared 1.00 set on h1/h2/h3 above. */
+        line-height: 1.33;
+        letter-spacing: -0.012em;
+        font-weight: 590;
+      }
+      p { margin: 0; }
+      .lead {
+        font-size: var(--text-lg);
+        line-height: 1.60;
+        color: var(--muted);
+        font-weight: 400;
+        letter-spacing: -0.009em;
+      }
+      .body-muted { color: var(--muted); }
+      .body-sm { font-size: var(--text-sm); color: var(--muted); }
+      .eyebrow {
+        font-size: var(--text-xs);
+        font-weight: 510;
+        color: var(--meta);
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+      }
+      .stack-3 > * + * { margin-block-start: var(--space-3); }
+      .stack-4 > * + * { margin-block-start: var(--space-4); }
+      .stack-6 > * + * { margin-block-start: var(--space-6); }
+
+      /* ─── Buttons ───────────────────────────────────────────────── */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 8px 16px;
+        border-radius: var(--radius-sm);
+        font-family: var(--font-display);
+        font-size: var(--text-sm);
+        font-weight: 510;
+        font-feature-settings: "cv01", "ss03";
+        line-height: 1;
+        cursor: pointer;
+        border: 1px solid transparent;
+        transition: background-color var(--motion-fast) var(--ease-standard),
+                    color var(--motion-fast) var(--ease-standard);
+        text-decoration: none;
+      }
+      .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); }
+      .btn-ghost {
+        background: rgba(255, 255, 255, 0.02);
+        color: #e2e4e7;
+        border-color: rgba(36, 40, 44, 1);
+      }
+      .btn-ghost:hover { background: rgba(255, 255, 255, 0.05); }
+
+      /* ─── Pill badges ───────────────────────────────────────────── */
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        padding: 0 10px 0 5px;
+        border-radius: var(--radius-pill);
+        font-size: var(--text-xs);
+        font-weight: 510;
+        color: var(--fg-2);
+        border: 1px solid #23252a;
+        line-height: 1.8;
+      }
+
+      /* ─── Cards ─────────────────────────────────────────────────── */
+      .card {
+        background: rgba(255, 255, 255, 0.02);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
+        transition: background-color var(--motion-base) var(--ease-standard);
+      }
+      .card:hover { background: rgba(255, 255, 255, 0.04); }
+
+      /* ─── Inputs ────────────────────────────────────────────────── */
+      .field { display: flex; flex-direction: column; gap: var(--space-2); }
+      .field label {
+        font-size: var(--text-sm);
+        font-weight: 510;
+        color: var(--fg-2);
+        font-feature-settings: "cv01", "ss03";
+      }
+      .field input {
+        background: rgba(255, 255, 255, 0.02);
+        color: var(--fg-2);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        padding: 12px 14px;
+        font-family: var(--font-body);
+        font-size: var(--text-base);
+        font-feature-settings: "cv01", "ss03";
+        outline: none;
+        transition: border-color var(--motion-fast) var(--ease-standard);
+      }
+      .field input::placeholder { color: var(--meta); }
+      .field input:focus { border-color: var(--accent); }
+
+      /* ─── Layout ────────────────────────────────────────────────── */
+      .hero-grid {
+        display: grid;
+        grid-template-columns: 1.2fr 1fr;
+        gap: var(--space-12);
+        align-items: center;
+      }
+      @media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
+      .features-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: var(--space-4);
+      }
+      @media (max-width: 1023px) { .features-grid { grid-template-columns: 1fr 1fr; } }
+      @media (max-width: 639px)  { .features-grid { grid-template-columns: 1fr; } }
+      .hero-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-6); }
+      .icon { width: 16px; height: 16px; flex-shrink: 0; }
+    </style>
+  </head>
+  <body>
+    <main class="container">
+      <!-- HERO -->
+      <section data-od-id="hero">
+        <div class="hero-grid">
+          <div class="stack-4">
+            <p class="eyebrow">Reference fixture · linear</p>
+            <h1>Built for the next era of product development.</h1>
+            <p class="lead" style="max-width:50ch">
+              Linear streamlines software projects, sprints, tasks, and bug
+              tracking. Precision engineered — from the 510 between-weight to
+              the semi-transparent white borders. Every value from tokens.css.
+            </p>
+            <div class="hero-actions">
+              <a href="./tokens.css" class="btn btn-primary">Start building</a>
+              <a href="./DESIGN.md" class="btn btn-ghost">Read the spec</a>
+            </div>
+          </div>
+
+          <aside style="display:flex;flex-direction:column;gap:var(--space-4)">
+            <div class="card">
+              <p class="eyebrow" style="margin-bottom:var(--space-3)">Issue tracker</p>
+              <div style="display:flex;flex-direction:column;gap:var(--space-2)">
+                <div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--fg-2)">
+                  <span style="width:8px;height:8px;border-radius:50%;background:#27a644;flex-shrink:0"></span>
+                  Fix token channel drift in derive script
+                </div>
+                <div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--muted)">
+                  <span style="width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0"></span>
+                  Add 10 brand oracle fixtures
+                </div>
+                <div style="display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);color:var(--meta)">
+                  <span style="width:8px;height:8px;border-radius:2px;background:rgba(255,255,255,0.1);flex-shrink:0"></span>
+                  Ship PR-B derive script
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <!-- FEATURES -->
+      <section data-od-id="features">
+        <div class="stack-3">
+          <p class="eyebrow">What this fixture exercises</p>
+          <h2 style="max-width:28ch">Darkness as the native medium.</h2>
+        </div>
+
+        <div class="features-grid" style="margin-block-start:var(--space-6)">
+          <article class="card stack-3">
+            <h3>Dark-first</h3>
+            <p class="body-sm">
+              #08090a marketing black → #191a1b elevated surface. Luminance
+              stepping, not color: each level increases white opacity by 0.02.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Weight 510</h3>
+            <p class="body-sm">
+              Inter Variable's between-weight. Not 500, not 600 — precisely 510.
+              cv01+ss03 on all text transforms generic Inter into Linear's face.
+            </p>
+          </article>
+          <article class="card stack-3">
+            <h3>Indigo accent</h3>
+            <p class="body-sm">
+              #5e6ad2 for CTA backgrounds; #7170ff for interactive; #828fff
+              on hover. The only chromatic color in an otherwise achromatic system.
+            </p>
+          </article>
+        </div>
+
+        <div style="margin-block-start:var(--space-6);display:flex;gap:var(--space-2);flex-wrap:wrap">
+          <span class="pill">All issues</span>
+          <span class="pill">Active</span>
+          <span class="pill">Backlog</span>
+          <span class="pill">Done</span>
+        </div>
+      </section>
+
+      <!-- FORM -->
+      <section data-od-id="form">
+        <div style="display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-12);align-items:start">
+          <div class="stack-4">
+            <p class="eyebrow">Form components</p>
+            <h2>Inputs on dark surfaces.</h2>
+            <p class="lead" style="max-width:44ch">
+              rgba(255,255,255,0.02) background, border: 1px solid rgba(255,255,255,0.08).
+              Focus shifts border to --accent; no halo, no blue ring.
+            </p>
+          </div>
+          <form style="display:flex;flex-direction:column;gap:var(--space-4);max-width:400px"
+                onsubmit="event.preventDefault()">
+            <div class="field">
+              <label for="email">Work email</label>
+              <input id="email" type="email" placeholder="you@company.com" />
+            </div>
+            <div style="display:flex;gap:var(--space-3);margin-top:var(--space-2)">
+              <button type="submit" class="btn btn-primary">Sign up</button>
+              <button type="button" class="btn btn-ghost">Learn more</button>
+            </div>
+          </form>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

vibn-frontend/lib/scaffold/open-design/design-systems/linear-app/tokens.css

@@ -0,0 +1,130 @@
+/* ─────────────────────────────────────────────────────────────────────────
+ * design-systems/linear-app/tokens.css
+ *
+ * Structured token bindings for the "Linear" brand — the dark-mode-native
+ * project management tool's precision engineering voice.
+ *
+ * Brand identity in three sentences:
+ *   1. Darkness as the native medium — near-black canvas (#08090a) where
+ *      information density is managed through luminance steps rather than
+ *      color variation; semi-transparent white borders throughout.
+ *   2. Inter Variable with OpenType "cv01","ss03" at all sizes, signature
+ *      weight 510 (between regular and medium), aggressive negative
+ *      letter-spacing at display sizes (-1.584px at 72px).
+ *   3. Almost entirely achromatic — the single chromatic color is Linear's
+ *      indigo-violet (#5e6ad2 bg / #7170ff interactive), used only for
+ *      CTAs and active states; everything else is grayscale.
+ *
+ * Schema decisions:
+ *   - --bg: #08090a (marketing black); --surface: #191a1b (elevated).
+ *   - --surface-warm aliases --surface (dark system, no warm tier).
+ *   - --fg: #f7f8f8 (near-white — not pure white, prevents eye strain).
+ *   - --fg-2: #d0d6e0 (silver-gray body text).
+ *   - --border: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.05).
+ *   - --accent: #5e6ad2 (brand indigo bg); --accent-hover: #828fff.
+ *   - --tracking-display: -0.022em (-1.584px / 72px normalized).
+ *   - --radius-sm: 6px (buttons/inputs); --radius-md: 8px (cards).
+ *   - --elev-raised: luminance stepping — no opaque shadow on dark.
+ * ─────────────────────────────────────────────────────────────────── */
+
+:root {
+  /* ─── Surface ──────────────────────────────────────────────────── */
+  --bg:           #08090a;              /* marketing black — hero canvas */
+  --surface:      #191a1b;              /* elevated surface — cards, dropdowns */
+  --surface-warm: var(--surface);       /* no warm tier in dark achromatic system */
+
+  /* ─── Foreground ───────────────────────────────────────────────── */
+  --fg:   #f7f8f8;                      /* near-white primary text */
+  --fg-2: #d0d6e0;                      /* silver-gray body / secondary text */
+  --muted: #8a8f98;                     /* tertiary — placeholders, metadata */
+  --meta:  #62666d;                     /* quaternary — timestamps, disabled */
+
+  /* ─── Border ───────────────────────────────────────────────────── */
+  --border:      rgba(255, 255, 255, 0.08);   /* standard semi-transparent white */
+  --border-soft: rgba(255, 255, 255, 0.05);   /* ultra-subtle divider */
+
+  /* ─── Accent ───────────────────────────────────────────────────── */
+  --accent:        #5e6ad2;             /* brand indigo — CTA backgrounds */
+  --accent-on:     #ffffff;
+  --accent-hover:  #828fff;             /* lighter saturated hover */
+  --accent-active: #4752c4;             /* darker pressed state */
+
+  /* ─── Semantic ─────────────────────────────────────────────────── */
+  --success: #27a644;                   /* Linear green */
+  --warn:    #eab308;
+  --danger:  #dc2626;
+
+  /* ─── Typography ───────────────────────────────────────────────── */
+  --font-display: "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
+  --font-body:    "Inter Variable", "Inter", "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
+  --font-mono:    "Berkeley Mono", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+  /* Type scale — DESIGN.md §Typography Hierarchy.
+   * Linear's display range 72px→10px; the 8 schema slots map the
+   * key stops. 64px secondary-hero lives inline in components.html. */
+  --text-xs:   12px;                    /* label / micro */
+  --text-sm:   14px;                    /* caption large / link small */
+  --text-base: 16px;                    /* body — standard reading */
+  --text-lg:   18px;                    /* body large — feature descriptions */
+  --text-xl:   24px;                    /* heading 2 */
+  --text-2xl:  32px;                    /* heading 1 */
+  --text-3xl:  48px;                    /* display — section headlines */
+  --text-4xl:  72px;                    /* display XL — hero */
+
+  /* Leading + tracking.
+   * --leading-tight=1.00: Linear's signature "engineered" compression.
+   * h2 (32px) → 1.13; h3 (24px) → 1.33 per DESIGN.md spec.
+   * --tracking-display: -0.022em = -1.584px / 72px normalized. */
+  --leading-body:     1.5;
+  --leading-tight:    1.00;
+  --tracking-display: -0.022em;
+
+  /* ─── Spacing ──────────────────────────────────────────────────── */
+  --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 — DESIGN.md §Whitespace Philosophy. */
+  --section-y-desktop: 80px;
+  --section-y-tablet:  48px;
+  --section-y-phone:   32px;
+
+  /* ─── Radius ───────────────────────────────────────────────────── */
+  /* 6px for buttons/inputs (comfortable), 8px cards, 12px panels. */
+  --radius-sm:   6px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-pill: 9999px;
+
+  /* ─── Elevation ────────────────────────────────────────────────── */
+  /* On dark surfaces: luminance stepping, not opaque drop shadows.
+     --elev-raised uses semi-transparent border-as-shadow technique. */
+  --elev-flat:   none;
+  --elev-ring:   0 0 0 1px var(--border);
+  --elev-raised:
+    rgba(0, 0, 0, 0.4) 0px 2px 4px,
+    0 0 0 1px rgba(255, 255, 255, 0.05);
+
+  /* ─── Focus ────────────────────────────────────────────────────── */
+  /* Multi-layer stack per DESIGN.md §6 + §7: accent ring makes the
+     indicator visible on the near-black #08090a canvas. */
+  --focus-ring:
+    0 0 0 2px color-mix(in oklab, var(--accent), transparent 30%),
+    0 4px 12px rgba(0, 0, 0, 0.1);
+
+  /* ─── Motion ───────────────────────────────────────────────────── */
+  --motion-fast:   150ms;
+  --motion-base:   200ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ─── Layout ───────────────────────────────────────────────────── */
+  --container-max:            1200px;
+  --container-gutter-desktop: 24px;
+  --container-gutter-tablet:  16px;
+  --container-gutter-phone:   12px;
+}

vibn-frontend/lib/scaffold/open-design/design-systems/lingo/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Lingo
+
+> Category: Creative & Artistic
+> Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.
+
+## 1. Visual Theme & Atmosphere
+
+Playful, minimal design with bright colors, rounded shapes, tactile 3D borders, and friendly illustrations for approachable interfaces.
+
+- **Visual style:** bold, playful
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#58CC02` — Token from style foundations.
+- **Secondary:** `#CE82FF` — Token from style foundations.
+- **Success:** `#58CC02` — Token from style foundations.
+- **Warning:** `#FFC800` — Token from style foundations.
+- **Danger:** `#FF4B4B` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#3C3C3C` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#58CC02) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#3C3C3C) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32
+- **Families:** primary=Nunito, display=Nunito, mono=JetBrains Mono
+- **Weights:** 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 `#58CC02`; 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 (#58CC02) 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.

vibn-frontend/lib/scaffold/open-design/design-systems/loom/DESIGN.md

@@ -0,0 +1,201 @@
+# Loom Design System
+
+> Category: Themed & Unique
+> Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.
+
+## 1. Visual Theme & Atmosphere
+
+A friendly, fast video-first async communication tool. Loom's design feels like a well-made productivity app — approachable, clean, and professional without being corporate. Purple accent (#625DF5) signals creativity and video without being loud. Information density is moderate, with generous whitespace that lets content breathe.
+
+- **Visual style:** clean, friendly, content-first
+- **Color stance:** bright surfaces with purple accent
+- **Design intent:** keep outputs recognizable to this style family while preserving usability and readability
+
+## 2. Color Palette & Roles
+
+### Surface Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Background | `#FFFFFF` | Primary canvas |
+| Surface | `#F7F7F8` | Cards, sidebars, elevated panels |
+| Border | `#E4E4E7` | Dividers, input borders |
+
+### Data Palette
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| Primary | `#625DF5` | CTAs, active states, video progress |
+| Primary Hover | `#5048E5` | Button hover state |
+| Text | `#1F1F23` | All text |
+| Text Secondary | `#6B6D76` | Timestamps, metadata, captions |
+| Text Tertiary | `#9B9CA3` | Placeholders, disabled states |
+| Error | `#D64770` | Error states |
+| Recording | `#EF440C` | Active recording indicator |
+
+### Light Mode
+
+Default. A content-first tool used in bright office environments.
+
+```css
+:root {
+  --color-bg: #FFFFFF;
+  --color-surface: #F7F7F8;
+  --color-border: #E4E4E7;
+  --color-primary: #625DF5;
+  --color-primary-hover: #5048E5;
+  --color-text: #1F1F23;
+  --color-text-secondary: #6B6D76;
+  --color-text-tertiary: #9B9CA3;
+  --color-error: #D64770;
+  --color-recording: #EF440C;
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --shadow-card: 0 1px 3px rgba(31, 31, 35, 0.08), 0 4px 12px rgba(31, 31, 35, 0.04);
+  --shadow-card-hover: 0 4px 12px rgba(31, 31, 35, 0.12), 0 8px 24px rgba(31, 31, 35, 0.08);
+  --shadow-overlay: 0 8px 32px rgba(31, 31, 35, 0.16), 0 2px 8px rgba(31, 31, 35, 0.08);
+  --shadow-tooltip: 0 4px 12px rgba(31, 31, 35, 0.12);
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --transition-base: 200ms ease-out;
+  --transition-fast: 100ms ease-out;
+}
+```
+
+## 3. Typography Rules
+
+| Role | Size | Weight | Line Height |
+|------|------|--------|-------------|
+| Display | 28px | 700 | 1.2 |
+| H1 | 22px | 600 | 1.3 |
+| H2 | 18px | 600 | 1.4 |
+| Body | 14px | 400 | 1.5 |
+| Body Small | 13px | 400 | 1.5 |
+| Caption | 12px | 400 | 1.4 |
+| Button | 14px | 500 | 1.2 |
+| Micro | 11px | 500 | 1.2 |
+
+**Font labels for catalog extraction:**
+
+```
+Display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+H1: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+H2: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Body Small: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Caption: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Button: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Micro: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
+Mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
+```
+
+## 4. Component Stylings
+
+### Video Thumbnail Card
+
+```css
+.thumbnail-card {
+  background: var(--color-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+}
+
+.thumbnail-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-card-hover);
+}
+
+.thumbnail-card:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+```
+
+### Recording Indicator
+
+```css
+@keyframes recording-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.recording-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-recording);
+  animation: recording-pulse 1.5s ease-in-out infinite;
+}
+```
+
+### Input Field
+
+```css
+.input-field {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.4;
+  min-height: 44px;
+  min-width: 44px;
+  color: var(--color-text);
+}
+
+.input-field:focus-visible {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(98, 93, 245, 0.15);
+}
+```
+
+### Button Primary
+
+```css
+.btn-primary {
+  background: var(--color-primary);
+  color: #FFFFFF;
+  border-radius: var(--radius-md);
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: background var(--transition-fast);
+}
+.btn-primary:hover {
+  background: var(--color-primary-hover);
+}
+```
+
+## 5. Layout Principles
+
+Video-first layout. The video thumbnail dominates; metadata and actions cluster below. Clean horizontal rhythm with consistent 16px gaps between elements. Cards use 8px radius for a friendly but professional feel.
+
+## 6. Depth & Elevation
+
+Elevation is achieved through shadows only. `--shadow-card` for resting state, `--shadow-card-hover` for interactive lift, `--shadow-overlay` for modals and tooltips. No borders on cards — shadow conveys depth.
+
+## 7. Do's and Don'ts
+
+- Do not use Tertiary `#9B9CA3` for body text — timestamps and metadata only
+- Do not use semantic colors directly as text — always pair with a sufficiently contrasting background
+- Do not mix button variants in a single CSS block — use separate selectors
+- Do not use `line-height: 1.0` on buttons — diacritics, emoji, and CJK glyphs clip; use `1.2` minimum
+- Do not use `#D64770` (Error) for small text under 18px on white — it is 4.2:1, below the 4.5:1 AA threshold for normal text (14px). Use `#D64770` only for large text (18px+) or pair with a darker background surface
+- Do not use white text on `#D64770` background for normal text — white on #D64770 is also 4.2:1 (fails AA). Use `#FDECEE` (light pink) background with dark red text instead
+
+## 8. Responsive Behavior
+
+Video-first responsive layout. At narrower breakpoints, the video thumbnail stacks above metadata and actions. At ≥768px, a side-by-side layout (video left, actions right) activates. Touch targets minimum 44×44px at all breakpoints.
+
+## 9. Agent Prompt Guide
+
+When generating a Loom-style interface, prompt the model to:
+- Use Inter for all UI text; ui-monospace for code snippets
+- Apply `--radius-lg` (8px) to cards, `--radius-md` (6px) to buttons, `--radius-sm` (4px) to inputs
+- Use 200ms ease-out for card hover transitions, 100ms for button press
+- Include a recording indicator dot with a 1.5s pulse animation
+- Primary color `#625DF5` for all CTAs and active states
+- Ensure secondary text (#6B6D76) passes 4.5:1 on white before use; tertiary text (#9B9CA3) is for timestamps/metadata only

vibn-frontend/lib/scaffold/open-design/design-systems/lovable/DESIGN.md

@@ -0,0 +1,301 @@
+# Design System Inspired by Lovable
+
+> Category: Developer Tools
+> AI full-stack builder. Playful gradients, friendly dev aesthetic.
+
+## 1. Visual Theme & Atmosphere
+
+Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. This isn't minimalism for minimalism's sake — it's a deliberate choice to feel approachable, almost analog, like a well-crafted notebook. The near-black text (`#1c1c1c`) against this warm cream creates a contrast ratio that's easy on the eyes while maintaining sharp readability.
+
+The custom Camera Plain Variable typeface is the system's secret weapon. Unlike geometric sans-serifs that signal "tech company," Camera Plain has a humanist warmth — slightly rounded terminals, organic curves, and a comfortable reading rhythm. At display sizes (48px–60px), weight 600 with aggressive negative letter-spacing (-0.9px to -1.5px) compresses headlines into confident, editorial statements. The font uses `ui-sans-serif, system-ui` as fallbacks, acknowledging that the custom typeface carries the brand personality.
+
+What makes Lovable's visual system distinctive is its opacity-driven depth model. Rather than using a traditional gray scale, the system modulates `#1c1c1c` at varying opacities (0.03, 0.04, 0.4, 0.82–0.83) to create a unified tonal range. Every shade of gray on the page is technically the same hue — just more or less transparent. This creates a visual coherence that's nearly impossible to achieve with arbitrary hex values. The border system follows suit: `1px solid #eceae4` for light divisions and `1px solid rgba(28, 28, 28, 0.4)` for stronger interactive boundaries.
+
+**Key Characteristics:**
+- Warm parchment background (`#f7f4ed`) — not white, not beige, a deliberate cream that feels hand-selected
+- Camera Plain Variable typeface with humanist warmth and editorial letter-spacing at display sizes
+- Opacity-driven color system: all grays derived from `#1c1c1c` at varying transparency levels
+- Inset shadow technique on buttons: `rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset`
+- Warm neutral border palette: `#eceae4` for subtle, `rgba(28,28,28,0.4)` for interactive elements
+- Full-pill radius (`9999px`) used extensively for action buttons and icon containers
+- Focus state uses `rgba(0,0,0,0.1) 0px 4px 12px` shadow for soft, warm emphasis
+- shadcn/ui + Radix UI component primitives with Tailwind CSS utility styling
+
+## 2. Color Palette & Roles
+
+### Primary
+- **Cream** (`#f7f4ed`): Page background, card surfaces, button surfaces. The foundation — warm, paper-like, human.
+- **Charcoal** (`#1c1c1c`): Primary text, headings, dark button backgrounds. Not pure black — organic warmth.
+- **Off-White** (`#fcfbf8`): Button text on dark backgrounds, subtle highlight. Barely distinguishable from pure white.
+
+### Neutral Scale (Opacity-Based)
+- **Charcoal 100%** (`#1c1c1c`): Primary text, headings, dark surfaces.
+- **Charcoal 83%** (`rgba(28,28,28,0.83)`): Strong secondary text.
+- **Charcoal 82%** (`rgba(28,28,28,0.82)`): Body copy.
+- **Muted Gray** (`#5f5f5d`): Secondary text, descriptions, captions.
+- **Charcoal 40%** (`rgba(28,28,28,0.4)`): Interactive borders, button outlines.
+- **Charcoal 4%** (`rgba(28,28,28,0.04)`): Subtle hover backgrounds, micro-tints.
+- **Charcoal 3%** (`rgba(28,28,28,0.03)`): Barely-visible overlays, background depth.
+
+### Surface & Border
+- **Light Cream** (`#eceae4`): Card borders, dividers, image outlines. The warm divider line.
+- **Cream Surface** (`#f7f4ed`): Card backgrounds, section fills — same as page background for seamless integration.
+
+### Interactive
+- **Ring Blue** (`#3b82f6` at 50% opacity): `--tw-ring-color`, Tailwind focus ring.
+- **Focus Shadow** (`rgba(0,0,0,0.1) 0px 4px 12px`): Focus and active state shadow — soft, warm, diffused.
+
+### Inset Shadows
+- **Button Inset** (`rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`): The signature multi-layer inset shadow on dark buttons.
+
+## 3. Typography Rules
+
+### Font Family
+- **Primary**: `Camera Plain Variable`, with fallbacks: `ui-sans-serif, system-ui`
+- **Weight range**: 400 (body/reading), 480 (special display), 600 (headings/emphasis)
+- **Feature**: Variable font with continuous weight axis — allows fine-tuned intermediary weights like 480.
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Camera Plain Variable | 60px (3.75rem) | 600 | 1.00–1.10 (tight) | -1.5px | Maximum impact, editorial |
+| Display Alt | Camera Plain Variable | 60px (3.75rem) | 480 | 1.00 (tight) | normal | Lighter hero variant |
+| Section Heading | Camera Plain Variable | 48px (3.00rem) | 600 | 1.00 (tight) | -1.2px | Feature section titles |
+| Sub-heading | Camera Plain Variable | 36px (2.25rem) | 600 | 1.10 (tight) | -0.9px | Sub-sections |
+| Card Title | Camera Plain Variable | 20px (1.25rem) | 400 | 1.25 (tight) | normal | Card headings |
+| Body Large | Camera Plain Variable | 18px (1.13rem) | 400 | 1.38 | normal | Introductions |
+| Body | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
+| Button | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Button labels |
+| Button Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Compact buttons |
+| Link | Camera Plain Variable | 16px (1.00rem) | 400 | 1.50 | normal | Underline decoration |
+| Link Small | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Footer links |
+| Caption | Camera Plain Variable | 14px (0.88rem) | 400 | 1.50 | normal | Metadata, small text |
+
+### Principles
+- **Warm humanist voice**: Camera Plain Variable gives Lovable its approachable personality. The slightly rounded terminals and organic curves contrast with the sharp geometric sans-serifs used by most developer tools.
+- **Variable weight as design tool**: The font supports continuous weight values (e.g., 480), enabling nuanced hierarchy beyond standard weight stops. Weight 480 at 60px creates a display style that feels lighter than semibold but stronger than regular.
+- **Compression at scale**: Headlines use negative letter-spacing (-0.9px to -1.5px) for editorial impact. Body text stays at normal tracking for comfortable reading.
+- **Two weights, clear roles**: 400 (body/UI/links/buttons) and 600 (headings/emphasis). The narrow weight range creates hierarchy through size and spacing, not weight variation.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary Dark (Inset Shadow)**
+- Background: `#1c1c1c`
+- Text: `#fcfbf8`
+- Padding: 8px 16px
+- Radius: 6px
+- Shadow: `rgba(0,0,0,0) 0px 0px 0px 0px, rgba(0,0,0,0) 0px 0px 0px 0px, rgba(255,255,255,0.2) 0px 0.5px 0px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px 0px`
+- Active: opacity 0.8
+- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
+- Use: Primary CTA ("Start Building", "Get Started")
+
+**Ghost / Outline**
+- Background: transparent
+- Text: `#1c1c1c`
+- Padding: 8px 16px
+- Radius: 6px
+- Border: `1px solid rgba(28,28,28,0.4)`
+- Active: opacity 0.8
+- Focus: `rgba(0,0,0,0.1) 0px 4px 12px` shadow
+- Use: Secondary actions ("Log In", "Documentation")
+
+**Cream Surface**
+- Background: `#f7f4ed`
+- Text: `#1c1c1c`
+- Padding: 8px 16px
+- Radius: 6px
+- No border
+- Active: opacity 0.8
+- Use: Tertiary actions, toolbar buttons
+
+**Pill / Icon Button**
+- Background: `#f7f4ed`
+- Text: `#1c1c1c`
+- Radius: 9999px (full pill)
+- Shadow: same inset pattern as primary dark
+- Opacity: 0.5 (default), 0.8 (active)
+- Use: Additional actions, plan mode toggle, voice recording
+
+### Cards & Containers
+- Background: `#f7f4ed` (matches page)
+- Border: `1px solid #eceae4`
+- Radius: 12px (standard), 16px (featured), 8px (compact)
+- No box-shadow by default — borders define boundaries
+- Image cards: `1px solid #eceae4` with 12px radius
+
+### Inputs & Forms
+- Background: `#f7f4ed`
+- Text: `#1c1c1c`
+- Border: `1px solid #eceae4`
+- Radius: 6px
+- Focus: ring blue (`rgba(59,130,246,0.5)`) outline
+- Placeholder: `#5f5f5d`
+
+### Navigation
+- Clean horizontal nav on cream background, fixed
+- Logo/wordmark left-aligned (128.75 x 22px)
+- Links: Camera Plain 14–16px weight 400, `#1c1c1c` text
+- CTA: dark button with inset shadow, 6px radius
+- Mobile: hamburger menu with 6px radius button
+- Subtle border or no border on scroll
+
+### Links
+- Color: `#1c1c1c`
+- Decoration: underline (default)
+- Hover: primary accent (via CSS variable `hsl(var(--primary))`)
+- No color change on hover — decoration carries the interactive signal
+
+### Image Treatment
+- Showcase/portfolio images with `1px solid #eceae4` border
+- Consistent 12px border radius on all image containers
+- Soft gradient backgrounds behind hero content (warm multi-color wash)
+- Gallery-style presentation for template/project showcases
+
+### Distinctive Components
+
+**AI Chat Input**
+- Large prompt input area with soft borders
+- Suggestion pills with `#eceae4` borders
+- Voice recording / plan mode toggle buttons as pill shapes (9999px)
+- Warm, inviting input area — not clinical
+
+**Template Gallery**
+- Card grid showing project templates
+- Each card: image + title, `1px solid #eceae4` border, 12px radius
+- Hover: subtle shadow or border darkening
+- Category labels as text links
+
+**Stats Bar**
+- Large metrics: "0M+" pattern in 48px+ weight 600
+- Descriptive text below in muted gray
+- Horizontal layout with generous spacing
+
+## 5. Layout Principles
+
+### Spacing System
+- Base unit: 8px
+- Scale: 8px, 10px, 12px, 16px, 24px, 32px, 40px, 56px, 80px, 96px, 128px, 176px, 192px, 208px
+- The scale expands generously at the top end — sections use 80px–208px vertical spacing for editorial breathing room
+
+### Grid & Container
+- Max content width: approximately 1200px (centered)
+- Hero: centered single-column with massive vertical padding (96px+)
+- Feature sections: 2–3 column grids
+- Full-width footer with multi-column link layout
+- Showcase sections with centered card grids
+
+### Whitespace Philosophy
+- **Editorial generosity**: Lovable's spacing is lavish at section boundaries (80px–208px). The warm cream background makes these expanses feel cozy rather than empty.
+- **Content-driven rhythm**: Tight internal spacing within cards (12–24px) contrasts with wide section gaps, creating a reading rhythm that alternates between focused content and visual rest.
+- **Section separation**: Footer uses `1px solid #eceae4` border and 16px radius container. Sections defined by generous spacing rather than border lines.
+
+### Border Radius Scale
+- Micro (4px): Small buttons, interactive elements
+- Standard (6px): Buttons, inputs, navigation menu
+- Comfortable (8px): Compact cards, divs
+- Card (12px): Standard cards, image containers, templates
+- Container (16px): Large containers, footer sections
+- Full Pill (9999px): Action pills, icon buttons, toggles
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, cream background | Page surface, most content |
+| Bordered (Level 1) | `1px solid #eceae4` | Cards, images, dividers |
+| Inset (Level 2) | `rgba(255,255,255,0.2) 0px 0.5px 0px inset, rgba(0,0,0,0.2) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.05) 0px 1px 2px` | Dark buttons, primary actions |
+| Focus (Level 3) | `rgba(0,0,0,0.1) 0px 4px 12px` | Active/focus states |
+| Ring (Accessibility) | `rgba(59,130,246,0.5)` 2px ring | Keyboard focus on inputs |
+
+**Shadow Philosophy**: Lovable's depth system is intentionally shallow. Instead of floating cards with dramatic drop-shadows, the system relies on warm borders (`#eceae4`) against the cream surface to create gentle containment. The only notable shadow pattern is the inset shadow on dark buttons — a subtle multi-layer technique where a white highlight line sits at the top edge while a dark ring and soft drop handle the bottom. This creates a tactile, pressed-into-surface feeling rather than a hovering-above-surface feeling. The warm focus shadow (`rgba(0,0,0,0.1) 0px 4px 12px`) is deliberately diffused and large, creating a soft glow rather than a sharp outline.
+
+### Decorative Depth
+- Hero: soft, warm multi-color gradient wash (pinks, oranges, blues) behind hero — atmospheric, barely visible
+- Footer: gradient background with warm tones transitioning to the bottom
+- No harsh section dividers — spacing and background warmth handle transitions
+
+## 7. Do's and Don'ts
+
+### Do
+- Use the warm cream background (`#f7f4ed`) as the page foundation — it's the brand's signature warmth
+- Use Camera Plain Variable at display sizes with negative letter-spacing (-0.9px to -1.5px)
+- Derive all grays from `#1c1c1c` at varying opacity levels for tonal unity
+- Use the inset shadow technique on dark buttons for tactile depth
+- Use `#eceae4` borders instead of shadows for card containment
+- Keep the weight system narrow: 400 for body/UI, 600 for headings
+- Use full-pill radius (9999px) only for action pills and icon buttons
+- Apply opacity 0.8 on active states for responsive tactile feedback
+
+### Don't
+- Don't use pure white (`#ffffff`) as a page background — the cream is intentional
+- Don't use heavy box-shadows for cards — borders are the containment mechanism
+- Don't introduce saturated accent colors — the palette is intentionally warm-neutral
+- Don't use weight 700 (bold) — 600 is the maximum weight in the system
+- Don't apply 9999px radius on rectangular buttons — pills are for icon/action toggles
+- Don't use sharp focus outlines — the system uses soft shadow-based focus indicators
+- Don't mix border styles — `#eceae4` for passive, `rgba(28,28,28,0.4)` for interactive
+- Don't increase letter-spacing on headings — Camera Plain is designed to run tight at scale
+
+## 8. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <600px | Tight single column, reduced padding |
+| Mobile | 600–640px | Standard mobile layout |
+| Tablet Small | 640–700px | 2-column grids begin |
+| Tablet | 700–768px | Card grids expand |
+| Desktop Small | 768–1024px | Multi-column layouts |
+| Desktop | 1024–1280px | Full feature layout |
+| Large Desktop | 1280–1536px | Maximum content width, generous margins |
+
+### Touch Targets
+- Buttons: 8px 16px padding (comfortable touch)
+- Navigation: adequate spacing between items
+- Pill buttons: 9999px radius creates large tap-friendly targets
+- Menu toggle: 6px radius button with adequate sizing
+
+### Collapsing Strategy
+- Hero: 60px → 48px → 36px headline scaling with proportional letter-spacing
+- Navigation: horizontal links → hamburger menu at 768px
+- Feature cards: 3-column → 2-column → single column stacked
+- Template gallery: grid → stacked vertical cards
+- Stats bar: horizontal → stacked vertical
+- Footer: multi-column → stacked single column
+- Section spacing: 128px+ → 64px on mobile
+
+### Image Behavior
+- Template screenshots maintain `1px solid #eceae4` border at all sizes
+- 12px border radius preserved across breakpoints
+- Gallery images responsive with consistent aspect ratios
+- Hero gradient softens/simplifies on mobile
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Primary CTA: Charcoal (`#1c1c1c`)
+- Background: Cream (`#f7f4ed`)
+- Heading text: Charcoal (`#1c1c1c`)
+- Body text: Muted Gray (`#5f5f5d`)
+- Border: `#eceae4` (passive), `rgba(28,28,28,0.4)` (interactive)
+- Focus: `rgba(0,0,0,0.1) 0px 4px 12px`
+- Button text on dark: `#fcfbf8`
+
+### Example Component Prompts
+- "Create a hero section on cream background (#f7f4ed). Headline at 60px Camera Plain Variable weight 600, line-height 1.10, letter-spacing -1.5px, color #1c1c1c. Subtitle at 18px weight 400, line-height 1.38, color #5f5f5d. Dark CTA button (#1c1c1c bg, #fcfbf8 text, 6px radius, 8px 16px padding, inset shadow) and ghost button (transparent bg, 1px solid rgba(28,28,28,0.4) border, 6px radius)."
+- "Design a card on cream (#f7f4ed) background. Border: 1px solid #eceae4. Radius 12px. No box-shadow. Title at 20px Camera Plain Variable weight 400, line-height 1.25, color #1c1c1c. Body at 14px weight 400, color #5f5f5d."
+- "Build a template gallery: grid of cards with 12px radius, 1px solid #eceae4 border, cream backgrounds. Each card: image with 12px top radius, title below. Hover: subtle border darkening."
+- "Create navigation: sticky on cream (#f7f4ed). Camera Plain 16px weight 400 for links, #1c1c1c text. Dark CTA button right-aligned with inset shadow. Mobile: hamburger menu with 6px radius."
+- "Design a stats section: large numbers at 48px Camera Plain weight 600, letter-spacing -1.2px, #1c1c1c. Labels below at 16px weight 400, #5f5f5d. Horizontal layout with 32px gap."
+
+### Iteration Guide
+1. Always use cream (`#f7f4ed`) as the base — never pure white
+2. Derive grays from `#1c1c1c` at opacity levels rather than using distinct hex values
+3. Use `#eceae4` borders for containment, not shadows
+4. Letter-spacing scales with size: -1.5px at 60px, -1.2px at 48px, -0.9px at 36px, normal at 16px
+5. Two weights: 400 (everything except headings) and 600 (headings)
+6. The inset shadow on dark buttons is the signature detail — don't skip it
+7. Camera Plain Variable at weight 480 is for special display moments only