Spaces:

riazmo
/

Design-System-Automation

Runtime error

riazmo Claude Opus 4.6 commited on 27 days ago

Commit

d0d3d7e

1 Parent(s): abab3e7

v3.1: Rule-based color classifier — kill LLM naming

- NEW core/color_classifier.py: 100% deterministic color classification
- Aggressive dedup (RGB dist < 30 within same category)
- Capped categories: brand(3), text(3), bg(3), border(3), feedback(4)
- Supports semantic/tailwind/material naming conventions
- Every decision logged with evidence
- app.py: Convention picker dropdown + preview button in Stage 3
- Export functions now use classifier instead of LLM naming_map
- Removed _get_semantic_color_overrides() / _consolidate_colors() dependency
- AURORA demoted to advisory-only (no more naming_map output)
- CLAUDE.md updated with v3.1 architecture

Fixes: "nonary/decenary" Latin ordinal naming, raw hex keys,
mixed conventions, 3-way naming merge chaos

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

Files changed (5) hide show

CLAUDE.md +38 -4
agents/llm_agents.py +10 -12
app.py +83 -27
core/color_classifier.py +678 -0
output_json/file (18).json +584 -0

CLAUDE.md CHANGED Viewed

@@ -1,15 +1,49 @@
-# Design System Extractor v2 — Project Context
 ## Overview
 A multi-agent system that extracts, analyzes, and recommends improvements for design systems from websites. The system operates in two stages:
-1. **Stage 1 (Deterministic)**: Extract CSS values → Normalize → Rule Engine analysis (free, no LLM)
-2. **Stage 2 (LLM-powered)**: Brand identification → Benchmark comparison → Best practices → Final synthesis
 ---
-## CURRENT STATUS: BROKEN — NEEDS RETHINK
 ### What's Wrong (observed from real site tests)

+# Design System Extractor v3.1 — Project Context
 ## Overview
 A multi-agent system that extracts, analyzes, and recommends improvements for design systems from websites. The system operates in two stages:
+1. **Stage 1 (Deterministic)**: Extract CSS values → Normalize → Rule Engine analysis → **Rule-Based Color Classification** (free, no LLM)
+2. **Stage 2 (LLM-powered, advisory only)**: Brand insights → Benchmark comparison → Best practices → Final synthesis
 ---
+## v3.1 FIX: RULE-BASED COLOR NAMING (Feb 2026)
+### What Changed
+- **KILLED LLM color naming entirely.** New `core/color_classifier.py` handles all color naming with 100% deterministic rules.
+- **Aggressive deduplication**: Colors within RGB distance < 30 AND same category get merged (e.g., 13 text grays → 3)
+- **Capped categories**: brand (max 3), text (max 3), bg (max 3), border (max 3), feedback (max 4), palette (remaining)
+- **User-selectable naming convention**: semantic, tailwind, or material — chosen BEFORE export
+- **Preview before export**: User sees classification + decision log before committing
+- **Every decision logged**: `[DEDUP]`, `[CLASSIFY]`, `[CAP]`, `[NAME]` with evidence
+### How Classification Works (No LLM)
+```
+CSS Evidence → Category:
+  background-color on <button> + saturated + freq>5 → BRAND
+  color on <p>/<span> + low saturation → TEXT
+  background-color on <div>/<body> + neutral → BG
+  border-color + low saturation → BORDER
+  red hue + sat>0.6 + low freq → FEEDBACK (error)
+  everything else → PALETTE (named by hue.shade)
+```
+### What AURORA Does Now (Advisory Only)
+- Does NOT output naming_map
+- Provides brand insights, palette strategy, cohesion score
+- LLM reasoning is shown in logs but doesn't affect token names
+### Files Changed in v3.1
+- `core/color_classifier.py` — NEW: Rule-based classifier with dedup, caps, naming conventions
+- `app.py` — Export functions use classifier instead of LLM naming; convention picker in UI
+- `agents/llm_agents.py` — AURORA prompt updated to advisory-only
+- `CLAUDE.md` — This documentation
+---
+## PREVIOUS STATUS (v3.0 and earlier): BROKEN — RETHINK COMPLETED
 ### What's Wrong (observed from real site tests)

agents/llm_agents.py CHANGED Viewed

@@ -303,34 +303,33 @@ def _extract_hexes(tokens: dict) -> list:
 class BrandIdentifierAgent:
     """
     AURORA — Senior Brand & Visual Identity Analyst.
-    ReAct on ALL token types. Names ALL colors.
     Model: Qwen 72B · Temperature: 0.4
     """
     SYSTEM_PROMPT = """You are AURORA, a Senior Brand & Visual Identity Analyst.
 ## REASONING FRAMEWORK (ReAct)
 Structure your response with explicit reasoning steps.
 For each area: THINK → ACT → OBSERVE → VERIFY.
 ## ANALYZE ALL TOKEN TYPES:
-### 1. COLORS (Primary focus)
-- Identify brand primary/secondary/accent from usage + role_hints
-- Name EVERY color: color.{role}.{sub} or color.{hue}.{shade}
-- Shades MUST be numeric (50-900), NEVER words (light/dark/base)
-- Role colors: color.brand.primary, color.text.primary, color.bg.primary
-- Palette colors: color.blue.500, color.neutral.200
-### 2. TYPOGRAPHY — Identify heading vs body hierarchy, font pairing
 ### 3. SPACING — Identify grid system, note consistency
 ### 4. RADIUS — Identify radius strategy (sharp/rounded/pill)
 ### 5. SHADOWS — Identify elevation strategy, blur progression
 ## QUALITY RULES
-- naming_map MUST include EVERY hex color — no orphans
 - Brand Primary MUST cite usage evidence (e.g. "47x on buttons")
 - Cohesion 1-10: most sites score 5-7. Use the full range.
 ## OUTPUT (JSON)
@@ -339,7 +338,6 @@ For each area: THINK → ACT → OBSERVE → VERIFY.
     {"step": "THINK", "area": "colors", "content": "..."},
     {"step": "ACT", "area": "colors", "content": "..."},
     {"step": "OBSERVE", "area": "typography", "content": "..."},
-    {"step": "ACT", "area": "typography", "content": "..."},
     {"step": "ACT", "area": "spacing", "content": "..."},
     {"step": "ACT", "area": "radius", "content": "..."},
     {"step": "ACT", "area": "shadows", "content": "..."},
@@ -351,7 +349,7 @@ For each area: THINK → ACT → OBSERVE → VERIFY.
   "palette_strategy": "complementary|analogous|triadic|monochromatic|random",
   "cohesion_score": N,
   "cohesion_notes": "...",
-  "naming_map": {"#hex1": "color.brand.primary", "#hex2": "color.blue.500", ...},
   "typography_notes": "Heading: Inter 700, Body: Inter 400. Clean hierarchy.",
   "spacing_notes": "8px grid, 92% aligned.",
   "radius_notes": "Rounded style: 4px inputs, 8px cards.",

 class BrandIdentifierAgent:
     """
     AURORA — Senior Brand & Visual Identity Analyst.
+    v3.1: ADVISORY ONLY — does NOT name colors (rule-based classifier does that).
+    Provides brand insights, palette strategy, cohesion assessment.
     Model: Qwen 72B · Temperature: 0.4
     """
     SYSTEM_PROMPT = """You are AURORA, a Senior Brand & Visual Identity Analyst.
+## YOUR ROLE (v3.1: Advisory Only)
+Color NAMING is handled by a rule-based classifier. Do NOT output naming_map.
+Your job is to provide INSIGHTS about the brand identity and design cohesion.
 ## REASONING FRAMEWORK (ReAct)
 Structure your response with explicit reasoning steps.
 For each area: THINK → ACT → OBSERVE → VERIFY.
 ## ANALYZE ALL TOKEN TYPES:
+### 1. COLORS — Identify brand strategy (complementary? analogous? monochromatic?)
+### 2. TYPOGRAPHY — Identify heading vs body hierarchy, font pairing quality
 ### 3. SPACING — Identify grid system, note consistency
 ### 4. RADIUS — Identify radius strategy (sharp/rounded/pill)
 ### 5. SHADOWS — Identify elevation strategy, blur progression
 ## QUALITY RULES
 - Brand Primary MUST cite usage evidence (e.g. "47x on buttons")
 - Cohesion 1-10: most sites score 5-7. Use the full range.
+- Do NOT invent names. Focus on analysis and insights.
 ## OUTPUT (JSON)
     {"step": "THINK", "area": "colors", "content": "..."},
     {"step": "ACT", "area": "colors", "content": "..."},
     {"step": "OBSERVE", "area": "typography", "content": "..."},
     {"step": "ACT", "area": "spacing", "content": "..."},
     {"step": "ACT", "area": "radius", "content": "..."},
     {"step": "ACT", "area": "shadows", "content": "..."},
   "palette_strategy": "complementary|analogous|triadic|monochromatic|random",
   "cohesion_score": N,
   "cohesion_notes": "...",
+  "naming_map": {},
   "typography_notes": "Heading: Inter 700, Body: Inter 400. Clean hierarchy.",
   "spacing_notes": "8px grid, 92% aligned.",
   "radius_notes": "Rounded style: 4px inputs, 8px cards.",

app.py CHANGED Viewed

@@ -42,6 +42,7 @@ class AppState:
         self.mobile_normalized = None   # NormalizedTokens
         self.upgrade_recommendations = None  # UpgradeRecommendations
         self.selected_upgrades = {}  # User selections
         self.logs = []
     def log(self, message: str):
@@ -3101,7 +3102,31 @@ def _consolidate_colors(colors_dict: dict, overrides: dict, max_colors: int = 30
     return result
-def export_stage1_json():
     """Export Stage 1 tokens (as-is extraction) to W3C DTCG format."""
     if not state.desktop_normalized:
         gr.Warning("No tokens extracted yet. Complete Stage 1 extraction first.")
@@ -3119,16 +3144,15 @@ def export_stage1_json():
     # COLORS — Nested structure with $value, $type, $description
     # =========================================================================
     if state.desktop_normalized and state.desktop_normalized.colors:
-        overrides = _get_semantic_color_overrides()
-        consolidated = _consolidate_colors(
-            state.desktop_normalized.colors, overrides, max_colors=30,
         )
-        for flat_key, entry in consolidated.items():
-            # flat_key = "color.brand.primary"
-            source = entry.get("source", "extracted")
-            source_label = "LLM Semantic" if source == "semantic" else "Auto-Generated" if source == "detected" else "Extracted"
-            dtcg_token = _to_dtcg_token(entry["value"], "color", description=source_label)
-            _flat_key_to_nested(flat_key, dtcg_token, result)
             token_count += 1
     # =========================================================================
@@ -3238,7 +3262,7 @@ def export_stage1_json():
     return json_str
-def export_tokens_json():
     """Export final tokens with selected upgrades applied - FLAT structure for Figma Tokens Studio."""
     if not state.desktop_normalized:
         gr.Warning("No tokens extracted yet. Complete Stage 1 extraction first.")
@@ -3280,34 +3304,37 @@ def export_tokens_json():
     primary_font = fonts_info.get("primary", "sans-serif")
     # =========================================================================
-    # COLORS — Consolidated with semantic naming + optional ramps
     # =========================================================================
     if state.desktop_normalized and state.desktop_normalized.colors:
         from core.color_utils import generate_color_ramp
-        overrides = _get_semantic_color_overrides()
-        consolidated = _consolidate_colors(
-            state.desktop_normalized.colors, overrides, max_colors=30,
         )
-        for flat_key, entry in consolidated.items():
             if apply_ramps:
                 try:
-                    ramp = generate_color_ramp(entry["value"])
                     shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"]
                     for i, shade in enumerate(shades):
                         if i < len(ramp):
                             shade_key = f"{flat_key}.{shade}"
-                            color_val = ramp[i] if isinstance(ramp[i], str) else ramp[i].get("hex", entry["value"])
                             dtcg_token = _to_dtcg_token(color_val, "color")
                             _flat_key_to_nested(shade_key, dtcg_token, result)
                             token_count += 1
                 except (ValueError, KeyError, TypeError, IndexError):
-                    dtcg_token = _to_dtcg_token(entry["value"], "color")
                     _flat_key_to_nested(flat_key, dtcg_token, result)
                     token_count += 1
             else:
-                dtcg_token = _to_dtcg_token(entry["value"], "color")
                 _flat_key_to_nested(flat_key, dtcg_token, result)
                 token_count += 1
@@ -4500,12 +4527,28 @@ def create_ui():
             gr.Markdown("Export your finalized design tokens as JSON, compatible with **Figma Tokens Studio**.",
                         elem_classes=["section-desc"])
             gr.Markdown("""
-- **Stage 1 JSON (As-Is):** Raw extracted tokens with no modifications — useful for archival or baseline comparison. Includes desktop and mobile viewport variants.
-- **Final JSON (Upgraded):** Tokens with your selected improvements applied (type scale, spacing grid, color ramps, and accepted LLM recommendations). **This is the recommended export.**
-Copy the JSON output below or save it as a `.json` file for import into Figma.
             """, elem_classes=["section-desc"])
             with gr.Row():
                 export_stage1_btn = gr.Button("📥 Export Stage 1 (As-Is)", variant="secondary")
                 export_final_btn = gr.Button("📥 Export Final (Upgraded)", variant="primary")
@@ -4514,9 +4557,22 @@ Copy the JSON output below or save it as a `.json` file for import into Figma.
                         "Copy the contents or save as a `.json` file.*",
                         elem_classes=["section-desc"])
             export_output = gr.Code(label="Tokens JSON", language="json", lines=25)
-            export_stage1_btn.click(export_stage1_json, outputs=[export_output])
-            export_final_btn.click(export_tokens_json, outputs=[export_output])
         # =================================================================
         # EVENT HANDLERS

         self.mobile_normalized = None   # NormalizedTokens
         self.upgrade_recommendations = None  # UpgradeRecommendations
         self.selected_upgrades = {}  # User selections
+        self.color_classification = None  # ClassificationResult from rule-based classifier
         self.logs = []
     def log(self, message: str):
     return result
+def preview_color_classification(convention: str = "semantic"):
+    """Preview color classification before export. 100% rule-based, no LLM."""
+    from core.color_classifier import classify_colors, generate_classification_preview
+    if not state.desktop_normalized or not state.desktop_normalized.colors:
+        return "⚠️ No colors extracted yet. Run Stage 1 extraction first."
+    result = classify_colors(
+        state.desktop_normalized.colors,
+        convention=convention or "semantic",
+        log_callback=state.log,
+    )
+    # Store for use by export functions
+    state.color_classification = result
+    preview = generate_classification_preview(result)
+    # Also append the decision log
+    log_section = "\n\n📋 DECISION LOG:\n" + "\n".join(result.log)
+    return preview + log_section
+def export_stage1_json(convention: str = "semantic"):
     """Export Stage 1 tokens (as-is extraction) to W3C DTCG format."""
     if not state.desktop_normalized:
         gr.Warning("No tokens extracted yet. Complete Stage 1 extraction first.")
     # COLORS — Nested structure with $value, $type, $description
     # =========================================================================
     if state.desktop_normalized and state.desktop_normalized.colors:
+        from core.color_classifier import classify_colors
+        classification = classify_colors(
+            state.desktop_normalized.colors,
+            convention=convention or "semantic",
+            log_callback=state.log,
         )
+        for c in classification.colors:
+            dtcg_token = _to_dtcg_token(c.hex, "color", description=f"Rule-based: {c.category}")
+            _flat_key_to_nested(c.token_name, dtcg_token, result)
             token_count += 1
     # =========================================================================
     return json_str
+def export_tokens_json(convention: str = "semantic"):
     """Export final tokens with selected upgrades applied - FLAT structure for Figma Tokens Studio."""
     if not state.desktop_normalized:
         gr.Warning("No tokens extracted yet. Complete Stage 1 extraction first.")
     primary_font = fonts_info.get("primary", "sans-serif")
     # =========================================================================
+    # COLORS — Rule-based classification + optional ramps
     # =========================================================================
     if state.desktop_normalized and state.desktop_normalized.colors:
         from core.color_utils import generate_color_ramp
+        from core.color_classifier import classify_colors
+        classification = classify_colors(
+            state.desktop_normalized.colors,
+            convention=convention or "semantic",
+            log_callback=state.log,
         )
+        for c in classification.colors:
+            flat_key = c.token_name
             if apply_ramps:
                 try:
+                    ramp = generate_color_ramp(c.hex)
                     shades = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"]
                     for i, shade in enumerate(shades):
                         if i < len(ramp):
                             shade_key = f"{flat_key}.{shade}"
+                            color_val = ramp[i] if isinstance(ramp[i], str) else ramp[i].get("hex", c.hex)
                             dtcg_token = _to_dtcg_token(color_val, "color")
                             _flat_key_to_nested(shade_key, dtcg_token, result)
                             token_count += 1
                 except (ValueError, KeyError, TypeError, IndexError):
+                    dtcg_token = _to_dtcg_token(c.hex, "color")
                     _flat_key_to_nested(flat_key, dtcg_token, result)
                     token_count += 1
             else:
+                dtcg_token = _to_dtcg_token(c.hex, "color")
                 _flat_key_to_nested(flat_key, dtcg_token, result)
                 token_count += 1
             gr.Markdown("Export your finalized design tokens as JSON, compatible with **Figma Tokens Studio**.",
                         elem_classes=["section-desc"])
             gr.Markdown("""
+- **Naming Convention:** Choose how colors are named in the export. Preview before exporting to verify.
+- **Stage 1 JSON (As-Is):** Raw extracted tokens — useful for archival or baseline comparison.
+- **Final JSON (Upgraded):** Tokens with your selected improvements applied. **Recommended export.**
             """, elem_classes=["section-desc"])
+            with gr.Row():
+                naming_convention = gr.Dropdown(
+                    choices=["semantic", "tailwind", "material"],
+                    value="semantic",
+                    label="🎨 Naming Convention",
+                    info="semantic = color.brand.primary | tailwind = brand-primary | material = color.brand.primary",
+                    scale=2,
+                )
+                preview_colors_btn = gr.Button("👁️ Preview Color Names", variant="secondary", scale=1)
+            color_preview_output = gr.Code(
+                label="Color Classification Preview (Rule-Based — No LLM)",
+                language="text",
+                lines=15,
+                visible=True,
+            )
             with gr.Row():
                 export_stage1_btn = gr.Button("📥 Export Stage 1 (As-Is)", variant="secondary")
                 export_final_btn = gr.Button("📥 Export Final (Upgraded)", variant="primary")
                         "Copy the contents or save as a `.json` file.*",
                         elem_classes=["section-desc"])
             export_output = gr.Code(label="Tokens JSON", language="json", lines=25)
+            preview_colors_btn.click(
+                preview_color_classification,
+                inputs=[naming_convention],
+                outputs=[color_preview_output],
+            )
+            export_stage1_btn.click(
+                export_stage1_json,
+                inputs=[naming_convention],
+                outputs=[export_output],
+            )
+            export_final_btn.click(
+                export_tokens_json,
+                inputs=[naming_convention],
+                outputs=[export_output],
+            )
         # =================================================================
         # EVENT HANDLERS

core/color_classifier.py ADDED Viewed

	@@ -0,0 +1,678 @@

+"""
+Rule-Based Color Classifier
+Design System Extractor v3.1
+100% deterministic color classification and naming.
+NO LLM involved. Every decision logged with evidence.
+The classifier:
+1. Aggressively deduplicates similar colors (same role, RGB distance < 30)
+2. Classifies by CSS evidence (property + element + hue)
+3. Names with capped counts per category (no "nonary" ever again)
+4. Supports user-selectable naming conventions (Tailwind, Material, Semantic, Custom)
+5. Logs every decision with evidence trail
+"""
+import colorsys
+from dataclasses import dataclass, field
+from typing import Optional
+from core.color_utils import parse_color, normalize_hex, categorize_color
+# =============================================================================
+# NAMING CONVENTIONS
+# =============================================================================
+CONVENTIONS = {
+    "tailwind": {
+        "separator": "-",       # blue-500
+        "shade_format": "numeric",  # 50, 100, 200...900
+        "prefix": "",
+    },
+    "material": {
+        "separator": ".",       # blue.500
+        "shade_format": "numeric",
+        "prefix": "color.",
+    },
+    "semantic": {
+        "separator": ".",       # color.brand.primary
+        "shade_format": "role",  # primary, secondary, muted
+        "prefix": "color.",
+    },
+}
+# Role shade names for semantic convention
+ROLE_SHADE_NAMES = {
+    "brand": ["primary", "secondary", "accent"],
+    "text": ["primary", "secondary", "muted"],
+    "bg": ["primary", "secondary", "tertiary"],
+    "border": ["light", "DEFAULT", "dark"],
+    "feedback": ["error", "warning", "success", "info"],
+}
+# Feedback hue ranges (hue in degrees)
+FEEDBACK_HUES = {
+    "error": (345, 15),      # Red
+    "warning": (15, 55),     # Orange/Yellow
+    "success": (85, 155),    # Green
+    "info": (175, 215),      # Cyan/Blue
+}
+# =============================================================================
+# DATA CLASSES
+# =============================================================================
+@dataclass
+class ClassifiedColor:
+    """A color with its classification and evidence."""
+    hex: str
+    frequency: int
+    category: str           # brand, text, bg, border, feedback, palette
+    role: str               # primary, secondary, etc. OR numeric shade
+    token_name: str         # Final token name (e.g., "color.brand.primary")
+    evidence: list[str] = field(default_factory=list)
+    confidence: str = "medium"  # high, medium, low
+    css_properties: list[str] = field(default_factory=list)
+    elements: list[str] = field(default_factory=list)
+    contexts: list[str] = field(default_factory=list)
+    merged_from: list[str] = field(default_factory=list)  # Hex values merged into this
+    hue_family: str = "neutral"
+    luminance: float = 0.5
+    saturation: float = 0.0
+@dataclass
+class ClassificationResult:
+    """Complete classification output with log."""
+    colors: list[ClassifiedColor]
+    log: list[str]          # Human-readable decision log
+    convention: str         # Which convention was used
+    stats: dict = field(default_factory=dict)
+# =============================================================================
+# HELPER FUNCTIONS
+# =============================================================================
+def _rgb_distance(hex1: str, hex2: str) -> float:
+    """Euclidean distance in RGB space."""
+    p1 = parse_color(hex1)
+    p2 = parse_color(hex2)
+    if not p1 or not p2:
+        return 999
+    r1, g1, b1 = p1.rgb
+    r2, g2, b2 = p2.rgb
+    return ((r1-r2)**2 + (g1-g2)**2 + (b1-b2)**2) ** 0.5
+def _get_luminance(hex_color: str) -> float:
+    """Get perceptual luminance 0-1."""
+    parsed = parse_color(hex_color)
+    if not parsed:
+        return 0.5
+    r, g, b = parsed.rgb
+    return (0.299 * r + 0.587 * g + 0.114 * b) / 255
+def _get_saturation(hex_color: str) -> float:
+    """Get saturation 0-1."""
+    parsed = parse_color(hex_color)
+    if not parsed:
+        return 0
+    h, s, l = parsed.hsl
+    return s / 100  # hsl returns 0-100
+def _get_hue(hex_color: str) -> float:
+    """Get hue in degrees 0-360."""
+    parsed = parse_color(hex_color)
+    if not parsed:
+        return 0
+    h, s, l = parsed.hsl
+    return h
+def _hue_in_range(hue: float, range_tuple: tuple) -> bool:
+    """Check if hue is in range, handling wrap-around."""
+    low, high = range_tuple
+    if low < high:
+        return low <= hue <= high
+    else:  # Wraps around 360 (e.g., red: 345-15)
+        return hue >= low or hue <= high
+def _lightness_to_shade(lightness_pct: float) -> str:
+    """Map HSL lightness (0-100) to numeric shade (50-900)."""
+    if lightness_pct >= 95:
+        return "50"
+    elif lightness_pct >= 85:
+        return "100"
+    elif lightness_pct >= 75:
+        return "200"
+    elif lightness_pct >= 65:
+        return "300"
+    elif lightness_pct >= 55:
+        return "400"
+    elif lightness_pct >= 45:
+        return "500"
+    elif lightness_pct >= 35:
+        return "600"
+    elif lightness_pct >= 25:
+        return "700"
+    elif lightness_pct >= 15:
+        return "800"
+    else:
+        return "900"
+# =============================================================================
+# MAIN CLASSIFIER
+# =============================================================================
+def classify_colors(
+    colors_dict: dict,
+    convention: str = "semantic",
+    log_callback=None,
+) -> ClassificationResult:
+    """
+    Classify and name all colors using 100% rule-based logic.
+    Args:
+        colors_dict: Dict of name -> ColorToken (from normalizer)
+        convention: "tailwind", "material", or "semantic"
+        log_callback: Optional callback for real-time logging
+    Returns:
+        ClassificationResult with classified colors and decision log
+    """
+    log_lines = []
+    def log(msg):
+        log_lines.append(msg)
+        if log_callback:
+            log_callback(msg)
+    log("📊 COLOR CLASSIFICATION (Rule-Based v3.1)")
+    log("─" * 50)
+    if not colors_dict:
+        log("⚠️ No colors to classify")
+        return ClassificationResult(colors=[], log=log_lines, convention=convention)
+    # =========================================================================
+    # STEP 1: Build flat color list with metadata
+    # =========================================================================
+    raw_colors = []
+    for name, c in colors_dict.items():
+        hex_val = c.value if hasattr(c, 'value') else c.get('value', '')
+        hex_val = normalize_hex(hex_val)
+        freq = c.frequency if hasattr(c, 'frequency') else c.get('frequency', 0)
+        css_props = c.css_properties if hasattr(c, 'css_properties') else c.get('css_properties', [])
+        elements = c.elements if hasattr(c, 'elements') else c.get('elements', [])
+        contexts = c.contexts if hasattr(c, 'contexts') else c.get('contexts', [])
+        role_hint = c.role_hint if hasattr(c, 'role_hint') else c.get('role_hint', None)
+        raw_colors.append({
+            "hex": hex_val,
+            "frequency": freq,
+            "css_properties": [p.lower() for p in css_props],
+            "elements": [e.lower() for e in elements],
+            "contexts": [c.lower() for c in contexts],
+            "role_hint": role_hint,
+            "luminance": _get_luminance(hex_val),
+            "saturation": _get_saturation(hex_val),
+            "hue": _get_hue(hex_val),
+            "hue_family": categorize_color(hex_val),
+        })
+    log(f"Input: {len(raw_colors)} unique colors")
+    # =========================================================================
+    # STEP 2: Classify each color by CSS evidence
+    # =========================================================================
+    classified = []
+    for c in raw_colors:
+        category = _classify_single_color(c)
+        c["category"] = category
+        classified.append(c)
+    # Count per category
+    cat_counts = {}
+    for c in classified:
+        cat_counts[c["category"]] = cat_counts.get(c["category"], 0) + 1
+    log(f"Pre-dedup classification: {cat_counts}")
+    # =========================================================================
+    # STEP 3: Aggressive dedup WITHIN each category
+    # =========================================================================
+    deduped = _aggressive_dedup(classified, log)
+    cat_counts_after = {}
+    for c in deduped:
+        cat_counts_after[c["category"]] = cat_counts_after.get(c["category"], 0) + 1
+    log(f"Post-dedup: {len(deduped)} colors — {cat_counts_after}")
+    # =========================================================================
+    # STEP 4: Cap and rank within each category
+    # =========================================================================
+    capped = _cap_per_category(deduped, log)
+    # =========================================================================
+    # STEP 5: Assign final names using chosen convention
+    # =========================================================================
+    result_colors = _assign_names(capped, convention, log)
+    log(f"─" * 50)
+    log(f"✅ Final: {len(result_colors)} color tokens using '{convention}' convention")
+    stats = {
+        "input_count": len(raw_colors),
+        "output_count": len(result_colors),
+        "merged_count": len(raw_colors) - len(deduped),
+        "categories": cat_counts_after,
+    }
+    return ClassificationResult(
+        colors=result_colors,
+        log=log_lines,
+        convention=convention,
+        stats=stats,
+    )
+# =============================================================================
+# STEP 2: CLASSIFY SINGLE COLOR
+# =============================================================================
+def _classify_single_color(c: dict) -> str:
+    """
+    Classify a single color into category based on CSS evidence.
+    Returns: "brand", "text", "bg", "border", "feedback", "palette"
+    """
+    css_props = c["css_properties"]
+    elements = c["elements"]
+    all_context = " ".join(css_props + elements + c["contexts"])
+    sat = c["saturation"]
+    lum = c["luminance"]
+    hue = c["hue"]
+    freq = c["frequency"]
+    # --- FEEDBACK: by hue + saturation (check FIRST, before brand) ---
+    if sat > 0.4:
+        # Check explicit feedback keywords in context
+        feedback_keywords = ["error", "danger", "invalid", "success", "valid",
+                            "warning", "caution", "alert", "info", "notice"]
+        if any(kw in all_context for kw in feedback_keywords):
+            return "feedback"
+        # Check by hue if frequency is low (feedback colors are rarely used often)
+        if freq < 15:
+            for fb_type, hue_range in FEEDBACK_HUES.items():
+                if _hue_in_range(hue, hue_range):
+                    # Additional check: pure saturated colors with low freq = likely feedback
+                    if sat > 0.6:
+                        return "feedback"
+    # --- BRAND: interactive elements + background-color + saturated ---
+    interactive = ["button", "a", "input", "select", "submit", "btn", "cta", "link"]
+    is_interactive = any(el in all_context for el in interactive)
+    has_bg_prop = any("background" in p for p in css_props)
+    if sat > 0.25 and is_interactive and has_bg_prop and freq > 5:
+        return "brand"
+    if sat > 0.3 and freq > 20:
+        return "brand"
+    # --- TEXT: "color" property on text elements + low saturation ---
+    has_color_prop = any(p == "color" for p in css_props)
+    text_els = ["p", "span", "h1", "h2", "h3", "h4", "h5", "h6", "label", "li", "td", "a"]
+    is_text_el = any(el in all_context for el in text_els)
+    if has_color_prop and (is_text_el or sat < 0.15):
+        if sat < 0.2:
+            return "text"
+    # --- BACKGROUND: background-color on containers + light/neutral ---
+    containers = ["div", "section", "main", "body", "article", "header", "footer", "card", "nav"]
+    is_container = any(el in all_context for el in containers)
+    if has_bg_prop and is_container and sat < 0.15:
+        return "bg"
+    if lum > 0.9 and sat < 0.1:
+        return "bg"
+    # --- BORDER: border properties ---
+    has_border_prop = any("border" in p for p in css_props)
+    if has_border_prop and sat < 0.2:
+        return "border"
+    # --- Neutral with high freq but no clear CSS evidence → likely text ---
+    if sat < 0.1 and lum < 0.6 and freq > 10:
+        return "text"
+    if sat < 0.1 and lum > 0.8:
+        return "bg"
+    # --- Everything else → palette ---
+    return "palette"
+# =============================================================================
+# STEP 3: AGGRESSIVE DEDUP
+# =============================================================================
+def _aggressive_dedup(colors: list[dict], log) -> list[dict]:
+    """
+    Aggressively merge similar colors WITHIN the same category.
+    Threshold: RGB distance < 30 for same-category colors.
+    """
+    # Group by category
+    by_category = {}
+    for c in colors:
+        cat = c["category"]
+        if cat not in by_category:
+            by_category[cat] = []
+        by_category[cat].append(c)
+    result = []
+    total_merged = 0
+    for cat, cat_colors in by_category.items():
+        if len(cat_colors) <= 1:
+            result.extend(cat_colors)
+            continue
+        # Sort by frequency (most used first — these survive merges)
+        cat_colors.sort(key=lambda x: -x["frequency"])
+        merged = []
+        used = set()
+        for i, c1 in enumerate(cat_colors):
+            if i in used:
+                continue
+            group = [c1]
+            for j, c2 in enumerate(cat_colors[i+1:], i+1):
+                if j in used:
+                    continue
+                dist = _rgb_distance(c1["hex"], c2["hex"])
+                if dist < 30:
+                    group.append(c2)
+                    used.add(j)
+            # Merge into the highest-frequency color
+            primary = group[0]
+            merged_hexes = []
+            for other in group[1:]:
+                primary["frequency"] += other["frequency"]
+                primary["css_properties"] = list(set(primary["css_properties"] + other["css_properties"]))
+                primary["elements"] = list(set(primary["elements"] + other["elements"]))
+                primary["contexts"] = list(set(primary["contexts"] + other["contexts"]))
+                merged_hexes.append(other["hex"])
+            primary["merged_from"] = merged_hexes
+            merged.append(primary)
+            used.add(i)
+            if merged_hexes:
+                total_merged += len(merged_hexes)
+                log(f"[DEDUP] {cat}: {primary['hex']} absorbed {merged_hexes} (dist<30)")
+        result.extend(merged)
+    if total_merged > 0:
+        log(f"[DEDUP] Total: {total_merged} near-duplicate colors merged")
+    return result
+# =============================================================================
+# STEP 4: CAP PER CATEGORY
+# =============================================================================
+# Maximum colors per category
+CATEGORY_CAPS = {
+    "brand": 3,       # primary, secondary, accent
+    "text": 3,        # primary, secondary, muted
+    "bg": 3,          # primary, secondary, tertiary
+    "border": 3,      # light, default, dark
+    "feedback": 4,    # error, warning, success, info
+    "palette": 20,    # generous cap for remaining
+}
+def _cap_per_category(colors: list[dict], log) -> list[dict]:
+    """
+    Limit colors per category. Excess become palette colors.
+    Within each category, keep by frequency (most used survives).
+    """
+    by_category = {}
+    for c in colors:
+        cat = c["category"]
+        if cat not in by_category:
+            by_category[cat] = []
+        by_category[cat].append(c)
+    result = []
+    for cat, cat_colors in by_category.items():
+        cap = CATEGORY_CAPS.get(cat, 10)
+        cat_colors.sort(key=lambda x: -x["frequency"])
+        kept = cat_colors[:cap]
+        overflow = cat_colors[cap:]
+        result.extend(kept)
+        # Overflow colors become palette
+        for c in overflow:
+            old_cat = c["category"]
+            c["category"] = "palette"
+            log(f"[CAP] {c['hex']} demoted: {old_cat} → palette (category full, freq={c['frequency']})")
+        result.extend(overflow)
+    return result
+# =============================================================================
+# STEP 5: ASSIGN NAMES
+# =============================================================================
+def _assign_names(colors: list[dict], convention: str, log) -> list[ClassifiedColor]:
+    """
+    Assign final token names based on chosen convention.
+    """
+    conv = CONVENTIONS.get(convention, CONVENTIONS["semantic"])
+    prefix = conv["prefix"]
+    sep = conv["separator"]
+    # Group by category for role assignment
+    by_category = {}
+    for c in colors:
+        cat = c["category"]
+        if cat not in by_category:
+            by_category[cat] = []
+        by_category[cat].append(c)
+    result = []
+    used_names = set()
+    for cat in ["brand", "text", "bg", "border", "feedback", "palette"]:
+        cat_colors = by_category.get(cat, [])
+        if not cat_colors:
+            continue
+        # Sort by frequency for consistent ordering
+        cat_colors.sort(key=lambda x: -x["frequency"])
+        for idx, c in enumerate(cat_colors):
+            name_cat = cat  # Local var — don't override loop variable
+            if cat == "feedback":
+                role = _assign_feedback_role(c, idx, by_category.get("feedback", []))
+            elif cat == "palette":
+                # Palette: use hue family + numeric shade (ALWAYS)
+                name_cat = c["hue_family"]  # Override with hue family
+                parsed = parse_color(c["hex"])
+                if parsed:
+                    role = _lightness_to_shade(parsed.hsl[2])
+                else:
+                    role = "500"
+            elif convention == "semantic":
+                # Semantic: use role names (primary, secondary, muted, etc.)
+                role_names = ROLE_SHADE_NAMES.get(c["category"], ["primary", "secondary", "tertiary"])
+                if idx < len(role_names):
+                    role = role_names[idx]
+                else:
+                    role = f"{idx + 1}"
+            else:
+                # Tailwind/Material: even role colors get descriptive names
+                role_names = ROLE_SHADE_NAMES.get(c["category"], ["primary", "secondary", "tertiary"])
+                if idx < len(role_names):
+                    role = role_names[idx]
+                else:
+                    role = f"{idx + 1}"
+            # Build token name
+            if convention == "tailwind":
+                token_name = f"{name_cat}{sep}{role}"
+            else:
+                token_name = f"{prefix}{name_cat}{sep}{role}"
+            # Handle name collisions
+            base_name = token_name
+            suffix = 2
+            while token_name in used_names:
+                token_name = f"{base_name}{sep}{suffix}"
+                suffix += 1
+            used_names.add(token_name)
+            # Build evidence
+            evidence = _build_evidence(c)
+            log(f"[NAME] {c['hex']} → {token_name} ({c['category']}, freq={c['frequency']})")
+            result.append(ClassifiedColor(
+                hex=c["hex"],
+                frequency=c["frequency"],
+                category=c["category"],
+                role=role,
+                token_name=token_name,
+                evidence=evidence,
+                confidence="high" if c["frequency"] > 10 else "medium" if c["frequency"] > 3 else "low",
+                css_properties=c["css_properties"],
+                elements=c["elements"],
+                contexts=c["contexts"],
+                merged_from=c.get("merged_from", []),
+                hue_family=c["hue_family"],
+                luminance=c["luminance"],
+                saturation=c["saturation"],
+            ))
+    return result
+def _assign_feedback_role(c: dict, idx: int, all_feedback: list) -> str:
+    """Assign feedback role by hue matching."""
+    hue = c["hue"]
+    sat = c["saturation"]
+    # Try to match by hue
+    if _hue_in_range(hue, FEEDBACK_HUES["error"]) and sat > 0.4:
+        return "error"
+    if _hue_in_range(hue, FEEDBACK_HUES["warning"]) and sat > 0.4:
+        return "warning"
+    if _hue_in_range(hue, FEEDBACK_HUES["success"]) and sat > 0.4:
+        return "success"
+    if _hue_in_range(hue, FEEDBACK_HUES["info"]) and sat > 0.3:
+        return "info"
+    # Fallback: by index
+    fallback_names = ["error", "warning", "success", "info"]
+    return fallback_names[idx % len(fallback_names)]
+def _build_evidence(c: dict) -> list[str]:
+    """Build human-readable evidence list for classification."""
+    ev = []
+    if c["frequency"] > 0:
+        ev.append(f"Used {c['frequency']}x")
+    if c["css_properties"]:
+        ev.append(f"CSS: {', '.join(c['css_properties'][:3])}")
+    if c["elements"]:
+        ev.append(f"Elements: {', '.join(c['elements'][:3])}")
+    if c.get("merged_from"):
+        ev.append(f"Merged {len(c['merged_from'])} similar colors")
+    ev.append(f"Hue: {c['hue_family']}, Lum: {c['luminance']:.2f}, Sat: {c['saturation']:.2f}")
+    return ev
+# =============================================================================
+# PREVIEW GENERATOR
+# =============================================================================
+def generate_classification_preview(result: ClassificationResult) -> str:
+    """
+    Generate a human-readable preview of the classification.
+    Shows what the user will get before export.
+    """
+    lines = []
+    lines.append(f"🎨 COLOR CLASSIFICATION PREVIEW ({result.convention} convention)")
+    lines.append(f"{'=' * 60}")
+    lines.append("")
+    # Group by category
+    by_cat = {}
+    for c in result.colors:
+        if c.category not in by_cat:
+            by_cat[c.category] = []
+        by_cat[c.category].append(c)
+    cat_labels = {
+        "brand": "🏷️  BRAND (from buttons/CTAs)",
+        "text": "📝 TEXT (from color property)",
+        "bg": "🖼️  BACKGROUND (from containers)",
+        "border": "📐 BORDER (from border properties)",
+        "feedback": "⚡ FEEDBACK (by hue convention)",
+    }
+    for cat in ["brand", "text", "bg", "border", "feedback"]:
+        cat_colors = by_cat.get(cat, [])
+        if not cat_colors:
+            continue
+        label = cat_labels.get(cat, f"📦 {cat.upper()}")
+        lines.append(label)
+        for c in cat_colors:
+            ev_short = f"({c.frequency}x" + (f", merged {len(c.merged_from)}" if c.merged_from else "") + ")"
+            lines.append(f"  ■ {c.hex}  →  {c.token_name}  {ev_short}")
+        lines.append("")
+    # Palette colors (group by hue family)
+    palette = by_cat.get("palette", [])
+    if palette:
+        lines.append("🎨 PALETTE (remaining by hue)")
+        hue_groups = {}
+        for c in palette:
+            if c.hue_family not in hue_groups:
+                hue_groups[c.hue_family] = []
+            hue_groups[c.hue_family].append(c)
+        for hue_fam, hue_colors in sorted(hue_groups.items()):
+            for c in hue_colors:
+                lines.append(f"  ■ {c.hex}  →  {c.token_name}  ({c.frequency}x)")
+        lines.append("")
+    # Stats
+    lines.append(f"{'─' * 60}")
+    if result.stats:
+        lines.append(f"Total: {result.stats.get('output_count', 0)} tokens")
+        if result.stats.get("merged_count", 0) > 0:
+            lines.append(f"⚠️  {result.stats['merged_count']} near-duplicate colors were merged")
+    return "\n".join(lines)

output_json/file (18).json ADDED Viewed

	@@ -0,0 +1,584 @@

+{
+  "color": {
+    "text": {
+      "primary": {
+        "$type": "color",
+        "$value": "#373737"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#000000"
+      },
+      "tertiary": {
+        "$type": "color",
+        "$value": "#999999"
+      },
+      "quaternary": {
+        "$type": "color",
+        "$value": "#4e4c4a"
+      },
+      "quinary": {
+        "$type": "color",
+        "$value": "#808080"
+      },
+      "senary": {
+        "$type": "color",
+        "$value": "#cccccc"
+      },
+      "septenary": {
+        "$type": "color",
+        "$value": "#404040"
+      },
+      "octonary": {
+        "$type": "color",
+        "$value": "#727272"
+      },
+      "nonary": {
+        "$type": "color",
+        "$value": "#aaaaaa"
+      },
+      "decenary": {
+        "$type": "color",
+        "$value": "#656565"
+      },
+      "undecenary": {
+        "$type": "color",
+        "$value": "#0e0c24"
+      },
+      "duodecenary": {
+        "$type": "color",
+        "$value": "#282828"
+      },
+      "tredecenary": {
+        "$type": "color",
+        "$value": "#151414"
+      }
+    },
+    "bg": {
+      "primary": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "light": {
+        "$type": "color",
+        "$value": "#f6f6f6"
+      },
+      "medium": {
+        "$type": "color",
+        "$value": "#ecedee"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#fff2f2"
+      }
+    },
+    "border": {
+      "light": {
+        "$type": "color",
+        "$value": "#d3d3d3"
+      },
+      "medium": {
+        "$type": "color",
+        "$value": "#e4e4e4"
+      },
+      "dark": {
+        "$type": "color",
+        "$value": "#b3b3b3"
+      },
+      "heavy": {
+        "$type": "color",
+        "$value": "#2c3e50"
+      }
+    },
+    "brand": {
+      "primary": {
+        "$type": "color",
+        "$value": "#06b2c4"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#bcd432"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "#ff1857"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "#f20000"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#33cccc"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#ff8f00"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "#65a121"
+      }
+    },
+    "#333333": {
+      "$type": "color",
+      "$value": "#333333"
+    },
+    "neutral": {
+      "400": {
+        "$type": "color",
+        "$value": "#78808e"
+      }
+    }
+  },
+  "font": {
+    "display": {
+      "2xl": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "68px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "60px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        }
+      },
+      "xl": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "58px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "50px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        }
+      },
+      "lg": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "48px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "42px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        }
+      },
+      "md": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "40px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "34px",
+            "fontWeight": "700",
+            "lineHeight": "1.2"
+          }
+        }
+      }
+    },
+    "heading": {
+      "xl": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "34px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "30px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        }
+      },
+      "lg": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "28px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "24px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        }
+      },
+      "md": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "24px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "20px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        }
+      },
+      "sm": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "20px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "16px",
+            "fontWeight": "600",
+            "lineHeight": "1.3"
+          }
+        }
+      }
+    },
+    "body": {
+      "lg": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "16px",
+            "fontWeight": "400",
+            "lineHeight": "1.5"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "14px",
+            "fontWeight": "400",
+            "lineHeight": "1.5"
+          }
+        }
+      },
+      "md": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "14px",
+            "fontWeight": "400",
+            "lineHeight": "1.5"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "12px",
+            "fontWeight": "400",
+            "lineHeight": "1.5"
+          }
+        }
+      },
+      "sm": {
+        "desktop": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "12px",
+            "fontWeight": "400",
+            "lineHeight": "1.5"
+          }
+        },
+        "mobile": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "Open Sans",
+            "fontSize": "10px",
+            "fontWeight": "400",
+            "lineHeight": "1.5"
+          }
+        }
+      }
+    },
+    "caption": {
+      "desktop": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Open Sans",
+          "fontSize": "10px",
+          "fontWeight": "400",
+          "lineHeight": "1.4"
+        }
+      },
+      "mobile": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Open Sans",
+          "fontSize": "8px",
+          "fontWeight": "400",
+          "lineHeight": "1.4"
+        }
+      }
+    },
+    "overline": {
+      "desktop": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Open Sans",
+          "fontSize": "8px",
+          "fontWeight": "500",
+          "lineHeight": "1.2"
+        }
+      },
+      "mobile": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Open Sans",
+          "fontSize": "6px",
+          "fontWeight": "500",
+          "lineHeight": "1.2"
+        }
+      }
+    }
+  },
+  "space": {
+    "1": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "8px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "8px"
+      }
+    },
+    "2": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "16px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "16px"
+      }
+    },
+    "3": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "24px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "24px"
+      }
+    },
+    "4": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "32px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "32px"
+      }
+    },
+    "5": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "40px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "40px"
+      }
+    },
+    "6": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "48px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "48px"
+      }
+    },
+    "8": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "56px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "56px"
+      }
+    },
+    "10": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "64px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "64px"
+      }
+    },
+    "12": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "72px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "72px"
+      }
+    },
+    "16": {
+      "desktop": {
+        "$type": "dimension",
+        "$value": "80px"
+      },
+      "mobile": {
+        "$type": "dimension",
+        "$value": "80px"
+      }
+    }
+  },
+  "radius": {
+    "xs": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "2px",
+      "3": {
+        "$type": "dimension",
+        "$value": "3px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "4px",
+      "5": {
+        "$type": "dimension",
+        "$value": "5px"
+      },
+      "6": {
+        "$type": "dimension",
+        "$value": "6px"
+      },
+      "100": {
+        "$type": "dimension",
+        "$value": "100px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "8px",
+      "10": {
+        "$type": "dimension",
+        "$value": "10px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "16px",
+      "17": {
+        "$type": "dimension",
+        "$value": "17px"
+      }
+    },
+    "2xl": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": "50px"
+    },
+    "full": {
+      "$type": "dimension",
+      "$value": "9999px"
+    }
+  },
+  "shadow": {
+    "xs": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.5)",
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "4px",
+        "spread": "0px"
+      }
+    },
+    "sm": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.15)",
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "16px",
+        "spread": "0px"
+      }
+    }
+  }
+}