designlang 7.2.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [8.0.0] — 2026-04-20
+
+A credibility-and-distribution release. Three reliability bugs that hurt trust on real sites are fixed; three DX flags close the most-requested CLI gaps; five new surfaces (VS Code, Raycast, Figma, GitHub Actions, MCP registry) ship alongside.
+
+### Reliability
+
+- **Brand / primary color detection rewritten** — the extractor now ranks chromatic clusters by `interactiveBg × 100 + saturation × 2 + log(usage)` and requires either HSL saturation > 25 or an interactive-bg hit to qualify as chromatic. Previously the extractor picked the most-counted color, which on neutral-heavy sites like Linear meant the "Primary" was a pale gray (`#d0d6e0`). v8 correctly picks Linear's lime CTA (`#e4f222`) and Stripe's purple (`#533afd`). `src/extractors/colors.js`.
+- **Accessibility scoring defused** — the crawler now emits a `hasText` boolean per element (a direct text-node child with visible characters), and the WCAG extractor filters out decorative glyph wrappers, transparent/overlay pairs, and non-text containers. Linear's WCAG score moved from 25% (171 failing pairs) to 83% (1 failing pair). `src/extractors/accessibility.js`, `src/crawler.js`.
+- **Design-system score recalibrated** — thresholds for color count, shadow count, border-radii count, typography weight, and type-scale size were re-fit against ground-truth sites (Stripe, Linear, Vercel, GitHub, Apple). `cssHealth` is now weighted in the overall (8/100). Linear 47→76, Stripe 81→88, Apple 83→86, Vercel 64→76. `src/extractors/scoring.js`.
+
+### Added
+
+- **`--selector <css>`** — scopes extraction to a DOM subtree (e.g. `designlang https://stripe.com --selector "footer"`). Stripe full-page extraction drops from 2,409 elements to 112 when scoped to the footer. Falls back to the full document if the selector is invalid or empty.
+- **`--system-chrome`** — forces Playwright to use the locally installed Chrome (`channel: 'chrome'`) instead of the ~150 MB bundled Chromium, for faster `npx` first-runs in environments that already have Chrome.
+- **`--json` output mode** — full extraction payload written to stdout (suppresses progress UI) for piping into other tools. This was a partial implementation in v7; v8 makes it first-class and adds it to the CLI reference.
+- **VS Code extension** (`vscode-extension/`) — `designlang: Extract design from URL` and `designlang: Extract and inject into workspace` commands.
+- **Raycast extension** (`raycast-extension/`) — Extract, Score, and "Copy CLI command for URL" commands.
+- **Figma plugin** (`figma-plugin/`) — URL or paste-JSON → Figma Variables collections (MV for Figma's `figma.variables` API, with multi-mode support).
+- **GitHub Action** (`github-action/`) — "Design regression guard": runs `designlang` on a URL, diffs tokens vs a committed baseline, and comments the delta on the pull request. Optional `fail-on-change`.
+- **Smithery + MCP registry** (`smithery.yaml`, `smithery.dockerfile`, `docs/MCP-REGISTRY.md`) — one-command install in Smithery; checklist for the official MCP registry, Cursor, and Claude Desktop.
+- **Chrome Web Store + Firefox + Edge listing prep** (`chrome-extension/PRIVACY.md`, `chrome-extension/STORE_LISTING.md`) — privacy policy and store copy.
+- **README hero demo tape** (`docs/demo.tape`) — VHS script that renders an animated terminal GIF into `website/public/demo.gif`.
+- **Launch kit** (`docs/LAUNCH.md`) — Product Hunt / Show HN / Twitter copy + day-of checklist.
+
+### Changed
+
+- README: hero image now references the animated demo (with static PNG fallback), adds an "Install everywhere" table covering all surfaces, documents `--selector`, `--system-chrome`, and `--json`.
+- `.npmignore`: excludes all companion-surface directories (`vscode-extension/`, `raycast-extension/`, `figma-plugin/`, `github-action/`, `chrome-extension/`, `website/`) and test fixtures so the npm tarball stays small — each surface publishes to its own registry.
+- `bin/design-extract.js`: reports `8.0.0` from `--version`.
+- `src/config.js`: whitelists `selector` and `systemChrome` from CLI/config.
+
+### Thanks
+
+- To everyone who flagged that Linear's primary was coming out as light gray — that single complaint drove the brand-color rewrite.
+
 ## [7.2.0] — 2026-04-19
 
 ### Added

package/README.md

@@ -396,6 +396,9 @@ Options:
   --header <headers...>   Custom headers (name:value)
   --user-agent <ua>       Override the browser User-Agent string
   --insecure              Ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)
+  --selector <css>        Only extract from elements matching this CSS selector (e.g. ".pricing-card")
+  --system-chrome         Use the system Chrome install instead of the bundled Chromium (skips 150MB download)
+  --json                  Print full extraction as JSON to stdout (for piping into other tools)
   --framework <type>      Only generate specific theme (react, shadcn)
   --platforms <csv>       Additional platforms: web,ios,android,flutter,wordpress,all (additive)
   --emit-agent-rules      Emit Cursor / Claude Code / CLAUDE.md / agents.md rule files
@@ -468,6 +471,20 @@ Running `designlang https://vercel.com --full`:
 5. **Score** — Accessibility extractor calculates WCAG contrast ratios for all color pairs
 6. **Capture** — Optional: screenshots, responsive viewport crawling, interaction state recording
 
+## Install Everywhere
+
+designlang ships surfaces beyond the CLI:
+
+| Surface | Path | Description |
+|---------|------|-------------|
+| **CLI** | `npx designlang <url>` | Main entry point. |
+| **VS Code extension** | [`vscode-extension/`](vscode-extension/) | "Extract design from URL" command + auto-inject into workspace. |
+| **Raycast extension** | [`raycast-extension/`](raycast-extension/) | Extract, score, and "copy CLI command" from Raycast. |
+| **Figma plugin** | [`figma-plugin/`](figma-plugin/) | Paste a URL inside Figma, get a full Variables collection. |
+| **GitHub Action** | [`github-action/`](github-action/) | "Design regression guard" — diffs tokens on every PR and comments. |
+| **Chrome extension** | [`chrome-extension/`](chrome-extension/) | One-click handoff from any tab (MV3, `activeTab` only). |
+| **MCP server** | `npx designlang mcp` | Exposes the extracted design as MCP resources + tools for Cursor, Claude Code, Windsurf, etc. See [`docs/MCP-REGISTRY.md`](docs/MCP-REGISTRY.md). |
+
 ## Agent Skill
 
 Works with **Claude Code, Cursor, Codex, and 40+ AI coding agents** via the skills ecosystem:

package/bin/design-extract.js

@@ -48,7 +48,7 @@ const program = new Command();
 program
   .name('designlang')
   .description('Extract the complete design language from any website')
-  .version('6.0.0');
+  .version('8.0.0');
 
 // ── Main command: extract ──────────────────────────────────────
 program
@@ -72,6 +72,8 @@ program
   .option('--user-agent <ua>', 'override the browser User-Agent string')
   .option('--insecure', 'ignore HTTPS/SSL certificate errors (self-signed, dev, proxies)')
   .option('--ignore <selectors...>', 'CSS selectors to remove before extraction')
+  .option('--selector <css>', 'only extract design from elements matching this CSS selector (e.g. ".pricing-card")')
+  .option('--system-chrome', 'use the system Chrome install instead of the bundled Chromium (skips the 150MB Playwright download)')
   .option('--tokens-legacy', 'Emit pre-v7 flat token JSON (backward compat)')
   .option('--platforms <csv>', 'Additional platforms: web,ios,android,flutter,wordpress,all (web is always emitted)', 'web')
   .option('--emit-agent-rules', 'Emit Cursor/Claude Code/generic agent rules')
@@ -155,6 +157,8 @@ program
         insecure: merged.insecure || false,
         userAgent: merged.userAgent,
         deepInteract: merged.deepInteract || merged.full,
+        selector: merged.selector,
+        channel: merged.systemChrome ? 'chrome' : undefined,
       });
 
       // Responsive capture

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "designlang",
-  "version": "7.2.0",
+  "version": "8.0.0",
   "description": "Extract the complete design language from any website — colors, typography, spacing, shadows, and more. Outputs AI-optimized markdown, W3C design tokens, Tailwind config, and CSS variables.",
   "type": "module",
   "bin": {

package/src/config.js

@@ -39,6 +39,8 @@ export function mergeConfig(cliOpts, config) {
     cookieFile: cliOpts.cookieFile || config.cookieFile,
     insecure: cliOpts.insecure || config.insecure || false,
     userAgent: cliOpts.userAgent || config.userAgent,
+    selector: cliOpts.selector || config.selector,
+    systemChrome: cliOpts.systemChrome || config.systemChrome || false,
   };
 }
 

package/src/crawler.js

@@ -24,6 +24,8 @@ export async function crawlPage(url, options = {}) {
     insecure = false,
     userAgent,
     deepInteract = false,
+    selector,
+    channel,
   } = options;
 
   const launchArgs = [
@@ -39,6 +41,9 @@ export async function crawlPage(url, options = {}) {
   const browser = await chromium.launch({
     headless: true,
     ...(executablePath && { executablePath }),
+    // channel: 'chrome' forces Playwright to use the system Chrome install
+    // instead of the 150MB bundled Chromium — see --system-chrome.
+    ...(channel && { channel }),
     args: launchArgs,
   });
   try {
@@ -97,7 +102,7 @@ export async function crawlPage(url, options = {}) {
       interactState = await runInteractionPass(page).catch(() => null);
     }
 
-    const lightData = await extractPageData(page, ignore);
+    const lightData = await extractPageData(page, ignore, selector);
     lightData.cssCoverage = cssCoverage;
     if (interactState) lightData.interactState = interactState;
 
@@ -388,8 +393,8 @@ async function runInteractionPass(page) {
   return state;
 }
 
-async function extractPageData(page, ignoreSelectors) {
-  const data = await page.evaluate(({ maxElements, ignoreSelectors }) => {
+async function extractPageData(page, ignoreSelectors, scopeSelector) {
+  const data = await page.evaluate(({ maxElements, ignoreSelectors, scopeSelector }) => {
     // Remove ignored elements before extraction
     if (ignoreSelectors && ignoreSelectors.length > 0) {
       for (const sel of ignoreSelectors) {
@@ -420,7 +425,23 @@ async function extractPageData(page, ignoreSelectors) {
       }
       return collected;
     }
-    const elements = collectElements(document, []);
+
+    // If --selector was provided, scope element collection to the matching
+    // subtrees only. Falls back to the full document if the selector is
+    // invalid or returns no matches.
+    let scopeRoots = [document];
+    if (scopeSelector) {
+      try {
+        const matches = Array.from(document.querySelectorAll(scopeSelector));
+        if (matches.length > 0) scopeRoots = matches;
+      } catch { /* invalid selector → use document */ }
+    }
+    const elements = [];
+    for (const root of scopeRoots) {
+      if (root !== document && root.nodeType === 1) elements.push(root);
+      collectElements(root, elements);
+      if (elements.length >= maxElements) break;
+    }
 
     // Build a lightweight index: stylesheet URL + their top selectors.
     // Used to attribute each element's primary source stylesheet.
@@ -502,8 +523,16 @@ async function extractPageData(page, ignoreSelectors) {
         sourceAttrBudget--;
       }
 
+      // hasText: at least one direct text-node child with visible characters —
+      // lets downstream extractors filter decorative spans/divs out of WCAG
+      // contrast accounting.
+      let hasText = false;
+      for (const node of el.childNodes) {
+        if (node.nodeType === 3 && node.textContent && node.textContent.trim()) { hasText = true; break; }
+      }
+
       results.computedStyles.push({
-        tag, classList, role, area,
+        tag, classList, role, area, hasText,
         color: cs.color,
         backgroundColor: cs.backgroundColor,
         backgroundImage: cs.backgroundImage,
@@ -840,7 +869,7 @@ async function extractPageData(page, ignoreSelectors) {
     }
 
     return results;
-  }, { maxElements: MAX_ELEMENTS, ignoreSelectors: ignoreSelectors || [] });
+  }, { maxElements: MAX_ELEMENTS, ignoreSelectors: ignoreSelectors || [], scopeSelector: scopeSelector || null });
 
   // Fetch and parse cross-origin stylesheets
   if (data.crossOriginSheets && data.crossOriginSheets.length > 0) {

package/src/extractors/accessibility.js

@@ -28,16 +28,59 @@ function wcagLevel(ratio, isLargeText) {
   return 'FAIL';
 }
 
+// Tags where "foreground vs background" contrast is *not* a WCAG text concern —
+// SVG/icon glyphs, media, form primitives, and structural containers without
+// direct text. Filtering these removes the overlay/decorative false-positives
+// that used to crater scores on dark-themed sites.
+const NON_TEXT_TAGS = new Set([
+  'svg', 'path', 'circle', 'rect', 'polygon', 'polyline', 'line', 'ellipse',
+  'use', 'defs', 'g', 'clippath', 'mask', 'filter', 'symbol', 'stop', 'lineargradient', 'radialgradient',
+  'img', 'picture', 'video', 'audio', 'canvas', 'iframe', 'source', 'track',
+  'br', 'hr', 'wbr',
+  'input', 'select', 'textarea', 'progress', 'meter', 'option', 'optgroup',
+  'script', 'style', 'link', 'meta', 'head', 'html', 'body',
+  'main', 'section', 'article', 'aside', 'header', 'footer', 'nav',
+  'div', 'figure', 'form', 'fieldset', 'ul', 'ol', 'dl',
+]);
+
+const TEXT_BEARING_TAGS = new Set([
+  'p', 'a', 'button', 'label', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'td', 'th', 'code', 'pre', 'em', 'strong', 'small', 'b', 'i', 'u',
+  'time', 'summary', 'figcaption', 'blockquote', 'q', 'mark', 'cite', 'abbr',
+  'dt', 'dd', 'kbd', 'samp', 'var', 'sub', 'sup', 'del', 'ins', 'caption', 'legend',
+  // span is a high-noise/high-signal tag — it wraps both real text and
+  // decorative glyphs. Include it but require an explicit background (the
+  // opacity filter downstream still removes the decorative transparent ones).
+  'span',
+]);
+
+function isContrastRelevant(el) {
+  const tag = (el.tag || '').toLowerCase();
+  if (NON_TEXT_TAGS.has(tag)) return false;
+  if (!TEXT_BEARING_TAGS.has(tag)) return false;
+  // If the crawler captured hasText, trust it — filters decorative
+  // span/link/button wrappers that hold no real glyphs. If hasText wasn't
+  // captured (older fixtures, unit tests) fall back to inclusion.
+  if (el.hasText === false) return false;
+  return true;
+}
+
 export function extractAccessibility(computedStyles) {
   const pairs = new Map(); // "fg|bg" -> { fg, bg, count, elements }
 
   for (const el of computedStyles) {
+    if (!isContrastRelevant(el)) continue;
+
     const fg = parseColor(el.color);
     const bg = parseColor(el.backgroundColor);
-    if (!fg || !bg || bg.a === 0) continue;
+    if (!fg || !bg) continue;
+    // Skip transparent/semi-transparent — real contrast depends on the parent
+    // stack which we don't composite. Counting these as "fails" is noise.
+    if (bg.a < 0.9 || fg.a < 0.9) continue;
 
     const fgHex = rgbToHex(fg);
     const bgHex = rgbToHex(bg);
+    if (fgHex === bgHex) continue;
     const key = `${fgHex}|${bgHex}`;
 
     if (!pairs.has(key)) {

package/src/extractors/colors.js

@@ -1,25 +1,39 @@
-import { parseColor, rgbToHex, rgbToHsl, clusterColors, isSaturated } from '../utils.js';
+import { parseColor, rgbToHex, rgbToHsl, clusterColors, isSaturated, colorDistance } from '../utils.js';
+
+const INTERACTIVE_TAGS = new Set(['a', 'button']);
+const INTERACTIVE_ROLES = new Set(['button', 'link', 'menuitem', 'tab']);
+const INTERACTIVE_CLASS_RE = /\b(btn|button|cta|primary|action)\b/i;
+
+function isInteractive(el) {
+  if (!el) return false;
+  if (INTERACTIVE_TAGS.has(el.tag)) return true;
+  if (el.role && INTERACTIVE_ROLES.has(el.role)) return true;
+  if (el.classList && INTERACTIVE_CLASS_RE.test(el.classList)) return true;
+  return false;
+}
 
 export function extractColors(computedStyles) {
-  const colorMap = new Map(); // hex -> { hex, parsed, count, contexts: Set }
+  const colorMap = new Map(); // hex -> { hex, parsed, count, contexts: Set, interactiveBg: number }
 
-  function addColor(value, context) {
+  function addColor(value, context, { interactive = false } = {}) {
     const parsed = parseColor(value);
     if (!parsed || parsed.a === 0) return;
     const hex = rgbToHex(parsed);
     if (!colorMap.has(hex)) {
-      colorMap.set(hex, { hex, parsed, count: 0, contexts: new Set() });
+      colorMap.set(hex, { hex, parsed, count: 0, contexts: new Set(), interactiveBg: 0 });
     }
     const entry = colorMap.get(hex);
     entry.count++;
     entry.contexts.add(context);
+    if (interactive && context === 'background') entry.interactiveBg++;
   }
 
   const gradients = new Set();
 
   for (const el of computedStyles) {
+    const interactive = isInteractive(el);
     addColor(el.color, 'text');
-    addColor(el.backgroundColor, 'background');
+    addColor(el.backgroundColor, 'background', { interactive });
     addColor(el.borderColor, 'border');
 
     if (el.backgroundImage && el.backgroundImage !== 'none' && el.backgroundImage.includes('gradient')) {
@@ -30,12 +44,21 @@ export function extractColors(computedStyles) {
   const allColors = Array.from(colorMap.values());
   const clusters = clusterColors(allColors, 15);
 
-  // Classify roles
+  // Aggregate interactive-bg score per cluster (sum across members)
+  for (const cluster of clusters) {
+    cluster.interactiveBg = cluster.members.reduce((s, m) => s + (m.interactiveBg || 0), 0);
+    const { s: sat, l: lit } = rgbToHsl(cluster.representative);
+    cluster.saturation = sat;
+    cluster.lightness = lit;
+  }
+
+  // Classify roles — tighten chromatic threshold so pale grays (hsl sat < 25) don't qualify
   const neutrals = [];
   const chromatic = [];
 
   for (const cluster of clusters) {
-    if (isSaturated(cluster.representative)) {
+    const chromaticEnough = cluster.saturation > 25 && cluster.lightness > 5 && cluster.lightness < 95;
+    if (chromaticEnough || (isSaturated(cluster.representative) && cluster.interactiveBg > 0)) {
       chromatic.push(cluster);
     } else {
       neutrals.push(cluster);
@@ -61,12 +84,27 @@ export function extractColors(computedStyles) {
     }
   }
 
-  const primary = chromatic[0] || null;
-  const secondary = chromatic[1] || null;
-  const accent = chromatic.find(c => {
-    const pct = c.count / allColors.reduce((s, a) => s + a.count, 0);
+  // Rank chromatic clusters by brand-likelihood:
+  //   interactiveBg carries the most signal (it's a CTA color)
+  //   saturation comes next (brand colors are usually punchy)
+  //   raw usage count is a weak tiebreaker (avoids neutral-heavy sites dominating)
+  function brandScore(c) {
+    return c.interactiveBg * 100 + c.saturation * 2 + Math.log10(Math.max(1, c.count));
+  }
+  const ranked = [...chromatic].sort((a, b) => brandScore(b) - brandScore(a));
+
+  const primary = ranked[0] || null;
+  // secondary: distinct hue from primary
+  const secondary = ranked.find(c => {
+    if (!primary || c === primary) return false;
+    return colorDistance(c.representative, primary.representative) > 60;
+  }) || ranked[1] || null;
+  // accent: sparse chromatic, prefers background context
+  const accent = ranked.find(c => {
+    if (c === primary || c === secondary) return false;
+    const pct = c.count / Math.max(1, allColors.reduce((s, a) => s + a.count, 0));
     return pct < 0.05 && c.members.some(m => m.contexts.has('background'));
-  }) || chromatic[2] || null;
+  }) || ranked.find(c => c !== primary && c !== secondary) || null;
 
   return {
     primary: primary ? { hex: primary.hex, rgb: primary.representative, hsl: rgbToHsl(primary.representative), count: primary.count } : null,

package/src/extractors/scoring.js

@@ -4,14 +4,16 @@ export function scoreDesignSystem(design) {
   const scores = {};
   const issues = [];
 
-  // 1. Color discipline (0-100)
-  // Fewer unique colors = more disciplined
+  // 1. Color discipline (0-100) — calibrated against real production sites
+  // (Linear, Stripe, Vercel, GitHub, Apple) which commonly ship 20–50 colors
+  // once you include hover/disabled/alpha variants.
   const colorCount = design.colors.all.length;
-  if (colorCount <= 8) scores.colorDiscipline = 100;
-  else if (colorCount <= 15) scores.colorDiscipline = 85;
-  else if (colorCount <= 25) scores.colorDiscipline = 70;
-  else if (colorCount <= 40) scores.colorDiscipline = 50;
-  else { scores.colorDiscipline = 30; issues.push(`${colorCount} unique colors detected — consider consolidating to a tighter palette`); }
+  if (colorCount <= 12) scores.colorDiscipline = 100;
+  else if (colorCount <= 25) scores.colorDiscipline = 92;
+  else if (colorCount <= 40) scores.colorDiscipline = 80;
+  else if (colorCount <= 60) scores.colorDiscipline = 65;
+  else if (colorCount <= 100) scores.colorDiscipline = 50;
+  else { scores.colorDiscipline = 35; issues.push(`${colorCount} unique colors detected — consider consolidating to a tighter palette`); }
 
   if (!design.colors.primary) {
     scores.colorDiscipline -= 15;
@@ -26,46 +28,62 @@ export function scoreDesignSystem(design) {
 
   const weightCount = design.typography.weights.length;
   if (weightCount <= 3) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
-  else if (weightCount <= 5) scores.typographyConsistency = Math.min(scores.typographyConsistency, 80);
+  else if (weightCount <= 5) scores.typographyConsistency = Math.min(scores.typographyConsistency, 90);
+  else if (weightCount <= 7) scores.typographyConsistency = Math.min(scores.typographyConsistency, 80);
   else { scores.typographyConsistency -= 15; issues.push(`${weightCount} font weights in use — consider standardizing to 3 (regular, medium, bold)`); }
 
+  // Type-scale count — variable-font sites and component-rich pages commonly
+  // ship 12–18 sizes (nav, body, caption, h1–h6, stat, pill, etc).
   const scaleSize = design.typography.scale.length;
-  if (scaleSize <= 6) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
-  else if (scaleSize <= 10) scores.typographyConsistency = Math.min(scores.typographyConsistency, 85);
+  if (scaleSize <= 8) scores.typographyConsistency = Math.min(scores.typographyConsistency, 100);
+  else if (scaleSize <= 14) scores.typographyConsistency = Math.min(scores.typographyConsistency, 92);
+  else if (scaleSize <= 20) scores.typographyConsistency = Math.min(scores.typographyConsistency, 82);
   else { scores.typographyConsistency -= 10; issues.push(`${scaleSize} distinct font sizes — consider a tighter type scale`); }
 
-  // 3. Spacing system (0-100)
+  // 3. Spacing system (0-100) — detectScale() only tries 2/4/6/8 as bases and
+  // fails on sites whose computed-style spacing has line-height/SVG noise mixed
+  // in. Don't penalise too hard when a base isn't pinned but tokenization is
+  // healthy — the design still has a system, we just can't name it.
   if (design.spacing.base) {
     scores.spacingSystem = 90;
-    // Check how many values fit the base
     const fittingValues = design.spacing.scale.filter(v => v % design.spacing.base === 0).length;
     const fitRatio = fittingValues / design.spacing.scale.length;
     if (fitRatio >= 0.8) scores.spacingSystem = 100;
-    else if (fitRatio >= 0.6) scores.spacingSystem = 80;
-    else scores.spacingSystem = 65;
+    else if (fitRatio >= 0.6) scores.spacingSystem = 85;
+    else scores.spacingSystem = 75;
   } else {
-    scores.spacingSystem = 40;
-    issues.push('No consistent spacing base unit detected — values appear arbitrary');
+    // Fallback: soft penalty if the site still ships design tokens (CSS vars).
+    const varCount = Object.values(design.variables || {}).reduce((s, v) => s + Object.keys(v || {}).length, 0);
+    scores.spacingSystem = varCount >= 20 ? 70 : 55;
+    if (varCount < 20) issues.push('No consistent spacing base unit detected — values appear arbitrary');
   }
 
-  if (design.spacing.scale.length > 20) {
+  // Spacing value count — real sites commonly ship 25–40 distinct spacings
+  // (component padding, gap, stacked layout rhythm). Only penalise above 35.
+  if (design.spacing.scale.length > 50) {
     scores.spacingSystem -= 15;
     issues.push(`${design.spacing.scale.length} unique spacing values — too many one-off values`);
+  } else if (design.spacing.scale.length > 35) {
+    scores.spacingSystem -= 5;
   }
 
-  // 4. Shadow consistency (0-100)
+  // 4. Shadow consistency (0-100) — calibrated; real sites routinely ship
+  // 10–20 shadows once hover/focus/elevation variants are counted.
   const shadowCount = design.shadows.values.length;
-  if (shadowCount === 0) scores.shadowConsistency = 80; // no shadows is fine
-  else if (shadowCount <= 4) scores.shadowConsistency = 100;
-  else if (shadowCount <= 8) scores.shadowConsistency = 75;
+  if (shadowCount === 0) scores.shadowConsistency = 85;
+  else if (shadowCount <= 5) scores.shadowConsistency = 100;
+  else if (shadowCount <= 10) scores.shadowConsistency = 90;
+  else if (shadowCount <= 18) scores.shadowConsistency = 78;
+  else if (shadowCount <= 28) scores.shadowConsistency = 62;
   else { scores.shadowConsistency = 50; issues.push(`${shadowCount} unique shadows — consider a 3-level elevation scale (sm/md/lg)`); }
 
   // 5. Border radius consistency (0-100)
   const radiiCount = design.borders.radii.length;
-  if (radiiCount <= 3) scores.radiusConsistency = 100;
-  else if (radiiCount <= 5) scores.radiusConsistency = 85;
-  else if (radiiCount <= 8) scores.radiusConsistency = 65;
-  else { scores.radiusConsistency = 40; issues.push(`${radiiCount} unique border radii — standardize to 3-4 values`); }
+  if (radiiCount <= 4) scores.radiusConsistency = 100;
+  else if (radiiCount <= 7) scores.radiusConsistency = 90;
+  else if (radiiCount <= 10) scores.radiusConsistency = 80;
+  else if (radiiCount <= 15) scores.radiusConsistency = 65;
+  else { scores.radiusConsistency = 45; issues.push(`${radiiCount} unique border radii — standardize to 3-4 values`); }
 
   // 6. Accessibility (from existing extractor)
   scores.accessibility = design.accessibility?.score || 0;
@@ -101,13 +119,14 @@ export function scoreDesignSystem(design) {
 
   // Overall score (weighted average)
   const weights = {
-    colorDiscipline: 20,
-    typographyConsistency: 20,
-    spacingSystem: 20,
-    shadowConsistency: 10,
-    radiusConsistency: 10,
+    colorDiscipline: 18,
+    typographyConsistency: 18,
+    spacingSystem: 18,
+    shadowConsistency: 9,
+    radiusConsistency: 9,
     accessibility: 15,
     tokenization: 5,
+    cssHealth: 8,
   };
 
   let totalWeight = 0;

package/.github/FUNDING.yml

@@ -1 +0,0 @@
-github: [Manavarya09]

package/.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,62 +0,0 @@
-name: Bug report
-description: Something in designlang is broken or produces wrong output.
-title: "[Bug]: "
-labels: ["bug"]
-body:
-  - type: input
-    id: url
-    attributes:
-      label: URL extracted
-      description: The site you ran designlang against.
-      placeholder: https://example.com
-    validations:
-      required: true
-  - type: input
-    id: command
-    attributes:
-      label: Command used
-      description: The exact command you ran.
-      placeholder: npx designlang https://example.com --full
-    validations:
-      required: true
-  - type: textarea
-    id: expected
-    attributes:
-      label: What you expected
-    validations:
-      required: true
-  - type: textarea
-    id: actual
-    attributes:
-      label: What actually happened
-      description: Include stack traces, log output, or relevant snippets from output files.
-    validations:
-      required: true
-  - type: input
-    id: version
-    attributes:
-      label: designlang version
-      description: Output of `npx designlang --version` (or the version in package.json)
-      placeholder: 7.0.0
-    validations:
-      required: true
-  - type: input
-    id: node
-    attributes:
-      label: Node.js version
-      description: Output of `node --version`
-      placeholder: v20.11.0
-    validations:
-      required: true
-  - type: input
-    id: os
-    attributes:
-      label: OS
-      placeholder: macOS 14.5 / Ubuntu 22.04 / Windows 11
-    validations:
-      required: true
-  - type: textarea
-    id: extra
-    attributes:
-      label: Anything else
-      description: Screenshots, env variables, network constraints, auth requirements, etc.

package/.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Question or discussion
-    url: https://github.com/Manavarya09/design-extract/discussions
-    about: Ask a question, share an extraction, or discuss ideas.
-  - name: designlang website
-    url: https://website-five-lime-65.vercel.app
-    about: Read more about what designlang does.

package/.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,28 +0,0 @@
-name: Feature request
-description: Suggest a new extraction, output format, or CLI capability.
-title: "[Feature]: "
-labels: ["enhancement"]
-body:
-  - type: textarea
-    id: problem
-    attributes:
-      label: Problem
-      description: What are you trying to do that designlang doesn't support today?
-    validations:
-      required: true
-  - type: textarea
-    id: proposal
-    attributes:
-      label: Proposal
-      description: What should designlang do? CLI flag, command, new extractor, new output format?
-    validations:
-      required: true
-  - type: textarea
-    id: alternatives
-    attributes:
-      label: Alternatives you've considered
-  - type: textarea
-    id: context
-    attributes:
-      label: Additional context
-      description: Example sites, example outputs, links to similar tools, screenshots.

package/.github/workflows/manavarya-bot.yml

@@ -1,17 +0,0 @@
-# Managed by bot-manavarya/reviewer — edits will be overwritten.
-name: manavarya-bot review
-
-on:
-  pull_request:
-    types: [opened, synchronize, reopened, ready_for_review]
-
-jobs:
-  review:
-    if: ${{ github.event.pull_request.draft == false }}
-    uses: bot-manavarya/reviewer/.github/workflows/review.yml@main
-    with:
-      provider: 'gemini'
-      model: 'gemini-2.5-flash'
-    secrets:
-      bot-token: ${{ secrets.MANAVARYA_BOT_TOKEN }}
-      gemini-api-key: ${{ secrets.GEMINI_API_KEY }}