brand-kit-playground

Files (3)

• SKILL.md
• html-architecture.md · references/
• steal-patterns.md · references/

SKILL.md (first lines)

# /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.
   - 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."
   - If it has real content: proceed. Parse colors (hex values), fonts (family names), border radius, shadows, gradients.
2. Read `brand/voice-profile.md` — extract tone adjectives, vocabulary preferences, headline style.
3. Read `brand/positioning.md` — extract the primary positioning angle for the social card headline.
4. Read `brand/audience.md` if it exists — extract audience description for the voice snapshot panel.
5. 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:

```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"
  }
}
```

From MoizIbnYousaf/marketing-cli, MIT.

More from MoizIbnYousaf/marketing-cli