Brand Studio

Quick Start

Inject brand context into prompts:

node scripts/inject-brand-context.cjs
node scripts/inject-brand-context.cjs --json

Validate an asset:

node scripts/validate-asset.cjs <asset-path>

Extract/compare colors:

node scripts/extract-colors.cjs --palette
node scripts/extract-colors.cjs <image-path>

Brand Sync Workflow

# 1. Edit docs/brand-guidelines.md (or use /brand update)
# 2. Sync to design tokens
node scripts/sync-brand-to-tokens.cjs
# 3. Verify
node scripts/inject-brand-context.cjs --json | head -20

Files synced:

• docs/brand-guidelines.md → Source of truth
• assets/design-tokens.json → Token definitions
• assets/design-tokens.css → CSS variables

Subcommands

References

Scripts

Templates

Routing

1. Parse subcommand from $ARGUMENTS (first word)
2. Load corresponding references/{subcommand}.md
3. Execute with remaining arguments

From brandkit-gen

Full brand kit generator. From a single prompt, produces: brand strategy + voice, color palette, typography system, logo SVG, CSS design tokens, component preview, social banners, OG image, and a brand guidelines doc. Chains brand → design-system → impeccable-frontend-design → banner-design.

BrandKit Generator

One prompt → complete brand system. Strategy, tokens, logo, components, banners, guidelines.

What Gets Generated

Phase 0 — Discovery

Collect brand context. If $ARGUMENTS is short/absent, ask:

Brand name:
Industry / product type:
Target audience:
3 personality adjectives: (e.g. "bold, minimal, human")
Competitors to NOT look like:
Reference brands you admire: (optional)
Primary use: web app / marketing site / mobile app / SaaS / consumer
Color preferences or restrictions: (optional)
Light / dark / both themes:

If $ARGUMENTS contains enough context, skip straight to Phase 1. Parse:

• brandName — the name
• industry — what it does
• audience — who for
• adjectives — personality words (default: "modern, professional, trustworthy")
• antiReferences — brands to avoid resembling
• colorHints — any color direction

Phase 1 — Brand Strategy

1. Invoke brand — Generate brand personality, archetype, tone of voice, and messaging framework based on parsed context.

1.1 Brand Personality

• 3-word essence: distill adjectives into a precise brand character
• Brand archetype: (Hero / Sage / Creator / Explorer / Rebel / etc.)
• Tone of voice: formal↔casual, serious↔playful, technical↔accessible
• What it is / is not: 3 contrasting pairs (e.g. "Precise, not pedantic")

1.2 Messaging Framework

• Tagline: 5–8 words, active, memorable
• Elevator pitch: 1 sentence, audience + value + differentiator
• Value propositions: 3 bullets, benefit-first
• Brand story hook: 2–3 sentences establishing why this exists

Phase 2 — Visual Identity System

2. Invoke design-system — Generate color palette, typography selection, and spacing/shape tokens grounded in brand personality.
3. Invoke impeccable-frontend-design — Apply visual design standards to ensure the palette, type scale, and radii meet production quality.

2.1 Color Palette

Generate a cohesive palette derived from brand personality:

Primary:    #______  (main brand color — buttons, links, accents)
Secondary:  #______  (supporting — hover states, tags, subtle backgrounds)
Accent:     #______  (highlight, CTA emphasis, special moments)
Neutral-50: #______
Neutral-100:#______
Neutral-200:#______
Neutral-700:#______
Neutral-900:#______
Success:    #______
Warning:    #______
Error:      #______

Rules:

• Primary must pass WCAG AA against white (4.5:1) for text use
• Accent should be optically distinct from Primary (>30° hue difference)
• Derive palette from a single "seed" hue then build systematic scale
• No more than 2 saturated hues in the base palette

2.2 Typography

Select 2 typefaces (all from Google Fonts, no licensing risk):

Display / Heading: ________ — [rationale tied to personality]
Body / UI:         ________ — [rationale tied to personality]
Mono (optional):   ________ — only if product is dev/technical

Scale (rem, 1.25× modular):