designlang 12.2.0 → 12.4.0

package/src/pack.js

@@ -0,0 +1,376 @@
+// designlang pack — bundle every emitter output into a single, polished
+// design-system directory. One artifact a designer or dev can clone, drop
+// into a project, or zip up and send to a client.
+//
+// Layout:
+//   <host>-design-system/
+//     README.md
+//     LICENSE.txt
+//     tokens/
+//       design-tokens.json     DTCG (primitive + semantic)
+//       tokens.flat.json        legacy flat
+//       tailwind.config.js
+//       variables.css
+//       figma-variables.json
+//       motion-tokens.json
+//       theme.js                React theme object
+//     components/
+//       anatomy.tsx             typed React stubs
+//     storybook/                runnable Storybook project
+//     starter/                  minimal Next.js or HTML starter
+//     prompts/
+//       v0.txt
+//       lovable.txt
+//       cursor.md
+//       claude-artifacts.md
+//       recipes/<component>.md  …
+//     extras/
+//       voice.json
+//       prompt-pack.md          single-file rollup
+
+import { mkdirSync, writeFileSync, statSync } from 'fs';
+import { join } from 'path';
+
+import { formatDtcgTokens } from './formatters/dtcg-tokens.js';
+import { formatTokens } from './formatters/tokens.js';
+import { formatTailwind } from './formatters/tailwind.js';
+import { formatCssVars } from './formatters/css-vars.js';
+import { formatFigma } from './formatters/figma.js';
+import { formatMotionTokens } from './formatters/motion-tokens.js';
+import { formatReactTheme } from './formatters/theme.js';
+import { formatStorybook } from './formatters/storybook.js';
+import { formatAnatomyStubs } from './extractors/component-anatomy.js';
+import { buildPromptPack } from './formatters/prompt-pack.js';
+import { generateClone } from './clone.js';
+
+function nameFromUrl(url) {
+  try {
+    const u = new URL(url);
+    return u.hostname.replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '').toLowerCase();
+  } catch {
+    return 'design-system';
+  }
+}
+
+function host(url) {
+  try { return new URL(url).hostname; } catch { return String(url || ''); }
+}
+
+function exists(p) {
+  try { statSync(p); return true; } catch { return false; }
+}
+
+// Normalise emitter output to a writable string. Different formatters return
+// different shapes (string, object, undefined when feature absent) — coerce
+// here so callers don't have to know.
+function toText(content, fallback = '') {
+  if (content == null) return fallback;
+  if (typeof content === 'string') return content;
+  if (Buffer.isBuffer(content)) return content;
+  return JSON.stringify(content, null, 2);
+}
+
+function writeFile(path, content) {
+  mkdirSync(join(path, '..'), { recursive: true });
+  writeFileSync(path, toText(content), 'utf-8');
+}
+
+function buildReadme(design, opts) {
+  const meta = design.meta || {};
+  const hostName = host(meta.url);
+  const grade = design.score?.grade || '—';
+  const overall = design.score?.overall ?? '—';
+  const families = (design.typography?.families || []).map(f => (typeof f === 'string' ? f : f.name)).filter(Boolean).slice(0, 3);
+  const colorCount = (design.colors?.all || []).length;
+  const spacingBase = design.spacing?.base ?? '—';
+  const componentLib = design.componentLibrary?.library || 'unknown';
+  const stack = design.stack?.framework || 'unknown';
+
+  return `# ${hostName} — design system pack
+
+> Built from \`${meta.url || ''}\` on ${new Date(meta.timestamp || Date.now()).toISOString().slice(0, 10)} by [designlang](https://designlang.app) v${opts.version || ''}.
+
+A single, polished bundle of every artifact designlang emits for ${hostName}: tokens, components, a runnable Storybook, a minimal starter, and paste-ready prompts for v0 / Lovable / Cursor / Claude Artifacts.
+
+## At a glance
+
+- **Grade:** ${grade} (${overall}/100)
+- **Stack:** ${stack} · component library: ${componentLib}
+- **Type families:** ${families.length ? families.join(', ') : '—'}
+- **Palette:** ${colorCount} colors
+- **Spacing base:** ${spacingBase}
+
+## What's in this pack
+
+\`\`\`
+${nameFromUrl(meta.url || '')}-design-system/
+├── README.md           ← you are here
+├── LICENSE.txt
+├── tokens/             ← DTCG + Tailwind + CSS vars + Figma vars + motion + theme.js
+├── components/         ← typed React stubs (anatomy.tsx)
+├── storybook/          ← runnable Storybook project
+├── starter/            ← minimal starter app
+├── prompts/            ← v0 · Lovable · Cursor · Claude Artifacts
+└── extras/             ← voice fingerprint + recipe cards
+\`\`\`
+
+## Install the tokens
+
+### Tailwind
+
+\`\`\`js
+// tailwind.config.js
+import config from './tokens/tailwind.config.js';
+export default config;
+\`\`\`
+
+### CSS variables
+
+\`\`\`html
+<link rel="stylesheet" href="tokens/variables.css">
+\`\`\`
+
+### Figma
+
+In Figma → Variables panel → import \`tokens/figma-variables.json\`.
+
+### Storybook
+
+\`\`\`bash
+cd storybook && npm install && npm run storybook
+\`\`\`
+
+## Provenance
+
+This pack was extracted from a publicly-accessible URL and represents the *observable design language* of that site at the time of capture. Token values are inferred from computed styles — no source files were accessed. See \`LICENSE.txt\` for usage guidance.
+
+Re-pack at any time:
+
+\`\`\`bash
+npx designlang pack ${hostName}
+\`\`\`
+`;
+}
+
+function buildLicense(design) {
+  const hostName = host(design.meta?.url);
+  const date = new Date(design.meta?.timestamp || Date.now()).toISOString().slice(0, 10);
+  return `Design System Pack — Provenance
+================================
+
+Source: ${design.meta?.url || hostName}
+Captured: ${date}
+Tool: designlang (https://designlang.app, MIT)
+
+The token values, type scale, spacing system, and component anatomy in
+this pack were inferred from the publicly-accessible computed styles of
+the source URL via a headless browser. No source files, proprietary
+assets, or copyrighted media were accessed or included.
+
+You are free to use these values as a starting point, reference, or
+inspiration. The packaging itself (this README, the bundle layout, the
+emitter output formats) is released under MIT by the designlang project.
+
+Trademarks, logos, brand names, and other identifiable assets of the
+source remain the property of their respective owners and are not
+licensed by this pack. Do not pass off this pack as the original site's
+official design system without permission.
+`;
+}
+
+function buildStarter(design) {
+  // Simple, dependency-free HTML starter that consumes tokens/variables.css
+  // and emits a hero + button preview. The full clone (Next.js) is left as
+  // an opt-in via --with-clone.
+  const hostName = host(design.meta?.url);
+  const families = (design.typography?.families || []).map(f => (typeof f === 'string' ? f : f.name)).filter(Boolean);
+  const display = families[0] || 'system-ui';
+  const heading = (design.voice?.sampleHeadings || [])[0] || `Built from ${hostName}`;
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>${hostName} starter</title>
+<link rel="stylesheet" href="../tokens/variables.css">
+<style>
+  body {
+    margin: 0;
+    font-family: ${JSON.stringify(display)}, -apple-system, BlinkMacSystemFont, sans-serif;
+    background: var(--color-background, #fff);
+    color: var(--color-text, #111);
+    line-height: 1.5;
+  }
+  main { max-width: 840px; margin: 0 auto; padding: 64px 32px; }
+  h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; margin: 0 0 18px; }
+  p { font-size: 18px; max-width: 56ch; color: var(--color-text-secondary, #555); }
+  .cta {
+    display: inline-block;
+    padding: 14px 28px;
+    margin-top: 28px;
+    background: var(--color-primary, #0a0a0a);
+    color: var(--color-on-primary, #fff);
+    border-radius: var(--radius-md, 8px);
+    text-decoration: none;
+    font-weight: 600;
+  }
+  .cta:hover { opacity: 0.9; }
+  .meta { margin-top: 64px; font-size: 12px; color: #888; }
+  .meta a { color: inherit; }
+</style>
+</head>
+<body>
+  <main>
+    <h1>${heading}</h1>
+    <p>This starter is wired to the tokens in <code>tokens/variables.css</code>. Edit the variables and watch this page change. Drop in your own components and use the same tokens to keep the visual language consistent.</p>
+    <a class="cta" href="#">Get started</a>
+    <p class="meta">Generated by <a href="https://designlang.app">designlang</a>. Re-pack with <code>npx designlang pack ${hostName}</code>.</p>
+  </main>
+</body>
+</html>
+`;
+}
+
+function buildPromptPackDocument(design) {
+  const pack = buildPromptPack(design);
+  const lines = [
+    '# Prompt pack',
+    '',
+    `Paste-ready prompts for ${host(design.meta?.url)}. Use the variant that matches your tool.`,
+    '',
+  ];
+  for (const [name, body] of Object.entries(pack)) {
+    if (name === 'recipes') continue;
+    const text = typeof body === 'string' ? body : JSON.stringify(body, null, 2);
+    lines.push(`## ${name}\n`, '```', text.trim(), '```\n');
+  }
+  if (Array.isArray(pack.recipes) && pack.recipes.length) {
+    lines.push('## Recipes\n');
+    for (const recipe of pack.recipes) {
+      const text = typeof recipe.content === 'string' ? recipe.content : JSON.stringify(recipe.content, null, 2);
+      lines.push(`### ${recipe.name || 'recipe'}\n`, text.trim(), '\n');
+    }
+  }
+  return lines.join('\n');
+}
+
+/**
+ * Build a design-system pack on disk.
+ *
+ * @param {object} design — full design from extractDesignLanguage()
+ * @param {object} opts
+ * @param {string} opts.outDir — where to write the pack
+ * @param {string} opts.version — designlang version, embedded in README
+ * @param {boolean} [opts.withClone=true] — include the Next.js starter
+ * @returns {object} { dir, files: string[] }
+ */
+export function buildPack(design, opts = {}) {
+  const outDir = opts.outDir;
+  if (!outDir) throw new Error('pack: outDir is required');
+  const written = [];
+
+  mkdirSync(outDir, { recursive: true });
+
+  // Top-level
+  const readmePath = join(outDir, 'README.md');
+  writeFile(readmePath, buildReadme(design, opts));
+  written.push(readmePath);
+
+  const licensePath = join(outDir, 'LICENSE.txt');
+  writeFile(licensePath, buildLicense(design));
+  written.push(licensePath);
+
+  // tokens/
+  const tokensDir = join(outDir, 'tokens');
+  mkdirSync(tokensDir, { recursive: true });
+
+  // Each formatter has a different return shape — toText() (called by
+  // writeFile) handles both objects and pre-stringified JSON correctly.
+  // formatDtcgTokens returns an object; formatTokens / formatFigma /
+  // formatMotionTokens return JSON strings directly; formatTailwind /
+  // formatCssVars / formatReactTheme return code strings.
+  const tokenWrites = [
+    ['design-tokens.json',   formatDtcgTokens(design)],
+    ['tokens.flat.json',     formatTokens(design)],
+    ['tailwind.config.js',   formatTailwind(design)],
+    ['variables.css',        formatCssVars(design)],
+    ['figma-variables.json', formatFigma(design)],
+    ['motion-tokens.json',   formatMotionTokens(design.motion || {})],
+    ['theme.js',             formatReactTheme(design)],
+  ];
+  for (const [name, content] of tokenWrites) {
+    const p = join(tokensDir, name);
+    writeFile(p, content);
+    written.push(p);
+  }
+
+  // components/
+  const componentsDir = join(outDir, 'components');
+  mkdirSync(componentsDir, { recursive: true });
+  const anatomyPath = join(componentsDir, 'anatomy.tsx');
+  writeFile(anatomyPath, formatAnatomyStubs(design.componentAnatomy || []));
+  written.push(anatomyPath);
+
+  // storybook/
+  const sbFiles = formatStorybook(design);
+  for (const [relPath, content] of Object.entries(sbFiles)) {
+    const p = join(outDir, 'storybook', relPath);
+    mkdirSync(join(p, '..'), { recursive: true });
+    writeFile(p, content);
+    written.push(p);
+  }
+
+  // starter/ — minimal HTML by default; full Next.js when --with-clone
+  const starterDir = join(outDir, 'starter');
+  if (opts.withClone) {
+    try {
+      generateClone(design, starterDir);
+      written.push(starterDir);
+    } catch (err) {
+      // Clone is best-effort — fall back to HTML starter if it errors.
+      mkdirSync(starterDir, { recursive: true });
+      writeFile(join(starterDir, 'index.html'), buildStarter(design));
+      written.push(join(starterDir, 'index.html'));
+    }
+  } else {
+    mkdirSync(starterDir, { recursive: true });
+    const starterPath = join(starterDir, 'index.html');
+    writeFile(starterPath, buildStarter(design));
+    written.push(starterPath);
+  }
+
+  // prompts/
+  const pack = buildPromptPack(design);
+  const promptsDir = join(outDir, 'prompts');
+  mkdirSync(promptsDir, { recursive: true });
+  for (const [name, content] of Object.entries(pack)) {
+    if (name === 'recipes') continue;
+    const p = join(promptsDir, name);
+    writeFile(p, content);
+    written.push(p);
+  }
+  if (Array.isArray(pack.recipes) && pack.recipes.length) {
+    const recipesDir = join(promptsDir, 'recipes');
+    mkdirSync(recipesDir, { recursive: true });
+    for (const recipe of pack.recipes) {
+      // Each recipe = { name, content }; sanitise name to a safe filename.
+      const safeName = String(recipe.name || 'recipe').replace(/[^a-z0-9-_]+/gi, '-').toLowerCase();
+      const p = join(recipesDir, `${safeName}.md`);
+      writeFile(p, recipe.content);
+      written.push(p);
+    }
+  }
+
+  // extras/
+  const extrasDir = join(outDir, 'extras');
+  mkdirSync(extrasDir, { recursive: true });
+  if (design.voice) {
+    const p = join(extrasDir, 'voice.json');
+    writeFile(p, JSON.stringify(design.voice, null, 2));
+    written.push(p);
+  }
+  const promptDocPath = join(extrasDir, 'prompt-pack.md');
+  writeFile(promptDocPath, buildPromptPackDocument(design));
+  written.push(promptDocPath);
+
+  return { dir: outDir, files: written };
+}

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