brand-kit-playground

/brand-kit-playground — Visual Brand Workbench

Your brand lives in markdown files. This skill renders it as a living, interactive HTML page the user opens in their browser — palette swatches, type specimens, logo lockups, and a real social card preview that updates as they tweak tokens. When they're happy, they copy the structured JSON and you write it back to brand/creative-kit.md.

This is the visual approval step in the /cmo flow. /visual-style writes the brand identity. This skill shows it.

On Activation

1. Read brand/creative-kit.md — extract the Colors, Typography, and Visual Brand Style sections.
2. If the file is template/empty: warn the user. "Your creative kit is empty — the playground will use placeholder values. Run /visual-style first for a real preview, or continue and I'll use defaults you can tweak."
3. If it has real content: proceed. Parse colors (hex values), fonts (family names), border radius, shadows, gradients.
4. Read brand/voice-profile.md — extract tone adjectives, vocabulary preferences, headline style.
5. Read brand/positioning.md — extract the primary positioning angle for the social card headline.
6. Read brand/audience.md if it exists — extract audience description for the voice snapshot panel.
7. If no brand files exist at all: proceed with sensible defaults. The playground works at L0. Show placeholder brand with a note: "These are defaults. Fill in your brand files and re-run for a real preview."

What You Build

A single self-contained HTML file with inline CSS and JS. Zero external dependencies except Google Fonts (loaded via <link>). No framework. No build step. No server.

The file is written to the project root as brand-playground.html and opened in the user's default browser via open brand-playground.html.

Layout

+-- BRAND BAR ------------------------------------------------+
|  [Logo] Project Name Brand Playground    [Light/Dark toggle] |
+--------------------------------------------------------------+
|                    |                                          |
|  CONTROLS          |  TAB: [Brand System] [Social Card] [OG] |
|  --------          |  ----------------------------------------|
|                    |                                          |
|  > Colors          |  (Brand System tab)                     |
|    Primary [pick]  |  COLOR PALETTE                          |
|    Secondary       |  ## ## ## ## ## (live swatches)          |
|    Accent          |                                         |
|                    |  TYPOGRAPHY                             |
|  > Typography      |  Display: Aa Space Grotesk              |
|    Display font    |  Body: Aa Inter Regular                 |
|    Body font       |  Mono: Aa JetBrains Mono               |
|    Scale ratio     |                                         |
|                    |  VOICE SNAPSHOT                         |
|  > Visual Style    |  Tone: confident, warm, technical       |
|    Border radius   |  Audience: indie developers             |
|    Shadow depth    |  Style: short-punchy headlines          |
|    Texture         |                                         |
|                    |  (Social Card tab)                      |
|  > Social Card     |  +---------------------------+          |
|    Headline        |  |                           |          |
|    Subhead         |  |  We just shipped          |          |
|    Badge text      |  |  dark mode                |          |
|    Layout [v]      |  |                           |          |
|    Background [v]  |  |  [logo]          [NEW]    |          |
|                    |  |                           |          |
|  > Presets         |  +---------------------------+          |
|    Launch          |  1200x675 - Twitter/X                   |
|    Blog Post       |                                         |
|    Feature         |  MULTI-PREVIEW:                         |
|                    |  [Tw] [Li] [IG] [St]                    |
+--------------------+-----------------------------------------+
|  TOKEN OUTPUT (structured JSON)              [Copy Tokens]   |
+--------------------------------------------------------------+

Three Tabs

Tab 1: Brand System — The identity overview. Color palette rendered as large swatches with hex values and contrast ratios. Typography specimens at the brand's modular scale. Logo lockups (primary, mark, on-dark) if logo paths exist in creative-kit.md. Voice snapshot showing tone, vocabulary, headline style from voice-profile.md.

Tab 2: Social Card — A live social card preview rendered with the brand tokens. The user types a headline, picks a layout variant (centered, split, overlay, minimal), chooses a background style (gradient, solid, dark, light). The card re-renders instantly. Below: a multi-preview strip showing the same card at Twitter (1200x675), LinkedIn (1200x627), Instagram (1080x1080), and Story (1080x1920) aspect ratios.

Tab 3: OG Image — Same pattern as social card but for OG images. Inputs: title, description, author, category tag. Layouts: editorial, minimal, bold. Target: 1200x630.

Controls Panel (Left Side)

Controls are grouped by concern. Each group is collapsible. Controls update the preview instantly — no "Apply" button.

| Token | Control | Range | |-------|---------|-------| | Colors (primary, secondary, accent, background, foreground) | Color picker (native <input type="color">) | Any hex | | Display font | Dropdown | 10 curated options + current brand font | | Body font | Dropdown | 10 curated options + current brand font | | Scale ratio | Slider | 1.125 (Major Second) to 1.5 (Perfect Fifth) | | Border radius | Slider | 0px to 24px | | Shadow depth | Slider | none / sm / md / lg / xl | | Social card headline | Text input | Max 60 chars | | Social card layout | Segmented buttons | Centered / Split / Overlay / Minimal | | Social card background | Dropdown | Gradient / Solid / Dark / Light |

Token Output (Bottom)

A <pre> block showing the current token state as structured JSON:

{
  "colors": {
    "primary": "#6366F1",
    "primaryForeground": "#FFFFFF",
    "secondary": "#7C3AED",
    "accent": "#F59E0B",
    "background": "#FFFFFF",
    "foreground": "#0F172A"
  },
  "typography": {
    "display": { "family": "Space Grotesk", "weights": [700, 800] },
    "body": { "family": "Inter", "weights": [400, 500, 600] },
    "scale": { "base": 16, "ratio": 1.25 }
  },
  "visual": {
    "borderRadius": "8px",
    "shadowDepth": "md",
    "texture": "none"
  }
}

A "Copy Tokens" button copies this JSON to the clipboard. The user pastes it back into the conversation. The agent reads the JSON and updates brand/creative-kit.md accordingly.

Presets

Include 3-5 presets that snap all controls to a cohesive combination:

| Preset | Vibe | Colors | Type | Visual | |--------|------|--------|------|--------| | Tech Startup | Clean, modern, confident | Indigo + violet + amber | Space Grotesk + Inter | 8px radius, md shadow | | Indie Maker | Warm, approachable, fun | Coral + teal + gold | Instrument Serif + DM Sans | 12px radius, lg shadow | | Enterprise | Precise, authoritative, refined | Navy + slate + emerald | General Sans + IBM Plex | 4px radius, sm shadow | | Creative Studio | Bold, expressive, artistic | Hot pink + lime + black | Space Grotesk + Syne | 0px radius, none shadow | | From Brand | Current creative-kit.md values | (extracted) | (extracted) | (extracted) |

The "From Brand" preset is always first and always selected on load. It represents the current brand state. Other presets are for exploration.

How You Generate It

Step 1: Extract Tokens

Parse brand/creative-kit.md into structured data. Look for:

• Colors section: hex values for primary, secondary, accent. If not found, derive from the first hex codes mentioned anywhere in the file.
• **Typography