feat: visual spec v2 — all 9 improvements + shadow interpolation restored

Visual Spec Plugin (complete rewrite):
1. White background behind entire spec page
2. Colors grouped by category (brand, text, bg, border, palette)
with sub-headings — semantic groups first, then palette ramps
3. Typography split into Desktop and Mobile side-by-side columns
4. Loads actual extracted font (e.g. Open Sans) with safe cascade
fallback to Inter if unavailable
5. Pangram sample text per tier ("The quick brown fox...")
6. Full typography specs: font family, size, weight, line height
7. Spacing: desktop/mobile columns with blue square blocks
(square size = spacing value)
8. Spacing uses Variables API (not Styles) — shows in Variables panel.
Starter plan may limit variable creation.
9. Shadows: restored interpolation to always produce 5 elevation
levels (xs/sm/md/lg/xl) from whatever was extracted

Also: copied plugin to v2 directory so Figma loads it regardless
of which registration is active.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app.py

@@ -1502,14 +1502,12 @@ async def run_stage2_analysis_v2(
             shadow_count = 0
             if state.desktop_normalized:
                 shadow_count = len(getattr(state.desktop_normalized, 'shadows', {}))
-            tobe_shadow_count = min(shadow_count, 5)  # Export only what was extracted (capped at 5)
-            _SHADOW_LABELS = {1: "md", 2: "sm → lg", 3: "sm → md → lg", 4: "xs → sm → lg → xl", 5: "xs → sm → md → lg → xl"}
-            tobe_label = _SHADOW_LABELS.get(tobe_shadow_count, f"{tobe_shadow_count} levels")
+            tobe_shadow_count = max(shadow_count, 5) if shadow_count > 0 else 0  # Always 5 levels (interpolated)
             cards.append(_render_as_is_to_be(
-                "Shadows", f"{shadow_count} levels",
+                "Shadows", f"{shadow_count} extracted",
                 "Elevation tokens" if shadow_count > 0 else "No shadows found",
                 f"{tobe_shadow_count} levels",
-                tobe_label,
+                "xs → sm → md → lg → xl" + (f" (interpolated from {shadow_count})" if shadow_count < 5 else ""),
                 icon="🌫️"
             ))
             asis_tobe_html = "".join(cards)
@@ -3605,16 +3603,11 @@ def export_tokens_json(convention: str = "semantic"):
             token_count += 1
 
     # =========================================================================
-    # SHADOWS — W3C DTCG format — export ONLY what was actually extracted
+    # SHADOWS — W3C DTCG format — always produce 5 elevation levels (xs→xl)
+    # Interpolates between extracted shadows to fill missing levels.
     # =========================================================================
-    # Name mapping: assign best-fit names based on how many shadows were found
-    _SHADOW_NAMES_BY_COUNT = {
-        1: ["shadow.md"],
-        2: ["shadow.sm", "shadow.lg"],
-        3: ["shadow.sm", "shadow.md", "shadow.lg"],
-        4: ["shadow.xs", "shadow.sm", "shadow.lg", "shadow.xl"],
-        5: ["shadow.xs", "shadow.sm", "shadow.md", "shadow.lg", "shadow.xl"],
-    }
+    TARGET_SHADOW_COUNT = 5
+    shadow_names = ["shadow.xs", "shadow.sm", "shadow.md", "shadow.lg", "shadow.xl"]
 
     if state.desktop_normalized and state.desktop_normalized.shadows:
         sorted_shadows = sorted(
@@ -3634,16 +3627,54 @@ def export_tokens_json(convention: str = "semantic"):
                 "color": p.get("color", "rgba(0,0,0,0.25)"),
             })
 
+        # Interpolation helpers
+        def _lerp(a, b, t):
+            return a + (b - a) * t
+
+        def _lerp_shadow(s1, s2, t):
+            """Interpolate between two shadow dicts at factor t (0.0=s1, 1.0=s2)."""
+            import re
+            interp = {
+                "x": round(_lerp(s1["x"], s2["x"], t), 1),
+                "y": round(_lerp(s1["y"], s2["y"], t), 1),
+                "blur": round(_lerp(s1["blur"], s2["blur"], t), 1),
+                "spread": round(_lerp(s1["spread"], s2["spread"], t), 1),
+            }
+            alpha1, alpha2 = 0.25, 0.25
+            m1 = re.search(r'rgba?\([^)]*,\s*([\d.]+)\)', s1["color"])
+            m2 = re.search(r'rgba?\([^)]*,\s*([\d.]+)\)', s2["color"])
+            if m1: alpha1 = float(m1.group(1))
+            if m2: alpha2 = float(m2.group(1))
+            interp_alpha = round(_lerp(alpha1, alpha2, t), 3)
+            interp["color"] = f"rgba(0, 0, 0, {interp_alpha})"
+            return interp
+
+        final_shadows = []
         n = len(parsed_shadows)
-        # Cap at 5 maximum, take first 5 sorted by blur
-        final_shadows = parsed_shadows[:5]
-        names = _SHADOW_NAMES_BY_COUNT.get(len(final_shadows))
-        if names is None:
-            # Fallback for n > 5: xs, sm, md, lg, xl
-            names = [f"shadow.{i+1}" for i in range(len(final_shadows))]
+        if n >= TARGET_SHADOW_COUNT:
+            final_shadows = parsed_shadows[:TARGET_SHADOW_COUNT]
+        elif n == 1:
+            base = parsed_shadows[0]
+            for i in range(TARGET_SHADOW_COUNT):
+                factor = (i + 1) / 3.0
+                final_shadows.append({
+                    "x": round(base["x"] * factor, 1),
+                    "y": round(max(1, base["y"] * factor), 1),
+                    "blur": round(max(1, base["blur"] * factor), 1),
+                    "spread": round(base["spread"] * factor, 1),
+                    "color": f"rgba(0, 0, 0, {round(0.04 + i * 0.04, 3)})",
+                })
+        elif n >= 2:
+            for i in range(TARGET_SHADOW_COUNT):
+                t = i / (TARGET_SHADOW_COUNT - 1)
+                src_pos = t * (n - 1)
+                lo = int(src_pos)
+                hi = min(lo + 1, n - 1)
+                frac = src_pos - lo
+                final_shadows.append(_lerp_shadow(parsed_shadows[lo], parsed_shadows[hi], frac))
 
         for i, shadow in enumerate(final_shadows):
-            token_name = names[i] if i < len(names) else f"shadow.{i + 1}"
+            token_name = shadow_names[i] if i < len(shadow_names) else f"shadow.{i + 1}"
             dtcg_value = {
                 "color": shadow["color"],
                 "offsetX": f"{shadow['x']}px",

output_json/figma-plugin-extracted/figma-design-token-creator 5/src/code.js

@@ -782,8 +782,8 @@ figma.ui.onmessage = async function(msg) {
   }
 
   // ==========================================
-  // VISUAL SPEC GENERATOR
-  // Creates a visual reference page showing all tokens
+  // VISUAL SPEC GENERATOR v2
+  // Creates a professional visual reference page showing all tokens
   // ==========================================
   if (msg.type === 'create-visual-spec') {
     try {
@@ -802,234 +802,438 @@ figma.ui.onmessage = async function(msg) {
       var tokens = normalizeTokens(rawTokens);
       console.log('Normalized tokens - colors:', tokens.colors.length, 'typography:', tokens.typography.length);
 
-      // Use current page instead of creating new page (Figma Starter plan has 3-page limit)
+      // Use current page (Figma Starter plan has 3-page limit)
       var specPage = figma.currentPage;
       specPage.name = '🎨 Design System Spec';
 
-      // Clear existing children on the page so spec starts fresh
+      // Clear existing children
       while (specPage.children.length > 0) {
         specPage.children[0].remove();
       }
 
-      var yOffset = 0;
-      var xOffset = 0;
-      var sectionGap = 80;
-      var itemGap = 16;
+      // ── Layout constants ──
+      var PAGE_PADDING = 60;
+      var SECTION_GAP = 100;
+      var ITEM_GAP = 16;
+      var xOffset = PAGE_PADDING;
+      var yOffset = PAGE_PADDING;
+      var PAGE_WIDTH = 1200;
 
-      // Load Inter font for labels (with fallbacks for environments missing styles)
+      // ── Load fonts ──
+      // 1. Inter Regular/Bold for labels (always available)
       var headingStyle = 'Regular';
-      await figma.loadFontAsync({ family: 'Inter', style: 'Regular' });
+      var labelFont = { family: 'Inter', style: 'Regular' };
+      await figma.loadFontAsync(labelFont);
       try {
         await figma.loadFontAsync({ family: 'Inter', style: 'Bold' });
         headingStyle = 'Bold';
       } catch (e) {
-        console.warn('Inter Bold not available, using Regular for headings');
+        console.warn('Inter Bold not available');
       }
-
-      // === COLORS SECTION ===
-      if (tokens.colors.length > 0) {
-        // Section title
-        var colorTitle = figma.createText();
-        colorTitle.characters = 'COLORS';
-        colorTitle.fontName = { family: 'Inter', style: headingStyle };
-        colorTitle.fontSize = 24;
-        colorTitle.x = xOffset;
-        colorTitle.y = yOffset;
-        specPage.appendChild(colorTitle);
+      var headingFont = { family: 'Inter', style: headingStyle };
+
+      // 2. Try to load the extracted font for sample text
+      var sampleFontFamily = 'Inter';
+      var sampleFontStyle = 'Regular';
+      var sampleFontBoldStyle = headingStyle;
+      // Find the primary font from typography tokens
+      for (var fi = 0; fi < tokens.typography.length; fi++) {
+        var ff = (tokens.typography[fi].value.fontFamily || '').split(',')[0].trim();
+        if (ff && ff !== 'Inter' && ff !== 'sans-serif') {
+          sampleFontFamily = ff;
+          break;
+        }
+      }
+      if (sampleFontFamily !== 'Inter') {
+        try {
+          await figma.loadFontAsync({ family: sampleFontFamily, style: 'Regular' });
+          sampleFontStyle = 'Regular';
+          // Try Bold
+          try {
+            await figma.loadFontAsync({ family: sampleFontFamily, style: 'Bold' });
+            sampleFontBoldStyle = 'Bold';
+          } catch (e2) {
+            sampleFontBoldStyle = 'Regular';
+          }
+        } catch (e) {
+          console.warn(sampleFontFamily + ' not available, falling back to Inter');
+          sampleFontFamily = 'Inter';
+          sampleFontStyle = 'Regular';
+          sampleFontBoldStyle = headingStyle;
+        }
+      }
+      var sampleFont = { family: sampleFontFamily, style: sampleFontStyle };
+      var sampleFontBold = { family: sampleFontFamily, style: sampleFontBoldStyle };
+
+      // ── Helper: add section title ──
+      function addSectionTitle(text) {
+        var title = figma.createText();
+        title.fontName = headingFont;
+        title.fontSize = 28;
+        title.characters = text;
+        title.fills = [{ type: 'SOLID', color: { r: 0.1, g: 0.1, b: 0.1 } }];
+        title.x = xOffset;
+        title.y = yOffset;
+        specPage.appendChild(title);
         yOffset += 50;
+        // Divider line
+        var line = figma.createRectangle();
+        line.resize(PAGE_WIDTH - PAGE_PADDING * 2, 1);
+        line.x = xOffset;
+        line.y = yOffset;
+        line.fills = [{ type: 'SOLID', color: { r: 0.85, g: 0.85, b: 0.85 } }];
+        specPage.appendChild(line);
+        yOffset += 24;
+      }
 
-        var colorX = xOffset;
-        var colorY = yOffset;
-        var swatchSize = 60;
-        var swatchGap = 16;
-        var colsPerRow = 6;
+      // ── Helper: add sub-heading ──
+      function addSubHeading(text) {
+        var sub = figma.createText();
+        sub.fontName = headingFont;
+        sub.fontSize = 16;
+        sub.characters = text;
+        sub.fills = [{ type: 'SOLID', color: { r: 0.35, g: 0.35, b: 0.35 } }];
+        sub.x = xOffset;
+        sub.y = yOffset;
+        specPage.appendChild(sub);
+        yOffset += 32;
+      }
+
+      // ══════════════════════════════════════════
+      // 1. WHITE BACKGROUND
+      // ══════════════════════════════════════════
+      // We'll place it at the end once we know the total height.
+      // For now, track startY.
+      var bgStartY = 0;
+
+      // ── Page title ──
+      var pageTitle = figma.createText();
+      pageTitle.fontName = headingFont;
+      pageTitle.fontSize = 36;
+      pageTitle.characters = 'Design System Specification';
+      pageTitle.fills = [{ type: 'SOLID', color: { r: 0.1, g: 0.1, b: 0.1 } }];
+      pageTitle.x = xOffset;
+      pageTitle.y = yOffset;
+      specPage.appendChild(pageTitle);
+      yOffset += 60;
+
+      // ══════════════════════════════════════════
+      // 2. COLORS — grouped by category
+      // ══════════════════════════════════════════
+      if (tokens.colors.length > 0) {
+        addSectionTitle('COLORS');
 
+        // Group colors by top-level category from name path
+        // e.g. "brand/primary/DEFAULT" → category "brand"
+        //      "blue/50"              → category "blue" (palette)
+        var colorGroups = {};
+        var groupOrder = [];
         for (var ci = 0; ci < tokens.colors.length; ci++) {
-          var colorToken = tokens.colors[ci];
-          var col = ci % colsPerRow;
-          var row = Math.floor(ci / colsPerRow);
-
-          // Color swatch
-          var swatch = figma.createRectangle();
-          swatch.resize(swatchSize, swatchSize);
-          swatch.x = colorX + col * (swatchSize + swatchGap);
-          swatch.y = colorY + row * (swatchSize + swatchGap + 30);
-          swatch.cornerRadius = 8;
-
-          var rgb = hexToRgb(colorToken.value);
-          swatch.fills = [{ type: 'SOLID', color: rgb }];
-          swatch.strokes = [{ type: 'SOLID', color: { r: 0.9, g: 0.9, b: 0.9 } }];
-          swatch.strokeWeight = 1;
-          specPage.appendChild(swatch);
-
-          // Color name label
-          var colorLabel = figma.createText();
-          colorLabel.characters = colorToken.name.split('/').pop() || colorToken.name;
-          colorLabel.fontName = { family: 'Inter', style: 'Regular' };
-          colorLabel.fontSize = 10;
-          colorLabel.x = swatch.x;
-          colorLabel.y = swatch.y + swatchSize + 4;
-          specPage.appendChild(colorLabel);
-
-          // Color value label
-          var valueLabel = figma.createText();
-          valueLabel.characters = colorToken.value.toUpperCase();
-          valueLabel.fontName = { family: 'Inter', style: 'Regular' };
-          valueLabel.fontSize = 9;
-          valueLabel.fills = [{ type: 'SOLID', color: { r: 0.5, g: 0.5, b: 0.5 } }];
-          valueLabel.x = swatch.x;
-          valueLabel.y = swatch.y + swatchSize + 16;
-          specPage.appendChild(valueLabel);
+          var cToken = tokens.colors[ci];
+          var parts = cToken.name.split('/');
+          var category = parts[0] || 'other';
+          if (!colorGroups[category]) {
+            colorGroups[category] = [];
+            groupOrder.push(category);
+          }
+          colorGroups[category].push(cToken);
+        }
+
+        // Semantic categories first, then palette
+        var semanticOrder = ['brand', 'text', 'bg', 'background', 'border', 'feedback'];
+        var sortedGroups = [];
+        for (var so = 0; so < semanticOrder.length; so++) {
+          if (colorGroups[semanticOrder[so]]) {
+            sortedGroups.push(semanticOrder[so]);
+          }
+        }
+        for (var go = 0; go < groupOrder.length; go++) {
+          if (sortedGroups.indexOf(groupOrder[go]) === -1) {
+            sortedGroups.push(groupOrder[go]);
+          }
         }
 
-        var colorRows = Math.ceil(tokens.colors.length / colsPerRow);
-        yOffset = colorY + colorRows * (swatchSize + swatchGap + 30) + sectionGap;
+        var swatchSize = 56;
+        var swatchGap = 12;
+
+        for (var gi = 0; gi < sortedGroups.length; gi++) {
+          var groupName = sortedGroups[gi];
+          var groupColors = colorGroups[groupName];
+
+          // Category label
+          addSubHeading(groupName.charAt(0).toUpperCase() + groupName.slice(1));
+
+          var colorX = xOffset;
+          for (var ci2 = 0; ci2 < groupColors.length; ci2++) {
+            var ct = groupColors[ci2];
+
+            // Swatch
+            var swatch = figma.createRectangle();
+            swatch.resize(swatchSize, swatchSize);
+            swatch.x = colorX;
+            swatch.y = yOffset;
+            swatch.cornerRadius = 8;
+            var rgb = hexToRgb(ct.value);
+            swatch.fills = [{ type: 'SOLID', color: rgb }];
+            swatch.strokes = [{ type: 'SOLID', color: { r: 0.88, g: 0.88, b: 0.88 } }];
+            swatch.strokeWeight = 1;
+            specPage.appendChild(swatch);
+
+            // Token name (last segment, skip DEFAULT)
+            var nameParts = ct.name.split('/');
+            var displayName = nameParts[nameParts.length - 1];
+            if (displayName === 'DEFAULT') {
+              displayName = nameParts.length > 1 ? nameParts[nameParts.length - 2] : displayName;
+            }
+            var cLabel = figma.createText();
+            cLabel.fontName = labelFont;
+            cLabel.fontSize = 9;
+            cLabel.characters = displayName;
+            cLabel.x = colorX;
+            cLabel.y = yOffset + swatchSize + 4;
+            specPage.appendChild(cLabel);
+
+            // Hex value
+            var hexLabel = figma.createText();
+            hexLabel.fontName = labelFont;
+            hexLabel.fontSize = 8;
+            hexLabel.characters = ct.value.toUpperCase();
+            hexLabel.fills = [{ type: 'SOLID', color: { r: 0.55, g: 0.55, b: 0.55 } }];
+            hexLabel.x = colorX;
+            hexLabel.y = yOffset + swatchSize + 16;
+            specPage.appendChild(hexLabel);
+
+            colorX += swatchSize + swatchGap;
+          }
+
+          yOffset += swatchSize + 36 + ITEM_GAP;
+        }
+
+        yOffset += SECTION_GAP - ITEM_GAP;
       }
 
-      // === TYPOGRAPHY SECTION ===
-      // IMPORTANT: Only use already-loaded Inter Regular/Bold for ALL text in the spec.
-      // Never attempt to load custom fonts — they may not exist in the Figma environment
-      // and would crash the entire spec generation. Font details are shown as labels.
+      // ══════════════════════════════════════════
+      // 3. TYPOGRAPHY — Desktop & Mobile side by side
+      // ══════════════════════════════════════════
       if (tokens.typography.length > 0) {
-        var typoTitle = figma.createText();
-        typoTitle.characters = 'TYPOGRAPHY';
-        typoTitle.fontName = { family: 'Inter', style: headingStyle };
-        typoTitle.fontSize = 24;
-        typoTitle.x = xOffset;
-        typoTitle.y = yOffset;
-        specPage.appendChild(typoTitle);
-        yOffset += 50;
+        addSectionTitle('TYPOGRAPHY');
 
+        // Separate desktop and mobile tokens
+        var desktopTypo = [];
+        var mobileTypo = [];
         for (var ti = 0; ti < tokens.typography.length; ti++) {
-          var typoToken = tokens.typography[ti];
-          var value = typoToken.value;
+          var tToken = tokens.typography[ti];
+          var tName = tToken.name.toLowerCase();
+          if (tName.indexOf('mobile') > -1) {
+            mobileTypo.push(tToken);
+          } else {
+            desktopTypo.push(tToken);
+          }
+        }
 
-          var fontFamily = value.fontFamily || 'Inter';
-          if (fontFamily.indexOf(',') > -1) {
-            fontFamily = fontFamily.split(',')[0].trim();
+        // Pangram sample texts per tier
+        function getSampleText(tokenName) {
+          var n = tokenName.toLowerCase();
+          if (n.indexOf('display') > -1) return 'The quick brown fox jumps over the lazy dog';
+          if (n.indexOf('heading') > -1) return 'The quick brown fox jumps over';
+          if (n.indexOf('body') > -1) return 'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.';
+          if (n.indexOf('caption') > -1) return 'The quick brown fox jumps over the lazy dog';
+          if (n.indexOf('overline') > -1) return 'THE QUICK BROWN FOX';
+          return 'The quick brown fox jumps over the lazy dog';
+        }
+
+        // Get display tier for font weight
+        function getTierFont(tokenName) {
+          var n = tokenName.toLowerCase();
+          if (n.indexOf('display') > -1 || n.indexOf('heading') > -1) return sampleFontBold;
+          return sampleFont;
+        }
+
+        // Render a typography column
+        function renderTypoColumn(typoList, columnX, columnTitle) {
+          var localY = yOffset;
+          // Column title
+          var colTitle = figma.createText();
+          colTitle.fontName = headingFont;
+          colTitle.fontSize = 14;
+          colTitle.characters = columnTitle;
+          colTitle.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.5, b: 1 } }];
+          colTitle.x = columnX;
+          colTitle.y = localY;
+          specPage.appendChild(colTitle);
+          localY += 30;
+
+          for (var tti = 0; tti < typoList.length; tti++) {
+            var tt = typoList[tti];
+            var val = tt.value;
+            var fFamily = (val.fontFamily || 'Inter').split(',')[0].trim();
+            var fSize = parseNumericValue(val.fontSize) || 16;
+            var fWeight = val.fontWeight || '400';
+            var fLineHeight = val.lineHeight || '1.5';
+            var displaySize = Math.min(fSize, 48);
+
+            // Token name label (e.g. "heading.lg")
+            var tierParts = tt.name.split('/');
+            // Remove 'desktop'/'mobile' from display
+            var tierName = tierParts.filter(function(p) { return p !== 'desktop' && p !== 'mobile'; }).join('/');
+
+            var nameLabel = figma.createText();
+            nameLabel.fontName = labelFont;
+            nameLabel.fontSize = 10;
+            nameLabel.characters = tierName;
+            nameLabel.fills = [{ type: 'SOLID', color: { r: 0.5, g: 0.5, b: 0.5 } }];
+            nameLabel.x = columnX;
+            nameLabel.y = localY;
+            specPage.appendChild(nameLabel);
+            localY += 16;
+
+            // Sample text in actual font
+            var sample = figma.createText();
+            sample.fontName = getTierFont(tt.name);
+            sample.fontSize = displaySize;
+            sample.characters = getSampleText(tt.name);
+            sample.x = columnX;
+            sample.y = localY;
+            // Constrain width so long text wraps
+            sample.resize(480, sample.height);
+            sample.textAutoResize = 'HEIGHT';
+            specPage.appendChild(sample);
+            localY += sample.height + 6;
+
+            // Spec details — font size, weight, line height
+            var specLine = figma.createText();
+            specLine.fontName = labelFont;
+            specLine.fontSize = 10;
+            specLine.characters = fFamily + '  ·  ' + fSize + 'px  ·  wt ' + fWeight + '  ·  LH ' + fLineHeight;
+            specLine.fills = [{ type: 'SOLID', color: { r: 0.6, g: 0.6, b: 0.6 } }];
+            specLine.x = columnX;
+            specLine.y = localY;
+            specPage.appendChild(specLine);
+            localY += 28;
           }
-          var fontSize = parseNumericValue(value.fontSize) || 16;
-          var fontWeight = value.fontWeight || '400';
-          var displaySize = Math.min(fontSize, 48); // Cap display size
-
-          // Sample text — always use Inter (safe), size shows relative scale
-          var sampleText = figma.createText();
-          sampleText.fontName = { family: 'Inter', style: headingStyle };
-          sampleText.fontSize = displaySize;
-          sampleText.characters = typoToken.name.split('/').pop() || 'Sample Text';
-          sampleText.x = xOffset;
-          sampleText.y = yOffset;
-          specPage.appendChild(sampleText);
-
-          // Specs label — show the ACTUAL font specs as readable text
-          var specsLabel = figma.createText();
-          specsLabel.fontName = { family: 'Inter', style: 'Regular' };
-          specsLabel.fontSize = 11;
-          specsLabel.characters = fontFamily + '  ·  ' + fontSize + 'px  ·  wt ' + fontWeight;
-          specsLabel.fills = [{ type: 'SOLID', color: { r: 0.5, g: 0.5, b: 0.5 } }];
-          specsLabel.x = xOffset + 300;
-          specsLabel.y = yOffset + 4;
-          specPage.appendChild(specsLabel);
-
-          yOffset += Math.max(displaySize, 24) + itemGap;
+          return localY;
         }
 
-        yOffset += sectionGap;
+        var colWidth = 520;
+        var desktopEndY = renderTypoColumn(desktopTypo, xOffset, '🖥  Desktop');
+        var mobileEndY = renderTypoColumn(mobileTypo, xOffset + colWidth, '📱  Mobile');
+
+        yOffset = Math.max(desktopEndY, mobileEndY) + SECTION_GAP;
       }
 
-      // === SPACING SECTION ===
+      // ══════════════════════════════════════════
+      // 4. SPACING — Desktop & Mobile with square blocks
+      // ══════════════════════════════════════════
       if (tokens.spacing.length > 0) {
-        var spacingTitle = figma.createText();
-        spacingTitle.characters = 'SPACING';
-        spacingTitle.fontName = { family: 'Inter', style: headingStyle };
-        spacingTitle.fontSize = 24;
-        spacingTitle.x = xOffset;
-        spacingTitle.y = yOffset;
-        specPage.appendChild(spacingTitle);
-        yOffset += 50;
+        addSectionTitle('SPACING');
+
+        // Separate desktop and mobile
+        var desktopSpacing = [];
+        var mobileSpacing = [];
+        for (var spi = 0; spi < tokens.spacing.length; spi++) {
+          var spToken = tokens.spacing[spi];
+          var spName = spToken.name.toLowerCase();
+          if (spName.indexOf('mobile') > -1) {
+            mobileSpacing.push(spToken);
+          } else {
+            desktopSpacing.push(spToken);
+          }
+        }
 
-        var spacingX = xOffset;
-        for (var si = 0; si < Math.min(tokens.spacing.length, 12); si++) {
-          var spacingToken = tokens.spacing[si];
-          var spacingValue = parseNumericValue(spacingToken.value);
-
-          // Spacing bar
-          var bar = figma.createRectangle();
-          bar.resize(Math.max(spacingValue, 4), 24);
-          bar.x = spacingX;
-          bar.y = yOffset;
-          bar.cornerRadius = 4;
-          bar.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.6, b: 1 } }];
-          specPage.appendChild(bar);
-
-          // Label
-          var spLabel = figma.createText();
-          spLabel.characters = spacingToken.name.split('/').pop() + ' = ' + spacingToken.value;
-          spLabel.fontName = { family: 'Inter', style: 'Regular' };
-          spLabel.fontSize = 11;
-          spLabel.x = spacingX;
-          spLabel.y = yOffset + 30;
-          specPage.appendChild(spLabel);
-
-          spacingX += Math.max(spacingValue, 40) + 24;
+        function renderSpacingColumn(spacingList, columnX, columnTitle) {
+          var localY = yOffset;
+          var colTitle = figma.createText();
+          colTitle.fontName = headingFont;
+          colTitle.fontSize = 14;
+          colTitle.characters = columnTitle;
+          colTitle.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.5, b: 1 } }];
+          colTitle.x = columnX;
+          colTitle.y = localY;
+          specPage.appendChild(colTitle);
+          localY += 30;
+
+          var spX = columnX;
+          var maxH = 0;
+          for (var ssi = 0; ssi < Math.min(spacingList.length, 10); ssi++) {
+            var sp = spacingList[ssi];
+            var spVal = parseNumericValue(sp.value);
+            var blockSize = Math.max(spVal, 8); // Minimum visible size
+            var displayBlock = Math.min(blockSize, 80); // Cap for display
+
+            // Blue square
+            var sq = figma.createRectangle();
+            sq.resize(displayBlock, displayBlock);
+            sq.x = spX;
+            sq.y = localY;
+            sq.cornerRadius = 4;
+            sq.fills = [{ type: 'SOLID', color: { r: 0.2, g: 0.55, b: 1 } }];
+            specPage.appendChild(sq);
+
+            // Label below
+            var spParts = sp.name.split('/');
+            var spDisplayName = spParts.filter(function(p) { return p !== 'desktop' && p !== 'mobile'; }).join('/');
+            var sqLabel = figma.createText();
+            sqLabel.fontName = labelFont;
+            sqLabel.fontSize = 9;
+            sqLabel.characters = spDisplayName + '\n' + sp.value;
+            sqLabel.textAlignHorizontal = 'CENTER';
+            sqLabel.x = spX;
+            sqLabel.y = localY + displayBlock + 6;
+            specPage.appendChild(sqLabel);
+
+            if (displayBlock > maxH) maxH = displayBlock;
+            spX += displayBlock + 20;
+          }
+          return localY + maxH + 40;
         }
 
-        yOffset += 80 + sectionGap;
+        var dsEndY = renderSpacingColumn(desktopSpacing, xOffset, '🖥  Desktop');
+        var msEndY = renderSpacingColumn(mobileSpacing, xOffset + colWidth, '📱  Mobile');
+
+        yOffset = Math.max(dsEndY, msEndY) + SECTION_GAP;
       }
 
-      // === BORDER RADIUS SECTION ===
+      // ══════════════════════════════════════════
+      // 5. BORDER RADIUS
+      // ══════════════════════════════════════════
       if (tokens.borderRadius.length > 0) {
-        var radiusTitle = figma.createText();
-        radiusTitle.characters = 'BORDER RADIUS';
-        radiusTitle.fontName = { family: 'Inter', style: headingStyle };
-        radiusTitle.fontSize = 24;
-        radiusTitle.x = xOffset;
-        radiusTitle.y = yOffset;
-        specPage.appendChild(radiusTitle);
-        yOffset += 50;
+        addSectionTitle('BORDER RADIUS');
 
         var radiusX = xOffset;
         for (var ri = 0; ri < tokens.borderRadius.length; ri++) {
           var radiusToken = tokens.borderRadius[ri];
           var radiusValue = parseNumericValue(radiusToken.value);
 
-          // Rounded rectangle
           var rect = figma.createRectangle();
-          rect.resize(50, 50);
+          rect.resize(56, 56);
           rect.x = radiusX;
           rect.y = yOffset;
-          rect.cornerRadius = Math.min(radiusValue, 25);
-          rect.fills = [{ type: 'SOLID', color: { r: 0.95, g: 0.95, b: 0.95 } }];
-          rect.strokes = [{ type: 'SOLID', color: { r: 0.8, g: 0.8, b: 0.8 } }];
+          rect.cornerRadius = Math.min(radiusValue, 28);
+          rect.fills = [{ type: 'SOLID', color: { r: 0.95, g: 0.95, b: 0.97 } }];
+          rect.strokes = [{ type: 'SOLID', color: { r: 0.8, g: 0.8, b: 0.85 } }];
           rect.strokeWeight = 2;
           specPage.appendChild(rect);
 
-          // Label
           var rLabel = figma.createText();
+          rLabel.fontName = labelFont;
+          rLabel.fontSize = 9;
           rLabel.characters = radiusToken.name.split('/').pop() + '\n' + radiusToken.value;
-          rLabel.fontName = { family: 'Inter', style: 'Regular' };
-          rLabel.fontSize = 10;
           rLabel.textAlignHorizontal = 'CENTER';
           rLabel.x = radiusX;
-          rLabel.y = yOffset + 56;
+          rLabel.y = yOffset + 62;
           specPage.appendChild(rLabel);
 
-          radiusX += 70;
+          radiusX += 80;
         }
 
-        yOffset += 100 + sectionGap;
+        yOffset += 110 + SECTION_GAP;
       }
 
-      // === SHADOWS SECTION ===
+      // ══════════════════════════════════════════
+      // 6. SHADOWS
+      // ══════════════════════════════════════════
       if (tokens.shadows.length > 0) {
-        var shadowTitle = figma.createText();
-        shadowTitle.characters = 'SHADOWS';
-        shadowTitle.fontName = { family: 'Inter', style: headingStyle };
-        shadowTitle.fontSize = 24;
-        shadowTitle.x = xOffset;
-        shadowTitle.y = yOffset;
-        specPage.appendChild(shadowTitle);
-        yOffset += 50;
+        addSectionTitle('SHADOWS');
 
         var shadowX = xOffset;
         for (var shi = 0; shi < tokens.shadows.length; shi++) {
@@ -1044,10 +1248,10 @@ figma.ui.onmessage = async function(msg) {
 
           // Shadow card
           var card = figma.createRectangle();
-          card.resize(80, 80);
+          card.resize(90, 90);
           card.x = shadowX;
           card.y = yOffset;
-          card.cornerRadius = 8;
+          card.cornerRadius = 12;
           card.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
           card.effects = [{
             type: 'DROP_SHADOW',
@@ -1060,17 +1264,38 @@ figma.ui.onmessage = async function(msg) {
           }];
           specPage.appendChild(card);
 
-          // Label
+          // Name + specs
           var shLabel = figma.createText();
-          shLabel.characters = shadowToken.name.split('/').pop();
-          shLabel.fontName = { family: 'Inter', style: 'Regular' };
-          shLabel.fontSize = 11;
+          shLabel.fontName = labelFont;
+          shLabel.fontSize = 9;
+          shLabel.characters = shadowToken.name.split('/').pop() + '\nblur: ' + blurVal + 'px  y: ' + offsetYVal + 'px';
+          shLabel.fills = [{ type: 'SOLID', color: { r: 0.5, g: 0.5, b: 0.5 } }];
           shLabel.x = shadowX;
-          shLabel.y = yOffset + 90;
+          shLabel.y = yOffset + 100;
           specPage.appendChild(shLabel);
 
-          shadowX += 110;
+          shadowX += 130;
         }
+
+        yOffset += 140 + SECTION_GAP;
+      }
+
+      // ══════════════════════════════════════════
+      // WHITE BACKGROUND — placed behind everything
+      // ══════════════════════════════════════════
+      var bgRect = figma.createRectangle();
+      bgRect.resize(PAGE_WIDTH, yOffset + PAGE_PADDING);
+      bgRect.x = 0;
+      bgRect.y = 0;
+      bgRect.fills = [{ type: 'SOLID', color: { r: 1, g: 1, b: 1 } }];
+      bgRect.locked = true;
+      bgRect.name = 'Background';
+      specPage.appendChild(bgRect);
+
+      // Send background to back (behind all other elements)
+      var children = specPage.children;
+      if (children.length > 1) {
+        specPage.insertChild(0, bgRect);
       }
 
       figma.ui.postMessage({