designlang 12.1.0 → 12.3.0

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