designlang 12.2.0 → 12.3.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Changelog
 
+## [12.3.0] — 2026-05-05
+
+**Remix — restyle any site in a different design vocabulary.**
+
+A genuinely new product surface: take an extracted page-shape (sections,
+voice, page-intent, anatomy) and re-render it under one of six
+opinionated design vocabularies. "What would stripe.com look like if it
+had been designed brutalist? Or art-deco? Or cyberpunk?"
+
+### Added
+
+- **`designlang remix <url> --as <vocab>`** — re-renders the audited page
+  using the host's *own copy* (headings, ledes, CTA verbs from voice) but
+  styled in another vocabulary. Six built-ins:
+  - `brutalist` — hard edges, mono type, single screaming accent
+  - `swiss` — Helvetica, grids, restraint (post-Bauhaus default)
+  - `art-deco` — gold on ink, geometric ornament, vertical type
+  - `cyberpunk` — neon on midnight, scanlines, mono with glitch energy
+  - `soft-ui` — cushioned shapes, low contrast, Vision-OS-adjacent
+  - `editorial` — broadsheet serifs, generous whitespace, ink on paper
+- `--all` flag emits one HTML per vocabulary in a single extraction.
+- `--list` prints the vocabulary registry with blurbs.
+- New formatter: `src/formatters/remix.js` — maps every section role
+  (hero, feature-grid, pricing-table, stats, testimonial, faq,
+  logo-wall, steps, cta) to vocabulary-styled markup.
+- New module: `src/vocabularies/` — six self-contained vocab definitions
+  (tokens + font stack + signature CSS) plus `index.js` registry.
+- Hero-deduplication: real-world section walkers (especially on SPA
+  marketing pages) often emit a hero wrapper + an inner hero with the
+  same h1. Remix now dedupes by heading and excludes claimed headings
+  from the voice pool, so heading-less sections (cta bands, logo walls)
+  don't re-render an already-claimed heading.
+- 14 new tests (350 total, all passing). Cover registry shape,
+  per-vocab token validity, dedup, XSS escaping, missing-input errors.
+
+Why: Grade (v12.1) is the audit, Battle (v12.2) is the comparison,
+Remix is the *transformation*. Pure visual moat — no competitor
+(Dembrandt, Superposition, html.to.design, Builder Visual Copilot)
+ships site-shape-preserving vocabulary swap.
+
 ## [12.2.0] — 2026-05-02
 
 **Battle cards + design score badges — distribution + virality on top of Grade.**

package/README.md

@@ -26,8 +26,10 @@ It also goes where extractors don't: **layout patterns**, **responsive behavior
 
 ```bash
 npx designlang https://stripe.com                      # extract everything
-npx designlang grade https://stripe.com --badge        # report card + SVG badge  ← v12.2
-npx designlang battle stripe.com vercel.com            # head-to-head graded fight ← v12.2
+npx designlang remix stripe.com --as cyberpunk         # restyle in another vocabulary  ← v12.3
+npx designlang remix stripe.com --all                  # emit all 6 vocabs at once     ← v12.3
+npx designlang grade https://stripe.com --badge        # report card + SVG badge       ← v12.2
+npx designlang battle stripe.com vercel.com            # head-to-head graded fight     ← v12.2
 npx designlang clone https://stripe.com                # working Next.js starter
 npx designlang --full https://stripe.com               # screenshots + responsive + interactions
 ```
@@ -65,6 +67,7 @@ Each run writes 17+ files to `./design-extract-output/`. The headline outputs:
 | `*-grade.html` | **v12.1** Shareable Design Report Card (letter grade + evidence) |
 | `*-grade.svg` | **v12.2** Shields.io-style design-score badge (drop into any README) |
 | `*-battle.html` | **v12.2** Head-to-head graded battle card from `designlang battle` |
+| `*-remix.<vocab>.html` | **v12.3** Site restyled in another vocabulary — brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial |
 
 Multi-platform (`--platforms web,ios,android,flutter,wordpress,all`) adds `ios/`, `android/`, `flutter/`, and a WordPress block theme. `--emit-agent-rules` adds Cursor / Claude Code / generic agent rule files.
 
@@ -124,8 +127,9 @@ designlang mcp                              # stdio MCP server for Cursor / Clau
 | Clone | `designlang clone <url>` | Generate a working Next.js starter with extracted design |
 | Score | `designlang score <url>` | Rate design quality with visual bar chart breakdown |
 | Grade (v12.1) | `designlang grade <url>` | Shareable HTML "Design Report Card" — letter grade, 8 dimensions, evidence, strengths + fixes |
-| Battle (NEW v12.2) | `designlang battle <A> <B>` | Head-to-head graded battle card with verdict, dimension table, palette comparison |
-| Badge (NEW v12.2) | `designlang grade --badge` | Shields.io-style SVG badge — `design · B · 87` — drop into any README. Live endpoint: `designlang.app/badge/<host>.svg` |
+| Battle (v12.2) | `designlang battle <A> <B>` | Head-to-head graded battle card with verdict, dimension table, palette comparison |
+| Badge (v12.2) | `designlang grade --badge` | Shields.io-style SVG badge — `design · B · 87` — drop into any README. Live endpoint: `designlang.app/badge/<host>.svg` |
+| Remix (NEW v12.3) | `designlang remix <url> --as <vocab>` | Restyle the audited page in another vocabulary (brutalist / swiss / art-deco / cyberpunk / soft-ui / editorial). `--all` emits all 6 |
 | Watch | `designlang watch <url>` | Monitor for design changes on interval |
 | Diff | `designlang diff <A> <B>` | Compare two sites (MD + HTML) |
 | Multi-brand | `designlang brands <urls...>` | N-site comparison matrix |
@@ -180,6 +184,7 @@ Commands:
   score <url>                       Rate design quality (7 categories, A-F, bar chart)
   grade <url>                       Generate a shareable HTML Design Report Card (--format html|md|json|svg|all, --badge, --open)
   battle <urlA> <urlB>              Head-to-head graded battle card (--format html|md|json|all, --open)
+  remix <url>                       Restyle in another vocabulary (--as brutalist|swiss|art-deco|cyberpunk|soft-ui|editorial, --all, --list, --open)
   watch <url>                       Monitor for design changes on interval
   diff <urlA> <urlB>                Compare two sites' design languages
   brands <urls...>                  Multi-brand comparison matrix

package/bin/design-extract.js

@@ -43,11 +43,12 @@ import { syncDesign } from '../src/sync.js';
 import { compareBrands, formatBrandMatrix, formatBrandMatrixHtml } from '../src/multibrand.js';
 import { generateClone } from '../src/clone.js';
 import { watchSite } from '../src/watch.js';
-import { diffDarkMode } from '../src/darkdiff.js';
 import { applyDesign } from '../src/apply.js';
 import { formatGrade, formatGradeMarkdown } from '../src/formatters/grade.js';
 import { formatBattle, formatBattleMarkdown } from '../src/formatters/battle.js';
 import { formatScoreBadge } from '../src/formatters/badge.js';
+import { formatRemix } from '../src/formatters/remix.js';
+import { VOCABULARIES, getVocabulary, listVocabularies } from '../src/vocabularies/index.js';
 import { nameFromUrl } from '../src/utils.js';
 
 function validateUrl(url) {
@@ -1102,6 +1103,75 @@ program
     }
   });
 
+// ── Remix command — restyle an extracted page in another vocabulary ─
+program
+  .command('remix <url>')
+  .description('Restyle a site in a different design vocabulary (brutalist, swiss, art-deco, cyberpunk, soft-ui, editorial)')
+  .option('-o, --out <dir>', 'output directory', './design-extract-output')
+  .option('-n, --name <name>', 'output file prefix (default: derived from URL)')
+  .option('--as <vocab>', 'vocabulary id (run `designlang remix --list` to see all)', 'brutalist')
+  .option('--list', 'list all vocabularies and exit')
+  .option('--all', 'emit one HTML per vocabulary (six files at once)')
+  .option('--open', 'open the result in the default browser')
+  .action(async (url, opts) => {
+    if (opts.list) {
+      console.log('');
+      console.log(chalk.bold('  Vocabularies'));
+      console.log('');
+      for (const v of listVocabularies()) {
+        console.log(`  ${chalk.cyan(v.id.padEnd(14))} ${chalk.gray(v.blurb)}`);
+      }
+      console.log('');
+      console.log(chalk.gray(`  Use: designlang remix <url> --as <id>`));
+      console.log('');
+      return;
+    }
+    if (!url.startsWith('http')) url = `https://${url}`;
+    validateUrl(url);
+
+    const vocabIds = opts.all ? Object.keys(VOCABULARIES) : [opts.as];
+    // Validate vocab early so we fail before extraction.
+    for (const id of vocabIds) getVocabulary(id);
+
+    const spinner = ora(`Extracting ${url}...`).start();
+    try {
+      const design = await extractDesignLanguage(url);
+
+      const outDir = resolve(opts.out);
+      mkdirSync(outDir, { recursive: true });
+      const prefix = opts.name || nameFromUrl(url);
+      const written = [];
+
+      for (const id of vocabIds) {
+        spinner.text = `Rendering ${id}...`;
+        const vocab = getVocabulary(id);
+        const html = formatRemix(design, vocab, { vocabId: id, version: PKG_VERSION });
+        const p = join(outDir, `${prefix}.remix.${id}.html`);
+        writeFileSync(p, html);
+        written.push(p);
+      }
+
+      spinner.stop();
+      console.log('');
+      console.log(`  ${chalk.bold('Remixed')} ${chalk.gray('·')} ${chalk.cyan(vocabIds.join(', '))} ${chalk.gray('·')} ${chalk.gray(url)}`);
+      console.log('');
+      for (const f of written) console.log(`  ${chalk.green('✓')} ${chalk.gray(f)}`);
+      console.log('');
+      console.log(chalk.gray(`  Open the .html in a browser. One file per vocabulary, fully self-contained.`));
+      console.log('');
+
+      if (opts.open && written.length > 0) {
+        const { spawn } = await import('child_process');
+        const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+        spawn(cmd, [written[0]], { detached: true, stdio: 'ignore' }).unref();
+      }
+    } catch (err) {
+      spinner.fail('Remix failed');
+      console.error(chalk.red(`\n  ${err.message}\n`));
+      process.exit(1);
+    }
+  });
+
 // ── Apply command ──────────────────────────────────────────
 program
   .command('apply <url>')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "description": "Extract the complete design language from any website and ship it — clone to a working Next.js starter, guard tokens with a CI drift bot, or browse everything in a local studio. Outputs W3C DTCG tokens, motion tokens, typed anatomy stubs, Tailwind config, and ready-to-paste v0 / Lovable / Cursor / Claude-Artifacts prompts.",
   "type": "module",
   "bin": {

package/src/chat.js

@@ -22,20 +22,6 @@ function isHex(s) {
   return typeof s === 'string' && /^#[0-9a-f]{3,8}$/i.test(s.trim());
 }
 
-function hexToRgb(hex) {
-  const m = String(hex).trim().toLowerCase().replace(/^#/, '');
-  const full = m.length === 3 ? m.split('').map((c) => c + c).join('') : m.slice(0, 6);
-  return {
-    r: parseInt(full.slice(0, 2), 16) || 0,
-    g: parseInt(full.slice(2, 4), 16) || 0,
-    b: parseInt(full.slice(4, 6), 16) || 0,
-  };
-}
-
-function rgbToHex({ r, g, b }) {
-  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('');
-}
-
 function opSharpenRadii(design, factor = 0.5) {
   const radii = design.borders?.radii || [];
   const next = radii.map((r) => ({ ...r, value: Math.max(0, Math.round((r.value || 0) * factor)) }));

package/src/formatters/css-vars.js

@@ -1,5 +1,3 @@
-import { pxToRem } from '../utils.js';
-
 export function formatCssVars(design) {
   const lines = [':root {'];
 

package/src/formatters/remix.js

@@ -0,0 +1,379 @@
+// designlang remix — render an extracted page-shape in a different design vocabulary.
+//
+// Inputs: the design object from extractDesignLanguage() (we read meta, voice,
+// pageIntent, sectionRoles) + a vocabulary from src/vocabularies/.
+// Output: a self-contained single HTML file. Same content, different language.
+
+function esc(s) {
+  return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+}
+
+function host(url) {
+  try { return new URL(url).hostname; } catch { return String(url || ''); }
+}
+
+function pickHeadings(design, count = 6) {
+  const fromVoice = (design.voice?.sampleHeadings || []).filter(Boolean);
+  const fromSections = (design.sectionRoles?.sections || [])
+    .map(s => s.heading || s.slots?.heading)
+    .filter(Boolean);
+  const merged = [...new Set([...fromVoice, ...fromSections])];
+  return merged.slice(0, count);
+}
+
+function pickCtas(design, count = 4) {
+  const verbs = (design.voice?.ctaVerbs || []).filter(Boolean);
+  const phrases = verbs.map(v => {
+    if (typeof v === 'string') return v;
+    return v.verb || v.text || v.phrase || '';
+  }).filter(Boolean);
+  if (phrases.length >= count) return phrases.slice(0, count);
+  // Pad with generic verbs informed by tone.
+  const tone = design.voice?.tone || 'neutral';
+  const fallback = tone === 'playful' ? ['Try it', 'Get started', 'See it', 'Play']
+    : tone === 'technical' ? ['Read docs', 'Get started', 'View API', 'Install']
+    : tone === 'formal' ? ['Begin', 'Continue', 'Learn more', 'Contact']
+    : ['Get started', 'Learn more', 'Sign up', 'See more'];
+  return [...phrases, ...fallback].slice(0, count);
+}
+
+// Map each section role to a vocabulary-styled markup block.
+function renderSection(section, ctx) {
+  const { vocab, headings, ctas, design } = ctx;
+  const sectionHeading = section.heading || section.slots?.heading || headings.shift() || vocab.name;
+  const lede = section.slots?.lede || '';
+  const role = section.role;
+  const buttonCount = Math.max(1, section.buttonCount || 1);
+
+  switch (role) {
+    case 'nav':
+    case 'footer':
+      return ''; // rendered globally outside sections
+
+    case 'hero': {
+      const ctaSet = ctas.slice(0, Math.max(1, Math.min(2, buttonCount)));
+      return `
+        <section class="v-hero">
+          <p class="v-pill">${esc((design.pageIntent?.type || 'landing').toUpperCase())}</p>
+          <h1 class="v-display v-h1">${esc(sectionHeading)}</h1>
+          ${lede ? `<p class="v-lede">${esc(lede)}</p>` : ''}
+          <div class="v-cta-row">
+            ${ctaSet.map((c, i) => `<a href="#" class="v-cta${i > 0 ? ' v-cta-ghost' : ''}">${esc(c)}</a>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    case 'feature-grid':
+    case 'bento': {
+      const items = headings.splice(0, 3);
+      while (items.length < 3) items.push('Feature');
+      return `
+        <section class="v-section">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          ${lede ? `<p class="v-lede">${esc(lede)}</p>` : ''}
+          <div class="v-grid v-grid-3">
+            ${items.map(t => `
+              <div class="v-card">
+                <div class="v-card-num">·</div>
+                <h3 class="v-display v-h3">${esc(t)}</h3>
+                <p class="v-body">${esc(squeeze(lede || sectionHeading, 90))}</p>
+              </div>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    case 'stats': {
+      const numbers = ['10×', '99.9%', '< 50ms', '500K+'];
+      return `
+        <section class="v-section v-section-rule">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          <div class="v-grid v-grid-4">
+            ${numbers.map((n, i) => `
+              <div class="v-stat">
+                <div class="v-display v-stat-num">${esc(n)}</div>
+                <div class="v-pill">${esc((headings[i] || ['speed','uptime','latency','users'][i]).toUpperCase())}</div>
+              </div>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    case 'testimonial': {
+      return `
+        <section class="v-section v-section-quiet">
+          <blockquote class="v-quote">
+            <p class="v-display v-quote-text">"${esc(lede || sectionHeading)}"</p>
+            <footer class="v-quote-attrib">— ${esc(headings.shift() || 'A satisfied user')}</footer>
+          </blockquote>
+        </section>`;
+    }
+
+    case 'pricing-table': {
+      const tiers = headings.splice(0, 3);
+      while (tiers.length < 3) tiers.push('Plan');
+      const prices = ['$0', '$29', '$99'];
+      return `
+        <section class="v-section">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          <div class="v-grid v-grid-3">
+            ${tiers.map((t, i) => `
+              <div class="v-card${i === 1 ? ' v-card-emphasis' : ''}">
+                <p class="v-pill">${esc(t.toUpperCase())}</p>
+                <div class="v-display v-price">${esc(prices[i])}</div>
+                <a href="#" class="v-cta">${esc(ctas[i] || 'Choose')}</a>
+              </div>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    case 'faq': {
+      const qs = headings.splice(0, 4);
+      while (qs.length < 3) qs.push('A common question');
+      return `
+        <section class="v-section">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          <div class="v-faq">
+            ${qs.map(q => `
+              <details class="v-faq-item">
+                <summary class="v-faq-q">${esc(q)}</summary>
+                <p class="v-body">${esc(squeeze(lede || 'A short, useful answer in the voice of the original site.', 240))}</p>
+              </details>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    case 'logo-wall': {
+      return `
+        <section class="v-section v-section-quiet">
+          <p class="v-pill v-pill-center">${esc(sectionHeading || 'Trusted by')}</p>
+          <div class="v-logos">
+            ${Array.from({ length: 6 }).map((_, i) => `<div class="v-logo">${esc((headings[i] || `BRAND ${i + 1}`).toUpperCase())}</div>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    case 'steps': {
+      const steps = headings.splice(0, 3);
+      while (steps.length < 3) steps.push('Step');
+      return `
+        <section class="v-section">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          <ol class="v-steps">
+            ${steps.map((s, i) => `
+              <li class="v-step">
+                <span class="v-display v-step-num">${String(i + 1).padStart(2, '0')}</span>
+                <h3 class="v-display v-h3">${esc(s)}</h3>
+                <p class="v-body">${esc(squeeze(lede || s, 120))}</p>
+              </li>`).join('')}
+          </ol>
+        </section>`;
+    }
+
+    case 'cta': {
+      const ctaSet = ctas.slice(0, 2);
+      return `
+        <section class="v-section v-section-cta">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          ${lede ? `<p class="v-lede">${esc(lede)}</p>` : ''}
+          <div class="v-cta-row">
+            ${ctaSet.map((c, i) => `<a href="#" class="v-cta${i > 0 ? ' v-cta-ghost' : ''}">${esc(c)}</a>`).join('')}
+          </div>
+        </section>`;
+    }
+
+    default: {
+      return `
+        <section class="v-section">
+          <h2 class="v-display v-h2">${esc(sectionHeading)}</h2>
+          ${lede ? `<p class="v-body">${esc(lede)}</p>` : ''}
+        </section>`;
+    }
+  }
+}
+
+function squeeze(s, max) {
+  if (!s) return '';
+  s = String(s).replace(/\s+/g, ' ').trim();
+  if (s.length <= max) return s;
+  const cut = s.slice(0, max);
+  const lastSpace = cut.lastIndexOf(' ');
+  return (lastSpace > max * 0.7 ? cut.slice(0, lastSpace) : cut) + '…';
+}
+
+export function formatRemix(design, vocab, opts = {}) {
+  if (!design) throw new Error('remix: design is required');
+  if (!vocab || !vocab.tokens) throw new Error('remix: vocabulary is required');
+
+  const url = design.meta?.url || '';
+  const hostName = host(url);
+  const title = design.meta?.title || hostName;
+  const ctas = pickCtas(design, 6);
+
+  // Dedup adjacent sections that share the same heading. Real-world section
+  // walkers (especially on SPA-rendered marketing pages) often emit a hero
+  // wrapper + an inner hero with identical h1 — visually one block, but two
+  // entries in sectionRoles.sections.
+  const seenHeadings = new Set();
+  const sections = (design.sectionRoles?.sections || [])
+    .filter(s => s.role !== 'nav' && s.role !== 'footer')
+    .filter(s => {
+      const h = (s.heading || s.slots?.heading || '').trim().toLowerCase().slice(0, 80);
+      if (!h) return true; // keep heading-less sections (logo-walls, footers)
+      if (seenHeadings.has(h)) return false;
+      seenHeadings.add(h);
+      return true;
+    })
+    .slice(0, 8);
+
+  // Headings pool for sections that don't carry their own. Exclude any heading
+  // already claimed by a kept section so heading-less sections (cta bands,
+  // logo-walls) don't shift a heading that another section will also render.
+  const claimed = new Set(
+    sections
+      .map(s => (s.heading || s.slots?.heading || '').trim().toLowerCase())
+      .filter(Boolean),
+  );
+  const headings = pickHeadings(design, 16).filter(
+    h => !claimed.has(h.trim().toLowerCase()),
+  );
+
+  // If extraction surfaced no sections (rare, but happens for SPA-rendered
+  // pages), synthesize a hero + features + cta from voice + intent so the
+  // remix still produces a believable artifact.
+  if (sections.length === 0) {
+    sections.push(
+      { role: 'hero', heading: headings[0] || hostName, slots: { lede: design.pageIntent?.signals?.[0] }, buttonCount: 2 },
+      { role: 'feature-grid', heading: headings[1] || 'What it does', slots: {} },
+      { role: 'cta', heading: headings[2] || 'Get started', slots: {} },
+    );
+  }
+
+  const ctx = { vocab, headings: [...headings], ctas, design };
+  const sectionsHtml = sections.map(s => renderSection(s, ctx)).join('');
+
+  const t = vocab.tokens;
+  const fontImports = [vocab.fonts?.display?.import, vocab.fonts?.body?.import]
+    .filter(Boolean)
+    .filter((v, i, a) => a.indexOf(v) === i);
+
+  const ogTitle = `${hostName} · remixed as ${vocab.name.toLowerCase()}`;
+  const ogDesc = `${title} reimagined in the ${vocab.name} vocabulary by designlang.`;
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${esc(ogTitle)}</title>
+<meta name="description" content="${esc(ogDesc)}">
+<meta property="og:title" content="${esc(ogTitle)}">
+<meta property="og:description" content="${esc(ogDesc)}">
+<meta property="og:type" content="article">
+<meta name="twitter:card" content="summary_large_image">
+${fontImports.map(href => `<link href="${esc(href)}" rel="stylesheet">`).join('')}
+<style>
+  :root {
+    --paper: ${t.paper};
+    --ink: ${t.ink};
+    --ink-soft: ${t.inkSoft};
+    --accent: ${t.accent};
+    --rule: ${t.rule};
+    --radius: ${t.radius};
+    --radius-lg: ${t.radiusLg};
+    --shadow: ${t.shadow};
+    --shadow-sm: ${t.shadowSm};
+    --container: ${t.container};
+    --rhythm: ${t.rhythm};
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; }
+  ${vocab.css || ''}
+  .v-wrap { max-width: var(--container); margin: 0 auto; padding: 40px 32px 80px; }
+  @media (max-width: 640px) { .v-wrap { padding: 28px 20px 56px; } }
+  .v-topbar { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 64px; }
+  .v-topbar .v-brand { font-family: var(--vocab-display); font-size: 22px; }
+  .v-topbar .v-meta { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
+
+  /* — Hero — */
+  .v-hero { padding: 32px 0 80px; }
+  .v-h1 { font-size: clamp(40px, 7vw, 88px); margin: 18px 0 22px; }
+  .v-h2 { font-size: clamp(28px, 4vw, 48px); margin: 0 0 18px; }
+  .v-h3 { font-size: 20px; margin: 12px 0 8px; }
+  .v-lede { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; max-width: 56ch; margin: 0 0 28px; color: var(--ink-soft); }
+  .v-body { font-size: 14px; line-height: var(--rhythm); margin: 0; color: var(--ink-soft); }
+  .v-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
+  .v-cta-ghost { background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none !important; }
+
+  /* — Sections — */
+  section.v-section { padding: 64px 0; border-top: 1px solid var(--rule); }
+  section.v-section-quiet { background: rgba(0,0,0,0.015); border-radius: var(--radius-lg); padding: 56px 48px; margin: 32px 0; }
+  section.v-section-cta { text-align: center; padding: 96px 0; border-top: 1px solid var(--rule); }
+  section.v-section-cta .v-cta-row { justify-content: center; }
+  section.v-section-rule .v-grid { padding-top: 28px; border-top: 1px solid var(--rule); }
+
+  /* — Grids — */
+  .v-grid { display: grid; gap: 28px; margin-top: 28px; }
+  .v-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+  .v-grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
+  .v-card { padding: 24px; }
+  .v-card-num { font-family: var(--vocab-display); font-size: 32px; opacity: .35; margin-bottom: 8px; }
+  .v-card-emphasis { transform: translateY(-8px); }
+
+  /* — Stats — */
+  .v-stat { padding: 12px 0; }
+  .v-stat-num { font-size: clamp(36px, 4vw, 56px); line-height: 1; margin-bottom: 8px; }
+
+  /* — Quote — */
+  .v-quote { margin: 0; padding: 0; }
+  .v-quote-text { font-size: clamp(22px, 3vw, 38px); line-height: 1.25; margin: 0 0 24px; }
+  .v-quote-attrib { font-size: 14px; color: var(--ink-soft); }
+
+  /* — Pricing — */
+  .v-price { font-size: clamp(40px, 5vw, 72px); line-height: 1; margin: 14px 0 22px; }
+
+  /* — FAQ — */
+  .v-faq { margin-top: 28px; }
+  .v-faq-item { padding: 20px 0; border-top: 1px solid var(--rule); }
+  .v-faq-item[open] { padding-bottom: 24px; }
+  .v-faq-q { font-family: var(--vocab-display); font-size: 20px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
+  .v-faq-q::after { content: '+'; font-size: 24px; color: var(--ink-soft); transition: transform .2s; }
+  .v-faq-item[open] .v-faq-q::after { transform: rotate(45deg); }
+  .v-faq-q::-webkit-details-marker { display: none; }
+
+  /* — Logos — */
+  .v-pill-center { display: inline-block; }
+  .v-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; margin-top: 28px; }
+  .v-logo { font-family: var(--vocab-display); font-weight: 700; opacity: .55; padding: 12px 0; text-align: center; letter-spacing: .04em; }
+
+  /* — Steps — */
+  .v-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; counter-reset: step; }
+  .v-step { padding-top: 12px; border-top: 2px solid var(--ink); }
+  .v-step-num { font-size: 32px; opacity: .25; margin-bottom: 10px; display: block; }
+
+  /* — Footer — */
+  footer.v-footer { margin-top: 96px; padding-top: 32px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px; font-size: 12px; }
+  footer.v-footer .v-sig { font-family: var(--vocab-display); font-size: 22px; }
+  footer.v-footer code { font-family: ${vocab.fonts?.body?.family ? `'${vocab.fonts.body.family}'` : 'ui-monospace'}, monospace; font-size: 11px; }
+</style>
+</head>
+<body>
+  <main class="v-wrap">
+    <header class="v-topbar">
+      <div class="v-brand">${esc(hostName)}</div>
+      <div class="v-meta">remixed · ${esc(vocab.name)}</div>
+    </header>
+
+    ${sectionsHtml}
+
+    <footer class="v-footer">
+      <div>
+        <div class="v-sig">${esc(hostName)} <span class="v-mark">×</span> ${esc(vocab.name)}</div>
+        <div class="v-meta" style="margin-top:6px">${esc(title)}</div>
+      </div>
+      <div>
+        <code>npx designlang remix ${esc(hostName)} --as ${esc(opts.vocabId || '')}</code>
+      </div>
+    </footer>
+  </main>
+</body>
+</html>`;
+}

package/src/formatters/tailwind.js

@@ -1,4 +1,4 @@
-import { rgbToHex, rgbToHsl } from '../utils.js';
+import { rgbToHsl } from '../utils.js';
 
 function generateColorScale(hex, parsed) {
   const { h, s } = parsed.hsl ?? rgbToHsl(parsed.rgb);

package/src/formatters/vue-theme.js

@@ -1,5 +1,3 @@
-import { rgbToHsl } from '../utils.js';
-
 export function formatVueTheme(design) {
   const { colors, typography, spacing, borders, shadows } = design;
   const lines = [];

package/src/history.js

@@ -1,6 +1,6 @@
 // Historical tracking — save and compare design snapshots over time
 
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
+import { readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { join } from 'path';
 import { homedir } from 'os';
 

package/src/index.js

@@ -26,7 +26,7 @@ import { extractWideGamut } from './extractors/wide-gamut.js';
 import { extractTokenSources } from './extractors/token-sources.js';
 import { extractInteractionStates } from './extractors/interaction-states.js';
 import { extractMotion } from './extractors/motion.js';
-import { extractComponentAnatomy, formatAnatomyStubs } from './extractors/component-anatomy.js';
+import { extractComponentAnatomy } from './extractors/component-anatomy.js';
 import { extractVoice } from './extractors/voice.js';
 import { extractPageIntent } from './extractors/page-intent.js';
 import { extractSectionRoles } from './extractors/section-roles.js';
@@ -39,7 +39,6 @@ import { extractBackgroundPatterns } from './extractors/background-patterns.js';
 import { extractStackIntel } from './extractors/stack-intel.js';
 import { extractFormStates } from './extractors/form-states.js';
 import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
-import { formatMotionTokens } from './formatters/motion-tokens.js';
 
 function safeExtract(fn, ...args) {
   try { return fn(...args); } catch { return null; }

package/src/studio.js

@@ -302,9 +302,9 @@ export async function runStudio(opts) {
         res.end('not found');
         return;
       }
-      // Race-safe read — single try/catch instead of exists→stat→read chain.
+      // Race-free read — let readFileSync surface ENOENT / EISDIR / EACCES
+      // in one syscall instead of a stat→read pair (which would TOCTOU).
       try {
-        if (!statSync(filePath).isFile()) throw new Error('not a file');
         const body = readFileSync(filePath);
         const ext = extname(filePath).toLowerCase();
         res.writeHead(200, { 'content-type': MIME[ext] || 'application/octet-stream' });

package/src/sync.js

@@ -5,17 +5,28 @@ import { formatTokens } from './formatters/tokens.js';
 import { formatTailwind } from './formatters/tailwind.js';
 import { formatCssVars } from './formatters/css-vars.js';
 import { saveSnapshot, getHistory } from './history.js';
-import { writeFileSync, readFileSync, statSync } from 'fs';
+import { openSync, closeSync, ftruncateSync, writeSync } from 'fs';
 import { join } from 'path';
 
-// Race-safe "update only if file exists" — statSync inside try/catch
-// closes the toctou window vs. existsSync→writeFileSync.
+// Race-free "update only if file exists" — open with 'r+' atomically
+// requires an existing file (throws ENOENT otherwise) and gives us a
+// write-capable descriptor in one syscall, eliminating the toctou window
+// that statSync→writeFileSync would have. Truncate then write through the
+// same fd so no other process can sneak between check and write.
 function updateIfExists(path, content) {
+  let fd;
   try {
-    if (!statSync(path).isFile()) return false;
-    writeFileSync(path, content, 'utf-8');
+    fd = openSync(path, 'r+');
+    ftruncateSync(fd, 0);
+    writeSync(fd, content, 0, 'utf-8');
     return true;
-  } catch { return false; }
+  } catch {
+    return false;
+  } finally {
+    if (fd !== undefined) {
+      try { closeSync(fd); } catch { /* best-effort close */ }
+    }
+  }
 }
 
 export async function syncDesign(url, options = {}) {

package/src/visual-diff.js

@@ -7,7 +7,6 @@ import { extractDesignLanguage } from './index.js';
 import { diffDesigns } from './diff.js';
 import { nameFromUrl } from './utils.js';
 import { statSync, existsSync, readFileSync } from 'fs';
-import { basename } from 'path';
 
 function fileKb(p) {
   try { return Math.round(statSync(p).size / 1024); } catch { return 0; }

package/src/vocabularies/art-deco.js

@@ -0,0 +1,79 @@
+// Art Deco — geometry, gold, ornament, vertical typography.
+// References: Chrysler Building, 1920s Vogue covers, Gatsby-era posters.
+
+export const artDeco = {
+  name: 'Art Deco',
+  blurb: 'Gold on ink, geometric ornament, vertical type.',
+  fonts: {
+    display: { family: 'Playfair Display', weights: [400, 700, 900], import: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap' },
+    body: { family: 'Cormorant Garamond', weights: [400, 500, 700], import: 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;700&display=swap' },
+  },
+  tokens: {
+    paper: '#0d1117',
+    ink: '#e8d4a0',
+    inkSoft: '#a89968',
+    accent: '#d4af37',
+    rule: '#a89968',
+    radius: '0px',
+    radiusLg: '2px',
+    shadow: 'none',
+    shadowSm: 'none',
+    spacingUnit: 8,
+    container: '1080px',
+    rhythm: 1.55,
+  },
+  css: `
+    :root {
+      --vocab-display: 'Playfair Display', 'Times New Roman', serif;
+      --vocab-body: 'Cormorant Garamond', 'Garamond', serif;
+    }
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--vocab-body);
+      font-size: 18px;
+      line-height: 1.6;
+      background-image:
+        linear-gradient(135deg, rgba(212,175,55,0.04) 0%, transparent 40%),
+        radial-gradient(ellipse at top, rgba(232,212,160,0.06) 0%, transparent 70%);
+    }
+    .v-display, h1, h2, h3 {
+      font-family: var(--vocab-display);
+      font-weight: 900;
+      letter-spacing: 0.005em;
+      line-height: 1.0;
+      color: var(--accent);
+    }
+    .v-card { border: 1px solid var(--rule); padding: 28px; position: relative; }
+    .v-card::before, .v-card::after {
+      content: '';
+      position: absolute; width: 12px; height: 12px;
+      border: 1px solid var(--accent);
+    }
+    .v-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
+    .v-card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
+    .v-rule {
+      border: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
+      margin: 32px auto;
+      max-width: 200px;
+    }
+    .v-cta {
+      background: var(--paper);
+      color: var(--accent);
+      border: 1.5px solid var(--accent);
+      padding: 14px 32px;
+      font-family: var(--vocab-display);
+      font-weight: 700;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      font-size: 12px;
+      transition: background .2s;
+    }
+    .v-cta:hover { background: var(--accent); color: var(--paper); }
+    .v-pill { font-family: var(--vocab-body); font-style: italic; color: var(--accent); letter-spacing: 0.04em; }
+    .v-mark { color: var(--accent); font-style: italic; }
+    a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
+  `,
+};

package/src/vocabularies/brutalist.js

@@ -0,0 +1,72 @@
+// Brutalist — exposed structure, hard edges, raw type, single accent.
+// References: David Carson's Ray Gun, early Bloomberg.com, Balenciaga,
+// brutalistwebsites.com archive.
+
+export const brutalist = {
+  name: 'Brutalist',
+  blurb: 'Hard edges, mono type, single screaming accent.',
+  fonts: {
+    display: { family: 'Space Grotesk', weights: [500, 700], import: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap' },
+    body: { family: 'IBM Plex Mono', weights: [400, 500, 700], import: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap' },
+  },
+  tokens: {
+    paper: '#f4f1ea',
+    ink: '#0a0a0a',
+    inkSoft: '#3a3a3a',
+    accent: '#ff4800',
+    rule: '#0a0a0a',
+    radius: '0px',
+    radiusLg: '0px',
+    shadow: '6px 6px 0 #0a0a0a',
+    shadowSm: '3px 3px 0 #0a0a0a',
+    spacingUnit: 8,
+    container: '1100px',
+    rhythm: 1.45,
+  },
+  // Signature CSS — applied alongside the per-instance vars below.
+  // Use --vocab-* prefix so tokens compose without colliding with the page shape.
+  css: `
+    :root {
+      --vocab-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
+      --vocab-body: 'IBM Plex Mono', ui-monospace, monospace;
+    }
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--vocab-body);
+      font-size: 15px;
+      line-height: 1.55;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+    }
+    .v-display, h1, h2, h3 {
+      font-family: var(--vocab-display);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      text-transform: none;
+      line-height: 0.95;
+    }
+    .v-card { border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); }
+    .v-rule { border-top: 2px solid var(--ink); }
+    .v-cta {
+      background: var(--accent);
+      color: var(--ink);
+      border: 2px solid var(--ink);
+      box-shadow: var(--shadow-sm);
+      padding: 14px 22px;
+      font-family: var(--vocab-display);
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      transition: transform .08s, box-shadow .08s;
+    }
+    .v-cta:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
+    .v-pill { display: inline-block; padding: 4px 10px; border: 1.5px solid var(--ink); background: var(--paper); }
+    .v-mark { background: var(--accent); padding: 0 4px; }
+    .v-noise {
+      background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.04) 6px 7px);
+    }
+    a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); }
+    a:hover { background: var(--accent); }
+  `,
+};

package/src/vocabularies/cyberpunk.js

@@ -0,0 +1,92 @@
+// Cyberpunk — neon on midnight, scanlines, glitch type, electric accents.
+// References: Blade Runner 2049 UI, Cyberpunk 2077, vaporwave.
+
+export const cyberpunk = {
+  name: 'Cyberpunk',
+  blurb: 'Neon on midnight, scanlines, mono type with glitch energy.',
+  fonts: {
+    display: { family: 'Space Grotesk', weights: [500, 700], import: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap' },
+    body: { family: 'JetBrains Mono', weights: [400, 500, 700], import: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap' },
+  },
+  tokens: {
+    paper: '#0a0815',
+    ink: '#e0e0ff',
+    inkSoft: '#7d80b0',
+    accent: '#ff2bd6',
+    accentAlt: '#00f0ff',
+    rule: '#2a2050',
+    radius: '2px',
+    radiusLg: '4px',
+    shadow: '0 0 28px rgba(255,43,214,0.4), 0 0 0 1px rgba(255,43,214,0.6)',
+    shadowSm: '0 0 14px rgba(0,240,255,0.3)',
+    spacingUnit: 8,
+    container: '1140px',
+    rhythm: 1.5,
+  },
+  css: `
+    :root {
+      --vocab-display: 'Space Grotesk', 'Eurostile', sans-serif;
+      --vocab-body: 'JetBrains Mono', ui-monospace, monospace;
+      --accent-alt: #00f0ff;
+    }
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--vocab-body);
+      font-size: 14px;
+      line-height: 1.55;
+      letter-spacing: 0.01em;
+      background-image:
+        radial-gradient(ellipse at top right, rgba(255,43,214,0.08) 0%, transparent 50%),
+        radial-gradient(ellipse at bottom left, rgba(0,240,255,0.08) 0%, transparent 50%),
+        repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
+    }
+    .v-display, h1, h2, h3 {
+      font-family: var(--vocab-display);
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      line-height: 1.0;
+      text-shadow: 2px 0 0 rgba(255,43,214,0.4), -2px 0 0 rgba(0,240,255,0.4);
+    }
+    h1::before { content: '> '; color: var(--accent-alt); }
+    .v-card {
+      background: linear-gradient(160deg, rgba(40,30,80,0.5), rgba(20,15,40,0.5));
+      border: 1px solid var(--rule);
+      box-shadow: var(--shadow-sm);
+      padding: 24px;
+      position: relative;
+    }
+    .v-card::before {
+      content: ''; position: absolute; inset: 0;
+      background: linear-gradient(45deg, transparent 49%, var(--accent) 49.5%, var(--accent) 50%, transparent 50.5%) top right / 12px 12px no-repeat;
+    }
+    .v-rule { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
+    .v-cta {
+      background: transparent;
+      color: var(--accent);
+      border: 1px solid var(--accent);
+      padding: 14px 26px;
+      font-family: var(--vocab-body);
+      font-weight: 700;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      font-size: 12px;
+      box-shadow: 0 0 0 0 var(--accent), inset 0 0 0 0 var(--accent);
+      transition: box-shadow .15s, color .15s;
+    }
+    .v-cta:hover { color: var(--paper); box-shadow: 0 0 24px var(--accent), inset 0 0 0 2em var(--accent); }
+    .v-pill {
+      font-family: var(--vocab-body);
+      font-size: 10px;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--accent-alt);
+      border: 1px solid var(--accent-alt);
+      padding: 3px 8px;
+      box-shadow: 0 0 10px rgba(0,240,255,0.3);
+    }
+    .v-mark { color: var(--accent); }
+    a { color: var(--accent-alt); text-decoration: none; border-bottom: 1px dashed currentColor; }
+    a:hover { color: var(--accent); }
+  `,
+};

package/src/vocabularies/editorial.js

@@ -0,0 +1,75 @@
+// Editorial — broadsheet typography, generous whitespace, ink-on-paper.
+// References: NYT Magazine, The Atlantic redesigns, Bloomberg Businessweek.
+
+export const editorial = {
+  name: 'Editorial',
+  blurb: 'Broadsheet serifs, generous whitespace, ink on paper.',
+  fonts: {
+    display: { family: 'Instrument Serif', weights: [400], import: 'https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap' },
+    body: { family: 'EB Garamond', weights: [400, 500, 700], import: 'https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700&display=swap' },
+  },
+  tokens: {
+    paper: '#f7f5ef',
+    ink: '#141414',
+    inkSoft: '#555049',
+    accent: '#a52a2a',
+    rule: '#d8d3c4',
+    radius: '0px',
+    radiusLg: '0px',
+    shadow: 'none',
+    shadowSm: 'none',
+    spacingUnit: 8,
+    container: '760px',
+    rhythm: 1.7,
+  },
+  css: `
+    :root {
+      --vocab-display: 'Instrument Serif', 'Times New Roman', serif;
+      --vocab-body: 'EB Garamond', 'Garamond', serif;
+    }
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--vocab-body);
+      font-size: 19px;
+      line-height: 1.65;
+      letter-spacing: 0.005em;
+    }
+    .v-display, h1, h2, h3 {
+      font-family: var(--vocab-display);
+      font-weight: 400;
+      letter-spacing: -0.005em;
+      line-height: 1.05;
+    }
+    .v-display em, h1 em, h2 em, h3 em {
+      font-style: italic;
+      color: var(--accent);
+    }
+    .v-card { border-top: 1px solid var(--rule); padding-top: 28px; }
+    .v-rule { border: 0; height: 1px; background: var(--rule); margin: 32px 0; }
+    .v-cta {
+      background: transparent;
+      color: var(--ink);
+      border-bottom: 2px solid var(--accent);
+      padding: 4px 0;
+      font-family: var(--vocab-display);
+      font-style: italic;
+      font-size: 22px;
+      transition: color .15s;
+    }
+    .v-cta:hover { color: var(--accent); }
+    .v-pill {
+      font-family: var(--vocab-body);
+      font-size: 11px;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      color: var(--ink-soft);
+    }
+    .v-mark {
+      font-style: italic;
+      color: var(--accent);
+    }
+    a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
+    a:hover { border-bottom-color: var(--accent); color: var(--accent); }
+  `,
+};

package/src/vocabularies/index.js

@@ -0,0 +1,35 @@
+// Design vocabularies — opinionated token overlays applied during `designlang remix`.
+//
+// A vocabulary is a self-contained set of tokens + signature CSS that imposes
+// a visual language on top of the page-shape (sections, voice, anatomy)
+// extracted from a real URL. The output is a single HTML file: "what would
+// stripe.com look like if it had been designed brutalist?"
+
+import { brutalist } from './brutalist.js';
+import { swiss } from './swiss.js';
+import { artDeco } from './art-deco.js';
+import { cyberpunk } from './cyberpunk.js';
+import { softUi } from './soft-ui.js';
+import { editorial } from './editorial.js';
+
+export const VOCABULARIES = {
+  brutalist,
+  swiss,
+  'art-deco': artDeco,
+  cyberpunk,
+  'soft-ui': softUi,
+  editorial,
+};
+
+export function listVocabularies() {
+  return Object.entries(VOCABULARIES).map(([id, v]) => ({ id, name: v.name, blurb: v.blurb }));
+}
+
+export function getVocabulary(id) {
+  const v = VOCABULARIES[id];
+  if (!v) {
+    const available = Object.keys(VOCABULARIES).join(', ');
+    throw new Error(`unknown vocabulary "${id}" — available: ${available}`);
+  }
+  return v;
+}

package/src/vocabularies/soft-ui.js

@@ -0,0 +1,83 @@
+// Soft UI — neumorphism reborn. Cushioned shapes, low contrast, single hue.
+// References: Apple Vision OS chrome, modern dashboard work, Spline UI demos.
+
+export const softUi = {
+  name: 'Soft UI',
+  blurb: 'Cushioned shapes, low contrast, single hue. Vision-OS-adjacent.',
+  fonts: {
+    display: { family: 'Manrope', weights: [400, 600, 800], import: 'https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap' },
+    body: { family: 'Manrope', weights: [400, 500, 600], import: '' },
+  },
+  tokens: {
+    paper: '#eef0f7',
+    ink: '#1a1f2e',
+    inkSoft: '#6b7280',
+    accent: '#6366f1',
+    rule: 'rgba(26,31,46,0.08)',
+    radius: '14px',
+    radiusLg: '24px',
+    shadow: '12px 12px 32px rgba(160,170,200,0.45), -12px -12px 32px rgba(255,255,255,0.9)',
+    shadowSm: '6px 6px 14px rgba(160,170,200,0.35), -6px -6px 14px rgba(255,255,255,0.85)',
+    spacingUnit: 8,
+    container: '1100px',
+    rhythm: 1.55,
+  },
+  css: `
+    :root {
+      --vocab-display: 'Manrope', -apple-system, sans-serif;
+      --vocab-body: 'Manrope', -apple-system, sans-serif;
+    }
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--vocab-body);
+      font-size: 15px;
+      line-height: 1.6;
+      letter-spacing: -0.005em;
+    }
+    .v-display, h1, h2, h3 {
+      font-family: var(--vocab-display);
+      font-weight: 800;
+      letter-spacing: -0.025em;
+      line-height: 1.05;
+    }
+    .v-card {
+      background: var(--paper);
+      border-radius: var(--radius-lg);
+      box-shadow: var(--shadow);
+      padding: 28px;
+    }
+    .v-rule {
+      border: 0;
+      height: 4px;
+      border-radius: 2px;
+      background: var(--paper);
+      box-shadow: inset 2px 2px 4px rgba(160,170,200,0.4), inset -2px -2px 4px rgba(255,255,255,0.9);
+    }
+    .v-cta {
+      background: var(--accent);
+      color: white;
+      border-radius: var(--radius);
+      padding: 14px 26px;
+      font-family: var(--vocab-display);
+      font-weight: 600;
+      letter-spacing: -0.005em;
+      box-shadow: 6px 6px 14px rgba(99,102,241,0.35), -2px -2px 8px rgba(255,255,255,0.4);
+      transition: transform .12s, box-shadow .12s;
+    }
+    .v-cta:hover { transform: translateY(-1px); box-shadow: 8px 10px 20px rgba(99,102,241,0.45), -3px -3px 8px rgba(255,255,255,0.5); }
+    .v-cta:active { transform: translateY(1px); box-shadow: inset 4px 4px 8px rgba(0,0,0,0.15); }
+    .v-pill {
+      background: var(--paper);
+      border-radius: 999px;
+      padding: 4px 12px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--ink-soft);
+      box-shadow: inset 2px 2px 4px rgba(160,170,200,0.3), inset -2px -2px 4px rgba(255,255,255,0.9);
+    }
+    .v-mark { color: var(--accent); font-weight: 700; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; text-underline-offset: 4px; }
+  `,
+};

package/src/vocabularies/swiss.js

@@ -0,0 +1,60 @@
+// Swiss — international typographic style, restraint, grids, helvetica.
+// References: Müller-Brockmann, Vignelli, post-Bauhaus corporate identity.
+
+export const swiss = {
+  name: 'Swiss',
+  blurb: 'Helvetica, grids, restraint. The post-Bauhaus default.',
+  fonts: {
+    display: { family: 'Inter', weights: [400, 700, 900], import: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap' },
+    body: { family: 'Inter', weights: [400, 500], import: '' },
+  },
+  tokens: {
+    paper: '#ffffff',
+    ink: '#111111',
+    inkSoft: '#5b5b5b',
+    accent: '#d62828',
+    rule: '#111111',
+    radius: '0px',
+    radiusLg: '0px',
+    shadow: 'none',
+    shadowSm: 'none',
+    spacingUnit: 8,
+    container: '1180px',
+    rhythm: 1.5,
+  },
+  css: `
+    :root {
+      --vocab-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      --vocab-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    }
+    body {
+      background: var(--paper);
+      color: var(--ink);
+      font-family: var(--vocab-body);
+      font-size: 15px;
+      line-height: 1.5;
+      letter-spacing: -0.005em;
+    }
+    .v-display, h1, h2, h3 {
+      font-family: var(--vocab-display);
+      font-weight: 900;
+      letter-spacing: -0.025em;
+      line-height: 1.0;
+    }
+    .v-card { border-top: 1px solid var(--ink); padding-top: 24px; }
+    .v-rule { border-top: 1px solid var(--ink); }
+    .v-cta {
+      background: var(--ink);
+      color: var(--paper);
+      padding: 14px 22px;
+      font-family: var(--vocab-display);
+      font-weight: 700;
+      letter-spacing: -0.005em;
+    }
+    .v-cta:hover { background: var(--accent); }
+    .v-pill { font-family: var(--vocab-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
+    .v-mark { color: var(--accent); }
+    a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+    a:hover { color: var(--accent); }
+  `,
+};