Merge branch 'main' of https://huggingface.co/spaces/riazmo/Design-System-Automation

# Conflicts:
# ARCHITECTURE.md
# CLAUDE.md
# PLAN_W3C_DTCG_UPDATE.md
# PROJECT_CONTEXT.md
# docs/CONTEXT.md
# storage/benchmark_cache.json

PART2_COMPONENT_GENERATION.md

@@ -0,0 +1,418 @@
+# Design System Automation — Part 2: Component Generation
+
+## Session Context
+
+**Prerequisite**: Part 1 (Token Extraction + Analysis) is COMPLETE at v3.2
+- Phases 1-3 DONE: Normalizer, Stage 2 agents, Export all working
+- 113 tests passing, W3C DTCG v1 compliant output
+- GitHub: https://github.com/hiriazmo/design-system-automation
+- Project: `/Users/yahya/design-system-automation/`
+
+**This session**: Build automated component generation from extracted tokens into Figma.
+
+---
+
+## THE GAP: Nobody Does This
+
+Exhaustive research of 30+ tools (Feb 2026) confirms:
+
+**No production tool takes DTCG JSON and outputs Figma Components.**
+
+```
+YOUR EXTRACTOR                    THE GAP                     FIGMA
++--------------+    +----------------------------+    +------------------+
+| DTCG JSON    |--->|  ??? Nothing does this     |--->| Button component |
+| with tokens  |    |  tokens -> components      |    | with 60 variants |
++--------------+    +----------------------------+    +------------------+
+```
+
+### What Exists (and What It Can't Do)
+
+| Category | Best Tool | What It Does | Creates Components? |
+|----------|-----------|-------------|-------------------|
+| Token Importers | Tokens Studio (1M+ installs) | JSON -> Figma Variables | NO - variables only |
+| AI Design | Figma Make | Prompt -> prototype | NO - not token-driven |
+| MCP Bridges | Figma Console MCP (543 stars) | AI writes to Figma | YES but non-deterministic |
+| Code-to-Figma | story.to.design | Storybook -> Figma components | YES but needs full Storybook |
+| Generators | Figr Identity | Brand config -> components | YES but can't consume YOUR tokens |
+| Commercial | Knapsack ($10M), Supernova | Token management | NO - manages, doesn't create |
+| DEAD | Specify.app (shutting down), Backlight.dev (shut down June 2025) | - | - |
+
+### Key Findings Per Category
+
+**Token Importers** (7+ tools evaluated): Tokens Studio, TokensBrucke, Styleframe, DTCG Token Manager, GitFig, Supa Design Tokens, Design System Automator — ALL create Figma Variables from JSON, NONE create components.
+
+**MCP Bridges** (5 tools): Figma Console MCP (Southleft), claude-talk-to-figma-mcp, cursor-talk-to-figma-mcp (Grab), figma-mcp-write-server, Figma-MCP-Write-Bridge — ALL have full write access, but component creation is AI-interpreted (non-deterministic, varies per run).
+
+**Code-to-Figma**: story.to.design is the standout — creates REAL Figma components with proper variants from Storybook. But requires a full coded component library + running Storybook instance as intermediary.
+
+**figma-json2component** (GitHub): Experimental proof-of-concept that generates components from custom JSON schema. Not DTCG, not production quality, but validates the concept IS possible.
+
+---
+
+## FOUR APPROACHES — RANKED
+
+### Option A: Custom Figma Plugin (RECOMMENDED)
+```
+DTCG JSON -> Your Plugin reads JSON -> Creates Variables -> Generates Components -> Done
+```
+- **Effort**: 4-8 weeks (~1400 lines of plugin code for 5 MVP components)
+- **Quality**: Highest — fully deterministic, consistent every run
+- **Advantage**: We already have a working plugin (code.js) that imports tokens
+- **Risk**: Low — Figma Plugin API supports everything needed
+
+### Option B: Pipeline — shadcn + Storybook + story.to.design
+```
+DTCG JSON -> Style Dictionary -> CSS vars -> shadcn themed -> Storybook -> story.to.design -> Figma
+```
+- **Effort**: 2-3 days setup, then 15-30 min per extraction
+- **Quality**: High — battle-tested shadcn components
+- **Dependency**: story.to.design (commercial, paid)
+- **Risk**: Medium — many moving parts
+
+### Option C: MCP + Claude AI Chain
+```
+DTCG JSON -> Claude reads tokens -> Figma Console MCP -> AI creates components -> Figma
+```
+- **Effort**: 2-3 weeks
+- **Quality**: Medium — non-deterministic
+- **Risk**: High — AI output varies per run
+
+### Option D: Figr Identity + Manual Token Swap
+```
+Figr Identity generates base system -> Manually swap tokens -> Adjust
+```
+- **Effort**: 1-2 days
+- **Quality**: Medium — not YOUR tokens
+- **Risk**: Medium — manual alignment needed
+
+**Decision: Option A (Custom Plugin)** — we already have 80% of the infrastructure, it's deterministic, no external dependencies, and fills a genuine market gap.
+
+---
+
+## FIGMA PLUGIN API: FULL CAPABILITY CHECK
+
+Every feature needed for component generation is supported:
+
+| Requirement | API Method | Status |
+|------------|-----------|--------|
+| Create components | `figma.createComponent()` | Supported |
+| Variant sets (60 variants) | `figma.combineAsVariants()` | Supported |
+| Auto-layout with padding | `layoutMode`, `paddingTop/Right/Bottom/Left`, `itemSpacing` | Supported |
+| Text labels | `figma.createText()` + `loadFontAsync()` | Supported |
+| Icon slot (optional) | `addComponentProperty("ShowIcon", "BOOLEAN", true)` | Supported |
+| Instance swap (icons) | `addComponentProperty("Icon", "INSTANCE_SWAP", id)` | Supported |
+| Border radius from tokens | `setBoundVariable('topLeftRadius', radiusVar)` | Supported |
+| Colors from tokens | `setBoundVariableForPaint()` -> binds to variables | Supported |
+| Shadows from tokens | `setBoundVariableForEffect()` | Supported (has spread bug, workaround exists) |
+| Hover/press interactions | `node.setReactionsAsync()` with `ON_HOVER`/`ON_PRESS` | Supported |
+| Expose text property | `addComponentProperty("Label", "TEXT", "Button")` | Supported |
+| Disabled opacity | `node.opacity = 0.5` | Supported |
+
+---
+
+## MVP SCOPE: 5 Components, 62 Variants
+
+| Component | Variants | Automatable? | Effort |
+|-----------|---------|-------------|--------|
+| **Button** | 4 variants x 3 sizes x 5 states = 60 | Fully | 2-3 days |
+| **Text Input** | 4 states x 2 sizes = 8 | Fully | 1-2 days |
+| **Card** | 2 configurations | Semi | 1 day |
+| **Toast/Notification** | 4 types (success/error/warn/info) | Fully | 1 day |
+| **Checkbox + Radio** | ~12 variants | Fully | 1-2 days |
+| **Total** | **~86 variants** | | **8-12 days** |
+
+### Post-MVP Components
+
+| Component | Variants | Automatable? | Effort |
+|-----------|---------|-------------|--------|
+| Toggle/Switch | on/off x enabled/disabled = 4 | Fully | 0.5 day |
+| Select/Dropdown | Multiple states | Semi | 1-2 days |
+| Modal/Dialog | 3 sizes | Semi | 1 day |
+| Table | Header + data rows | Template-based | 2 days |
+
+---
+
+## TOKEN-TO-COMPONENT MAPPING
+
+How extracted tokens bind to component properties:
+
+### Button Example
+```
+Token                    -> Figma Property
+-------------------------------------------------
+color.brand.primary      -> Fill (default state)
+color.brand.600          -> Fill (hover state)
+color.brand.700          -> Fill (pressed state)
+color.text.inverse       -> Text color
+color.neutral.200        -> Fill (secondary variant)
+color.neutral.300        -> Fill (secondary hover)
+radius.md                -> Corner radius (all corners)
+shadow.sm                -> Drop shadow (elevated variant)
+spacing.3                -> Padding horizontal (16px)
+spacing.2                -> Padding vertical (8px)
+font.body.md             -> Text style (label)
+```
+
+### Variable Collections Needed
+```
+1. Primitives     -> Raw color palette (blue.50 through blue.900, etc.)
+2. Semantic       -> Role-based aliases (brand.primary -> blue.500)
+3. Spacing        -> 4px grid (spacing.1=4, spacing.2=8, spacing.3=12...)
+4. Radius         -> none/sm/md/lg/xl/full
+5. Shadow         -> xs/sm/md/lg/xl elevation levels
+6. Typography     -> Font families, sizes, weights, line-heights
+```
+
+---
+
+## COMPONENT DEFINITION SCHEMA (Proposed)
+
+Each component needs a JSON definition describing its anatomy, token bindings, and variant matrix:
+
+```json
+{
+  "component": "Button",
+  "anatomy": {
+    "root": {
+      "type": "frame",
+      "layout": "horizontal",
+      "padding": { "h": "spacing.3", "v": "spacing.2" },
+      "radius": "radius.md",
+      "fill": "color.brand.primary",
+      "gap": "spacing.2"
+    },
+    "icon_slot": {
+      "type": "instance_swap",
+      "size": 16,
+      "visible": false,
+      "property": "ShowIcon"
+    },
+    "label": {
+      "type": "text",
+      "style": "font.body.md",
+      "color": "color.text.inverse",
+      "content": "Button",
+      "property": "Label"
+    }
+  },
+  "variants": {
+    "Variant": ["Primary", "Secondary", "Outline", "Ghost"],
+    "Size": ["Small", "Medium", "Large"],
+    "State": ["Default", "Hover", "Pressed", "Focused", "Disabled"]
+  },
+  "variant_overrides": {
+    "Variant=Secondary": {
+      "root.fill": "color.neutral.200",
+      "label.color": "color.text.primary"
+    },
+    "Variant=Outline": {
+      "root.fill": "transparent",
+      "root.stroke": "color.border.primary",
+      "root.strokeWeight": 1,
+      "label.color": "color.brand.primary"
+    },
+    "Variant=Ghost": {
+      "root.fill": "transparent",
+      "label.color": "color.brand.primary"
+    },
+    "State=Hover": {
+      "root.fill": "color.brand.600"
+    },
+    "State=Pressed": {
+      "root.fill": "color.brand.700"
+    },
+    "State=Disabled": {
+      "root.opacity": 0.5
+    },
+    "Size=Small": {
+      "root.padding.h": "spacing.2",
+      "root.padding.v": "spacing.1",
+      "label.style": "font.body.sm"
+    },
+    "Size=Large": {
+      "root.padding.h": "spacing.4",
+      "root.padding.v": "spacing.3",
+      "label.style": "font.body.lg"
+    }
+  }
+}
+```
+
+### Component Generation Pattern (Plugin Code)
+
+Every component follows the same pipeline:
+```
+1. Read tokens from DTCG JSON
+2. Create Variable Collections (if not exist)
+3. For each variant combination:
+   a. Create frame with auto-layout
+   b. Add child nodes (icon slot, label, etc.)
+   c. Apply token bindings via setBoundVariable()
+   d. Apply variant-specific overrides
+4. combineAsVariants() -> component set
+5. Add component properties (Label text, ShowIcon boolean)
+```
+
+---
+
+## ARCHITECTURE FOR PLUGIN EXTENSION
+
+Current plugin (`code.js`) already does:
+- Parse DTCG JSON (isDTCGFormat detection)
+- Create paint styles from colors
+- Create text styles from typography
+- Create effect styles from shadows
+- Create variable collections
+
+What needs to be ADDED:
+```
+code.js (existing ~1200 lines)
+  |
+  +-- componentGenerator.js (NEW ~1400 lines)
+  |     |-- generateButton()      ~250 lines
+  |     |-- generateTextInput()   ~200 lines
+  |     |-- generateCard()        ~150 lines
+  |     |-- generateToast()       ~150 lines
+  |     |-- generateCheckbox()    ~200 lines
+  |     |-- generateRadio()       ~150 lines
+  |     +-- shared utilities      ~300 lines
+  |          |-- createAutoLayoutFrame()
+  |          |-- bindTokenToVariable()
+  |          |-- buildVariantMatrix()
+  |          |-- resolveTokenValue()
+  |
+  +-- componentDefinitions.json (NEW ~500 lines)
+        |-- Button definition
+        |-- TextInput definition
+        |-- Card definition
+        |-- Toast definition
+        +-- Checkbox/Radio definition
+```
+
+### Implementation Order
+```
+Week 1-2: Infrastructure
+  - Variable collection builder (primitives, semantic, spacing, radius, shadow)
+  - Token resolver (DTCG path -> Figma variable reference)
+  - Auto-layout frame builder with token bindings
+  - Variant matrix generator
+
+Week 3-4: MVP Components
+  - Button (60 variants) — most complex, validates the full pipeline
+  - TextInput (8 variants) — validates form patterns
+  - Toast (4 variants) — validates feedback patterns
+
+Week 5-6: Remaining MVP + Polish
+  - Card (2 configs) — validates layout composition
+  - Checkbox + Radio (12 variants) — validates toggle patterns
+  - Error handling, edge cases, testing
+
+Week 7-8: Post-MVP (if time)
+  - Toggle/Switch, Select, Modal
+  - Documentation
+```
+
+---
+
+## EXISTING FILES TO KNOW ABOUT
+
+| File | Purpose | Lines |
+|------|---------|-------|
+| `app.py` | Main Gradio app, token extraction orchestration | ~5000 |
+| `agents/llm_agents.py` | AURORA, ATLAS, SENTINEL, NEXUS LLM agents | ~1200 |
+| `agents/normalizer.py` | Token normalization (colors, radius, shadows) | ~950 |
+| `core/color_classifier.py` | Rule-based color classification (PRIMARY authority) | ~815 |
+| `core/color_utils.py` | Color math (hex/RGB/HSL, contrast, ramps) | ~400 |
+| `core/rule_engine.py` | Type scale, WCAG, spacing grid analysis | ~1100 |
+| `output_json/figma-plugin-extracted/figma-design-token-creator 5/src/code.js` | **Figma plugin — EXTEND THIS** | ~1200 |
+| `output_json/figma-plugin-extracted/figma-design-token-creator 5/src/ui.html` | Plugin UI | ~500 |
+
+### DTCG Output Format (What the Plugin Receives)
+
+```json
+{
+  "color": {
+    "brand": {
+      "primary": {
+        "$type": "color",
+        "$value": "#005aa3",
+        "$description": "[classifier] brand: primary_action",
+        "$extensions": {
+          "com.design-system-automation": {
+            "frequency": 47,
+            "confidence": "high",
+            "category": "brand",
+            "evidence": ["background-color on <a>", "background-color on <button>"]
+          }
+        }
+      }
+    }
+  },
+  "radius": {
+    "md": { "$type": "dimension", "$value": "8px" },
+    "lg": { "$type": "dimension", "$value": "16px" },
+    "full": { "$type": "dimension", "$value": "9999px" }
+  },
+  "shadow": {
+    "sm": {
+      "$type": "shadow",
+      "$value": {
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "8px",
+        "spread": "0px",
+        "color": "#00000026"
+      }
+    }
+  },
+  "typography": {
+    "body": {
+      "md": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "lineHeight": 1.5,
+          "letterSpacing": "0px"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "1": { "$type": "dimension", "$value": "4px" },
+    "2": { "$type": "dimension", "$value": "8px" },
+    "3": { "$type": "dimension", "$value": "16px" }
+  }
+}
+```
+
+---
+
+## COMPETITIVE ADVANTAGE
+
+Building this fills a genuine market gap:
+- **Tokens Studio** (1M+ installs) = token management, no component generation
+- **Figr Identity** = generates components but from brand config, not YOUR tokens
+- **story.to.design** = needs full Storybook pipeline as intermediary
+- **MCP bridges** = non-deterministic AI interpretation
+- **Us** = DTCG JSON in, deterministic Figma components out. Nobody else does this.
+
+### Strategic Position
+```
+[Extract from website] -> [Analyze & Score] -> [Generate Components in Figma]
+     Part 1 (DONE)          Part 1 (DONE)          Part 2 (THIS)
+```
+
+We become the only tool that goes from URL to complete Figma design system with components — fully automated.
+
+---
+
+## OPEN QUESTIONS FOR THIS SESSION
+
+1. Should component definitions live in JSON (data-driven) or be hardcoded in JS (simpler)?
+2. Should we generate all 60 Button variants at once, or let user pick which variants?
+3. How to handle missing tokens? (e.g., site has no shadow tokens — skip shadow on buttons or use defaults?)
+4. Should we support dark mode variants from the start, or add later?
+5. Icon system — use a bundled icon set (Lucide?) or just placeholder frames?

output_json/file (19).json

@@ -0,0 +1,1164 @@
+{
+  "color": {
+    "brand": {
+      "primary": {
+        "$type": "color",
+        "$value": "#06b2c4"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#bcd432"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "#3aaede"
+      }
+    },
+    "text": {
+      "primary": {
+        "$type": "color",
+        "$value": "#373737"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "muted": {
+        "$type": "color",
+        "$value": "#000000"
+      }
+    },
+    "bg": {
+      "primary": {
+        "$type": "color",
+        "$value": "#ecedee"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#d5d5d5"
+      }
+    },
+    "border": {
+      "primary": {
+        "$type": "color",
+        "$value": "#bbbbbb"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#a5a0a0"
+      }
+    },
+    "feedback": {
+      "error": {
+        "$type": "color",
+        "$value": "#ff323e"
+      },
+      "info": {
+        "$type": "color",
+        "$value": "#1883fd"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "#fee233"
+      }
+    },
+    "blue": {
+      "700": {
+        "50": {
+          "$type": "color",
+          "$value": "#b4daf3"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#97cef0"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#5bb5ee"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#1b9df0"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#067cc8"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#005890"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#004571"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#003252"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#001f34"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#000d15"
+        }
+      },
+      "800": {
+        "50": {
+          "$type": "color",
+          "$value": "#bec2f1"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#a5abed"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#727be8"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#3b49e6"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#1323d6"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#0a17a7"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#040f86"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#010964"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#000540"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#00021a"
+        }
+      }
+    },
+    "cyan": {
+      "400": {
+        "50": {
+          "$type": "color",
+          "$value": "#d9e9ec"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#cbe2e6"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#aed4db"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#8fc7d1"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#70bac8"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#50afc1"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#3590a1"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#256a77"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#16434c"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#081c20"
+        }
+      }
+    },
+    "neutral": {
+      "200": {
+        "50": {
+          "$type": "color",
+          "$value": "#eff0f1"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#e9ebec"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#dde0e2"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#d1d6d9"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#c6ccd0"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#bac2c7"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#8c9aa2"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#62717b"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#3d474e"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#191d20"
+        }
+      },
+      "400": {
+        "50": {
+          "$type": "color",
+          "$value": "#e6e6e6"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#dddddd"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#cccccc"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#bababa"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#a8a8a8"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#979797"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#767676"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#565656"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#363636"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#161616"
+        }
+      },
+      "600": {
+        "50": {
+          "$type": "color",
+          "$value": "#d3d8dd"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#c3cad1"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#a3aeb9"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#8392a2"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#647689"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#4c5b6a"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#3b4754"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#2a343d"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#1a2027"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#0a0d10"
+        }
+      },
+      "800": {
+        "50": {
+          "$type": "color",
+          "$value": "#c8c8c8"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#b5b5b5"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#8e8e8e"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#676767"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#404040"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#191919"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#131313"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0e0e0e"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#090909"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#030303"
+        }
+      }
+    },
+    "orange": {
+      "200": {
+        "50": {
+          "$type": "color",
+          "$value": "#f7ecce"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#f5e6bb"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#f4db93"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#f5d069"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#f8c73c"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#ffc00e"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#d39c00"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#9a7200"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#614800"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#281d00"
+        }
+      }
+    },
+    "pink": {
+      "500": {
+        "50": {
+          "$type": "color",
+          "$value": "#f6cbf6"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#f5b7f5"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#f38df3"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#f460f4"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#f831f8"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#ff00ff"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#c800c8"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#920092"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#5c005c"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#260026"
+        }
+      },
+      "600": {
+        "50": {
+          "$type": "color",
+          "$value": "#eaccea"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#e4b9e4"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#d891d8"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#ce67ce"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#c63cc6"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#a52ba5"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#841f84"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#621562"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#3f0c3f"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#1a041a"
+        }
+      }
+    },
+    "purple": {
+      "400": {
+        "50": {
+          "$type": "color",
+          "$value": "#eedef2"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#e8d2ee"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#ddb9e7"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#d29fe2"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#c983dd"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#c067da"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#aa2dcf"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#7e1e9a"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#501162"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#210629"
+        }
+      },
+      "700": {
+        "50": {
+          "$type": "color",
+          "$value": "#cdcaec"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#bbb6e7"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#948ddd"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#6c61d5"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#4233d0"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#3023ae"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#23188b"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#181068"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#0e0842"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#05031c"
+        }
+      },
+      "800": {
+        "50": {
+          "$type": "color",
+          "$value": "#bcb5e5"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#a299dd"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#6f5fcf"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#4330b6"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#2c1e81"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#170f49"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#110a3a"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#0c062b"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#07031c"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#02010b"
+        }
+      }
+    },
+    "red": {
+      "500": {
+        "50": {
+          "$type": "color",
+          "$value": "#f6d4d2"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#f3c4c2"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#f1a19e"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#f07d79"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#f15751"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#f53028"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#db0d04"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#a30600"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#670400"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#2a0100"
+        }
+      }
+    },
+    "yellow": {
+      "100": {
+        "50": {
+          "$type": "color",
+          "$value": "#f6f3cb"
+        },
+        "100": {
+          "$type": "color",
+          "$value": "#f5f0b7"
+        },
+        "200": {
+          "$type": "color",
+          "$value": "#f3ec8d"
+        },
+        "300": {
+          "$type": "color",
+          "$value": "#f4e960"
+        },
+        "400": {
+          "$type": "color",
+          "$value": "#f8e931"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#ffec00"
+        },
+        "600": {
+          "$type": "color",
+          "$value": "#c8b900"
+        },
+        "700": {
+          "$type": "color",
+          "$value": "#928700"
+        },
+        "800": {
+          "$type": "color",
+          "$value": "#5c5500"
+        },
+        "900": {
+          "$type": "color",
+          "$value": "#262300"
+        }
+      }
+    }
+  },
+  "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": "10px",
+          "fontWeight": "400",
+          "lineHeight": "1.4"
+        }
+      }
+    },
+    "overline": {
+      "desktop": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Open Sans",
+          "fontSize": "10px",
+          "fontWeight": "500",
+          "lineHeight": "1.2"
+        }
+      },
+      "mobile": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Open Sans",
+          "fontSize": "10px",
+          "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"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "4px"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "3xl": {
+      "$type": "dimension",
+      "$value": "50px"
+    },
+    "full": {
+      "$type": "dimension",
+      "$value": "9999px"
+    }
+  },
+  "shadow": {
+    "xs": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.5)",
+        "offsetX": "0.0px",
+        "offsetY": "2.0px",
+        "blur": "4.0px",
+        "spread": "0.0px"
+      }
+    },
+    "sm": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.412)",
+        "offsetX": "0.0px",
+        "offsetY": "1.5px",
+        "blur": "7.0px",
+        "spread": "0.0px"
+      }
+    },
+    "md": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.325)",
+        "offsetX": "0.0px",
+        "offsetY": "1.0px",
+        "blur": "10.0px",
+        "spread": "0.0px"
+      }
+    },
+    "lg": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.238)",
+        "offsetX": "0.0px",
+        "offsetY": "0.5px",
+        "blur": "13.0px",
+        "spread": "0.0px"
+      }
+    },
+    "xl": {
+      "$type": "shadow",
+      "$value": {
+        "color": "rgba(0, 0, 0, 0.15)",
+        "offsetX": "0.0px",
+        "offsetY": "0.0px",
+        "blur": "16.0px",
+        "spread": "0.0px"
+      }
+    }
+  }
+}