get-shit-pretty 0.7.4 → 0.8.2

package/gsp/skills/gsp-style/styles/professional.yml

@@ -4,18 +4,44 @@ tags: [business, neutral, clean, safe, default]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FFFFFF"
+    foreground: "#0F172A"
+    card: "#F8FAFC"
+    card-foreground: "#0F172A"
+    popover: "#F8FAFC"
+    popover-foreground: "#0F172A"
     primary: "#1E40AF"
+    primary-foreground: "#FFFFFF"
     secondary: "#475569"
+    secondary-foreground: "#FFFFFF"
     accent: "#0EA5E9"
-    background: "#FFFFFF"
-    surface: "#F8FAFC"
-    on-primary: "#FFFFFF"
-    on-background: "#0F172A"
-    error: "#DC2626"
+    accent-foreground: "#FFFFFF"
+    muted: "#94A3B8"
+    muted-foreground: "#64748B"
+    destructive: "#DC2626"
+    border: "#E2E8F0"
+    input: "#E2E8F0"
+    ring: "#1E40AF"
+    # Sidebar
+    sidebar: "#F8FAFC"
+    sidebar-foreground: "#0F172A"
+    sidebar-primary: "#1E40AF"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#E2E8F0"
+    sidebar-accent-foreground: "#0F172A"
+    sidebar-border: "#E2E8F0"
+    sidebar-ring: "#1E40AF"
+    # Extras
     success: "#16A34A"
     warning: "#D97706"
     info: "#2563EB"
-    muted: "#94A3B8"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#1E40AF"  # navy blue (primary)
+    chart-2: "#0EA5E9"  # sky blue (accent)
+    chart-3: "#16A34A"  # business green
+    chart-4: "#D97706"  # muted amber
+    chart-5: "#6B7280"  # steel gray
 
   typography:
     font-family-primary: "Inter, system-ui, sans-serif"
@@ -30,7 +56,6 @@ tokens:
     border-radius-md: "8px"
     border-radius-lg: "12px"
     border-width: "1px"
-    border-color: "#E2E8F0"
 
   elevation:
     shadow-sm: "0 1px 2px rgba(0, 0, 0, 0.05)"
@@ -50,10 +75,16 @@ tokens:
 dark_mode:
   color:
     background: "#0F172A"
-    surface: "#1E293B"
-    on-background: "#F1F5F9"
-    border-color: "#334155"
+    foreground: "#F1F5F9"
+    card: "#1E293B"
+    card-foreground: "#F1F5F9"
     muted: "#64748B"
+    muted-foreground: "#94A3B8"
+    border: "#334155"
+    input: "#334155"
+    sidebar: "#1E293B"
+    sidebar-foreground: "#F1F5F9"
+    sidebar-border: "#334155"
 
 intensity:
   variance: 2

package/gsp/skills/gsp-style/styles/retro.yml

@@ -4,17 +4,44 @@ tags: [vintage, retro, nostalgic, 90s, windows95]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#C0C0C0"
+    foreground: "#000000"
+    card: "#FFFFFF"
+    card-foreground: "#000000"
+    popover: "#FFFFFF"
+    popover-foreground: "#000000"
     primary: "#0000FF"
+    primary-foreground: "#FFFFFF"
     secondary: "#FF0000"
+    secondary-foreground: "#FFFFFF"
     accent: "#FFFF00"
-    background: "#C0C0C0"
-    surface: "#FFFFFF"
-    on-primary: "#FFFFFF"
-    on-background: "#000000"
-    error: "#FF0000"
+    accent-foreground: "#000000"
+    muted: "#808080"
+    muted-foreground: "#404040"
+    destructive: "#FF0000"
+    border: "#808080"
+    input: "#808080"
+    ring: "#0000FF"
+    # Sidebar
+    sidebar: "#FFFFFF"
+    sidebar-foreground: "#000000"
+    sidebar-primary: "#0000FF"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#C0C0C0"
+    sidebar-accent-foreground: "#000000"
+    sidebar-border: "#808080"
+    sidebar-ring: "#0000FF"
+    # Extras
     success: "#00FF00"
     warning: "#FFFF00"
     info: "#0000FF"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#0000FF"  # Web-safe blue (primary)
+    chart-2: "#FF0000"  # Web-safe red (secondary)
+    chart-3: "#008000"  # Web-safe green
+    chart-4: "#800080"  # Web-safe purple
+    chart-5: "#FF8000"  # Web-safe orange
 
   system:
     titlebar: "#000080"
@@ -34,7 +61,6 @@ tokens:
     border-radius-md: "0px"
     border-radius-lg: "0px"
     border-width: "2px"
-    border-color: "#808080"
 
   bevel:
     outset: "border-color: #ffffff #808080 #808080 #ffffff"
@@ -58,8 +84,16 @@ tokens:
 dark_mode:
   color:
     background: "#000080"
-    surface: "#000000"
-    on-background: "#C0C0C0"
+    foreground: "#C0C0C0"
+    card: "#000000"
+    card-foreground: "#C0C0C0"
+    muted: "#404040"
+    muted-foreground: "#808080"
+    border: "#808080"
+    input: "#808080"
+    sidebar: "#000000"
+    sidebar-foreground: "#C0C0C0"
+    sidebar-border: "#808080"
 
 intensity:
   variance: 8     # chaotic layouts, clashing colors, deliberate visual excess

package/gsp/skills/gsp-style/styles/saas.yml

@@ -4,18 +4,44 @@ tags: [saas, startup, modern, clean, gradient]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FFFFFF"
+    foreground: "#0F172A"
+    card: "#F8FAFC"
+    card-foreground: "#0F172A"
+    popover: "#F8FAFC"
+    popover-foreground: "#0F172A"
     primary: "#0052FF"
+    primary-foreground: "#FFFFFF"
     secondary: "#4D7CFF"
+    secondary-foreground: "#FFFFFF"
     accent: "#F1F5F9"
-    background: "#FFFFFF"
-    surface: "#F8FAFC"
-    on-primary: "#FFFFFF"
-    on-background: "#0F172A"
-    error: "#EF4444"
+    accent-foreground: "#0F172A"
+    muted: "#64748B"
+    muted-foreground: "#94A3B8"
+    destructive: "#EF4444"
+    border: "#E2E8F0"
+    input: "#E2E8F0"
+    ring: "#0052FF"
+    # Sidebar
+    sidebar: "#F8FAFC"
+    sidebar-foreground: "#0F172A"
+    sidebar-primary: "#0052FF"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#F1F5F9"
+    sidebar-accent-foreground: "#0F172A"
+    sidebar-border: "#E2E8F0"
+    sidebar-ring: "#0052FF"
+    # Extras
     success: "#10B981"
     warning: "#F59E0B"
     info: "#0052FF"
-    muted: "#64748B"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#0052FF"  # electric blue (primary)
+    chart-2: "#10B981"  # emerald (success)
+    chart-3: "#F59E0B"  # amber (warning)
+    chart-4: "#8B5CF6"  # growth violet
+    chart-5: "#EF4444"  # churn red
 
   typography:
     font-family-primary: "Calistoga, serif"
@@ -31,7 +57,6 @@ tokens:
     border-radius-md: "12px"
     border-radius-lg: "9999px"
     border-width: "1px"
-    border-color: "#E2E8F0"
 
   gradient:
     signature: "linear-gradient(135deg, #0052FF, #4D7CFF)"
@@ -54,8 +79,16 @@ tokens:
 dark_mode:
   color:
     background: "#0F172A"
-    surface: "#1E293B"
-    on-background: "#F1F5F9"
+    foreground: "#F1F5F9"
+    card: "#1E293B"
+    card-foreground: "#F1F5F9"
+    muted: "#64748B"
+    muted-foreground: "#94A3B8"
+    border: "#334155"
+    input: "#334155"
+    sidebar: "#1E293B"
+    sidebar-foreground: "#F1F5F9"
+    sidebar-border: "#334155"
 
 intensity:
   variance: 4     # structured layouts with strategic asymmetry (hero 1.1fr/0.9fr), not chaotic

package/gsp/skills/gsp-style/styles/sketch.yml

@@ -4,18 +4,44 @@ tags: [hand-drawn, sketch, artistic, doodle, whimsical]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FDFBF7"
+    foreground: "#2D2D2D"
+    card: "#FFFDF7"
+    card-foreground: "#2D2D2D"
+    popover: "#FFFDF7"
+    popover-foreground: "#2D2D2D"
     primary: "#2D3748"
+    primary-foreground: "#FFFFFF"
     secondary: "#2D5DA1"
+    secondary-foreground: "#FFFFFF"
     accent: "#FF4D4D"
-    background: "#FDFBF7"
-    surface: "#FFFDF7"
-    on-primary: "#FFFFFF"
-    on-background: "#2D2D2D"
-    error: "#FF4D4D"
+    accent-foreground: "#FFFFFF"
+    muted: "#718096"
+    muted-foreground: "#4A5568"
+    destructive: "#FF4D4D"
+    border: "#2D3748"
+    input: "#2D3748"
+    ring: "#2D3748"
+    # Sidebar
+    sidebar: "#FFFDF7"
+    sidebar-foreground: "#2D2D2D"
+    sidebar-primary: "#2D3748"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#FF4D4D"
+    sidebar-accent-foreground: "#FFFFFF"
+    sidebar-border: "#2D3748"
+    sidebar-ring: "#2D3748"
+    # Extras
     success: "#48BB78"
     warning: "#ED8936"
     info: "#2D5DA1"
-    muted: "#718096"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#2D3748"  # pencil dark (primary)
+    chart-2: "#FF4D4D"  # correction red (accent)
+    chart-3: "#2D5DA1"  # ink blue (secondary)
+    chart-4: "#48BB78"  # watercolor green
+    chart-5: "#ED8936"  # watercolor orange
 
   typography:
     font-family-primary: "Kalam, cursive"
@@ -31,7 +57,6 @@ tokens:
     border-radius-md: "8px 12px 10px 14px"
     border-radius-lg: "12px 16px 14px 18px"
     border-width: "2px"
-    border-color: "#2D3748"
 
   elevation:
     shadow-sm: "2px 2px 0px #2D3748"
@@ -51,8 +76,16 @@ tokens:
 dark_mode:
   color:
     background: "#1A1A2E"
-    surface: "#2D2D48"
-    on-background: "#FDFBF7"
+    foreground: "#FDFBF7"
+    card: "#2D2D48"
+    card-foreground: "#FDFBF7"
+    muted: "#4A5568"
+    muted-foreground: "#718096"
+    border: "#FDFBF7"
+    input: "#FDFBF7"
+    sidebar: "#2D2D48"
+    sidebar-foreground: "#FDFBF7"
+    sidebar-border: "#FDFBF7"
 
 intensity:
   variance: 8     # wobbly borders, random rotations, asymmetric radii, tape/tack decorations

package/gsp/skills/gsp-style/styles/swiss-minimalist.yml

@@ -4,18 +4,44 @@ tags: [clean, grid, typographic, classic, professional]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#FFFFFF"
+    foreground: "#111111"
+    card: "#FAFAFA"
+    card-foreground: "#111111"
+    popover: "#FAFAFA"
+    popover-foreground: "#111111"
     primary: "#000000"
+    primary-foreground: "#FFFFFF"
     secondary: "#DC2626"
+    secondary-foreground: "#FFFFFF"
     accent: "#2563EB"
-    background: "#FFFFFF"
-    surface: "#FAFAFA"
-    on-primary: "#FFFFFF"
-    on-background: "#111111"
-    error: "#DC2626"
+    accent-foreground: "#FFFFFF"
+    muted: "#6B7280"
+    muted-foreground: "#4B5563"
+    destructive: "#DC2626"
+    border: "#E5E7EB"
+    input: "#E5E7EB"
+    ring: "#000000"
+    # Sidebar
+    sidebar: "#FAFAFA"
+    sidebar-foreground: "#111111"
+    sidebar-primary: "#000000"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#2563EB"
+    sidebar-accent-foreground: "#FFFFFF"
+    sidebar-border: "#E5E7EB"
+    sidebar-ring: "#000000"
+    # Extras
     success: "#16A34A"
     warning: "#CA8A04"
     info: "#2563EB"
-    muted: "#6B7280"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#000000"  # Swiss black (primary)
+    chart-2: "#DC2626"  # Helvetica red (secondary)
+    chart-3: "#2563EB"  # grid blue (accent)
+    chart-4: "#16A34A"  # functional green
+    chart-5: "#CA8A04"  # warm ochre
 
   typography:
     font-family-primary: "Helvetica Neue, Helvetica, Arial, sans-serif"
@@ -30,7 +56,6 @@ tokens:
     border-radius-md: "0px"
     border-radius-lg: "0px"
     border-width: "1px"
-    border-color: "#E5E7EB"
 
   elevation:
     shadow-sm: "none"
@@ -50,10 +75,16 @@ tokens:
 dark_mode:
   color:
     background: "#111111"
-    surface: "#1A1A1A"
-    on-background: "#F5F5F5"
-    border-color: "#333333"
+    foreground: "#F5F5F5"
+    card: "#1A1A1A"
+    card-foreground: "#F5F5F5"
     muted: "#9CA3AF"
+    muted-foreground: "#6B7280"
+    border: "#333333"
+    input: "#333333"
+    sidebar: "#1A1A1A"
+    sidebar-foreground: "#F5F5F5"
+    sidebar-border: "#333333"
 
 intensity:
   variance: 2     # strict grid law, asymmetric but mathematically precise

package/gsp/skills/gsp-style/styles/terminal.yml

@@ -4,18 +4,44 @@ tags: [developer, monospace, dark, minimal, technical]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#0D1117"
+    foreground: "#C9D1D9"
+    card: "#161B22"
+    card-foreground: "#C9D1D9"
+    popover: "#161B22"
+    popover-foreground: "#C9D1D9"
     primary: "#22C55E"
+    primary-foreground: "#000000"
     secondary: "#3B82F6"
+    secondary-foreground: "#000000"
     accent: "#F59E0B"
-    background: "#0D1117"
-    surface: "#161B22"
-    on-primary: "#000000"
-    on-background: "#C9D1D9"
-    error: "#F85149"
+    accent-foreground: "#000000"
+    muted: "#8B949E"
+    muted-foreground: "#6E7681"
+    destructive: "#F85149"
+    border: "#30363D"
+    input: "#30363D"
+    ring: "#22C55E"
+    # Sidebar
+    sidebar: "#161B22"
+    sidebar-foreground: "#C9D1D9"
+    sidebar-primary: "#22C55E"
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#21262D"
+    sidebar-accent-foreground: "#C9D1D9"
+    sidebar-border: "#30363D"
+    sidebar-ring: "#22C55E"
+    # Extras
     success: "#3FB950"
     warning: "#D29922"
     info: "#58A6FF"
-    muted: "#8B949E"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#22C55E"  # terminal green (primary)
+    chart-2: "#58A6FF"  # terminal blue
+    chart-3: "#D29922"  # terminal amber
+    chart-4: "#FF7B72"  # syntax keyword red
+    chart-5: "#D2A8FF"  # syntax function purple
 
   syntax:
     keyword: "#FF7B72"
@@ -38,7 +64,6 @@ tokens:
     border-radius-md: "6px"
     border-radius-lg: "8px"
     border-width: "1px"
-    border-color: "#30363D"
 
   elevation:
     shadow-sm: "0 1px 3px rgba(0, 0, 0, 0.3)"
@@ -58,7 +83,16 @@ tokens:
 dark_mode:
   color:
     background: "#010409"
-    surface: "#0D1117"
+    foreground: "#C9D1D9"
+    card: "#0D1117"
+    card-foreground: "#C9D1D9"
+    muted: "#8B949E"
+    muted-foreground: "#6E7681"
+    border: "#21262D"
+    input: "#21262D"
+    sidebar: "#0D1117"
+    sidebar-foreground: "#C9D1D9"
+    sidebar-border: "#21262D"
 
 intensity:
   variance: 3     # rigid character grid, tmux-like splits, uniform pane structure

package/gsp/skills/gsp-style/styles/vaporwave.yml

@@ -4,17 +4,44 @@ tags: [retro, pastel, expressive, nostalgic, gradient]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#1A0533"
+    foreground: "#E8D5FF"
+    card: "#2D1B4E"
+    card-foreground: "#E8D5FF"
+    popover: "#2D1B4E"
+    popover-foreground: "#E8D5FF"
     primary: "#FF71CE"
+    primary-foreground: "#FFFFFF"
     secondary: "#01CDFE"
+    secondary-foreground: "#FFFFFF"
     accent: "#B967FF"
-    background: "#1A0533"
-    surface: "#2D1B4E"
-    on-primary: "#FFFFFF"
-    on-background: "#E8D5FF"
-    error: "#FF6B6B"
+    accent-foreground: "#FFFFFF"
+    muted: "#4A3566"
+    muted-foreground: "#A78BCA"
+    destructive: "#FF6B6B"
+    border: "rgba(255, 113, 206, 0.3)"
+    input: "rgba(255, 113, 206, 0.3)"
+    ring: "#FF71CE"
+    # Sidebar
+    sidebar: "#2D1B4E"
+    sidebar-foreground: "#E8D5FF"
+    sidebar-primary: "#FF71CE"
+    sidebar-primary-foreground: "#FFFFFF"
+    sidebar-accent: "#B967FF"
+    sidebar-accent-foreground: "#FFFFFF"
+    sidebar-border: "rgba(255, 113, 206, 0.3)"
+    sidebar-ring: "#FF71CE"
+    # Extras
     success: "#05FFA1"
     warning: "#FFE66D"
     info: "#01CDFE"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#FF71CE"  # vaporwave pink (primary)
+    chart-2: "#01CDFE"  # vaporwave cyan (secondary)
+    chart-3: "#B967FF"  # vaporwave purple (accent)
+    chart-4: "#05FFA1"  # vaporwave mint (success)
+    chart-5: "#FFE66D"  # vaporwave yellow
 
   typography:
     font-family-primary: "Space Grotesk, sans-serif"
@@ -30,7 +57,6 @@ tokens:
     border-radius-md: "12px"
     border-radius-lg: "20px"
     border-width: "2px"
-    border-color: "rgba(255, 113, 206, 0.3)"
 
   elevation:
     shadow-sm: "0 4px 12px rgba(185, 103, 255, 0.15)"
@@ -55,7 +81,16 @@ tokens:
 dark_mode:
   color:
     background: "#0D0019"
-    surface: "#1A0533"
+    foreground: "#E8D5FF"
+    card: "#1A0533"
+    card-foreground: "#E8D5FF"
+    muted: "#3D2660"
+    muted-foreground: "#A78BCA"
+    border: "rgba(255, 113, 206, 0.2)"
+    input: "rgba(255, 113, 206, 0.2)"
+    sidebar: "#1A0533"
+    sidebar-foreground: "#E8D5FF"
+    sidebar-border: "rgba(255, 113, 206, 0.2)"
 
 intensity:
   variance: 7     # skewed buttons, rotated icon diamonds, perspective grids, alternating timelines

package/gsp/skills/gsp-style/styles/web3.yml

@@ -4,18 +4,44 @@ tags: [web3, crypto, blockchain, defi, dark]
 
 tokens:
   color:
+    # Core — shadcn/ui CSS vars
+    background: "#030304"
+    foreground: "#FFFFFF"
+    card: "#0F1115"
+    card-foreground: "#FFFFFF"
+    popover: "#0F1115"
+    popover-foreground: "#FFFFFF"
     primary: "#F7931A"
+    primary-foreground: "#000000"
     secondary: "#EA580C"
+    secondary-foreground: "#000000"
     accent: "#FFD600"
-    background: "#030304"
-    surface: "#0F1115"
-    on-primary: "#000000"
-    on-background: "#FFFFFF"
-    error: "#EF4444"
+    accent-foreground: "#000000"
+    muted: "#94A3B8"
+    muted-foreground: "#64748B"
+    destructive: "#EF4444"
+    border: "rgba(247,147,26,0.3)"
+    input: "rgba(247,147,26,0.3)"
+    ring: "#F7931A"
+    # Sidebar
+    sidebar: "#0F1115"
+    sidebar-foreground: "#FFFFFF"
+    sidebar-primary: "#F7931A"
+    sidebar-primary-foreground: "#000000"
+    sidebar-accent: "#FFD600"
+    sidebar-accent-foreground: "#000000"
+    sidebar-border: "rgba(247,147,26,0.3)"
+    sidebar-ring: "#F7931A"
+    # Extras
     success: "#10B981"
     warning: "#F7931A"
     info: "#3B82F6"
-    muted: "#94A3B8"
+    # Chart — data-viz colors (distinct, accessible at small sizes)
+    chart-1: "#F7931A"  # Bitcoin orange (primary)
+    chart-2: "#3B82F6"  # blockchain blue
+    chart-3: "#10B981"  # DeFi green (success)
+    chart-4: "#FFD600"  # gold accent
+    chart-5: "#A855F7"  # Ethereum purple
 
   typography:
     font-family-primary: "Space Grotesk, sans-serif"
@@ -31,7 +57,6 @@ tokens:
     border-radius-md: "8px"
     border-radius-lg: "9999px"
     border-width: "1px"
-    border-color: "rgba(247,147,26,0.3)"
 
   glass:
     backdrop-blur: "12px"
@@ -58,8 +83,16 @@ tokens:
 dark_mode:
   color:
     background: "#030304"
-    surface: "#0F1115"
-    on-background: "#FFFFFF"
+    foreground: "#FFFFFF"
+    card: "#0F1115"
+    card-foreground: "#FFFFFF"
+    muted: "#94A3B8"
+    muted-foreground: "#64748B"
+    border: "rgba(247,147,26,0.3)"
+    input: "rgba(247,147,26,0.3)"
+    sidebar: "#0F1115"
+    sidebar-foreground: "#FFFFFF"
+    sidebar-border: "rgba(247,147,26,0.3)"
 
 intensity:
   variance: 5     # asymmetric pricing scale, corner border accents, but grid-disciplined overall

package/gsp/templates/branding/brief.md

@@ -55,6 +55,9 @@
 
 ## Brand Essence
 
+### Emotional Compass
+- **brand_heartbeat:** {one evocative sentence — the feeling this brand leaves, specific enough to be wrong}
+
 ### Promise
 - **Core promise:** {whenever someone interacts with this brand, they should feel X}
 - **Functional promise:** {what it delivers — saves time, reduces complexity, etc.}
@@ -77,6 +80,12 @@
 - **What sets you apart?** {DIFFERENTIATORS}
 - **Brands admired:** {BRANDS}
 
+## Visual Direction
+- **Mood / aesthetic:** {raw descriptors — e.g. "cinematographic, dark, expensive" / "clean, airy, typographic" / "warm brutalist"}
+- **Reference links:** {image URLs, websites, or brand references that capture the feeling}
+- **Texture / atmosphere:** {grain, glass, gradients, flat, photography, illustration, etc.}
+- **Anti-patterns:** {what it should NEVER look like visually}
+
 ## Inspiration
 - **Styles liked:** {STYLES}
 - **Styles to avoid:** {AVOID}

package/gsp/templates/branding/config.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.4",
+  "version": "0.8.2",
   "project_type": "brand",
   "brand": {
     "name": "",

package/gsp/templates/design-claude.md

@@ -0,0 +1,6 @@
+# Design Context
+> Auto-maintained by GSP pipeline.
+
+## Brands
+
+## Projects

package/gsp/templates/phases/patterns.md

@@ -26,7 +26,7 @@
 
 | File | Content |
 |------|---------|
-| `{brand-name}.yml` | **Single source of truth.** The brand's aesthetic in GSP preset format: tokens + intensity + patterns + constraints + effects + dark_mode. Inherits from `style_base` preset, overrides brand-specific values. The builder generates CSS variables from this at build time using `references/token-mapping.md`. |
+| `{brand-name}.yml` | **Single source of truth.** The brand's aesthetic in GSP preset format: tokens + intensity + patterns + constraints + effects + dark_mode. Inherits from `style_base` preset, overrides brand-specific values. Token names map 1:1 to shadcn/ui CSS vars. Run `node bin/theme-css.js {brand-name}.yml` to generate the `:root`/`.dark` CSS block. |
 | `STYLE.md` | **Agent contract.** The single document designer and builder agents consume. Rendered from the `.yml` + brand philosophy (from strategy) + bold bets (from identity's most distinctive choices) + implementation patterns (from preset `.md` companion). Follows `templates/phases/style.md` format. |
 | `guidelines.html` | **User-visible brand guide.** Self-contained HTML with embedded CSS. Shows the brand using its own tokens: color swatches, type scale in actual fonts, component previews, spacing/elevation vis, constraints. Open in browser. |
 
@@ -34,7 +34,7 @@
 
 Component output is library-aware:
 
-1. **`token-mapping.md`** (always) — brand tokens → component library theming API. Complete, copy-paste-ready config. See `references/token-mapping.md` for the CSS generation spec.
+1. **`token-mapping.md`** (always) — brand tokens → component library theming API. Complete, copy-paste-ready config. Generate the CSS block with `node bin/theme-css.js {brand-name}.yml` — outputs OKLCH `:root`/`.dark` with all shadcn vars.
 2. **Override specs** (selective) — one file per library component needing treatment beyond tokens. Singular kebab-case naming.
 3. **Custom component specs** (selective) — one file per brand-distinctive component with no library equivalent. Includes: states, anatomy, usage rules, accessibility spec, code hints.