designlang 12.1.0 → 12.3.0

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); }
+  `,
+};