/brand-kit

description: "Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, component tokens, and Figma styles."
argument-hint: "[brand color(s)] [brand name] [mood: professional, playful, bold, minimal]"
allowed-tools: ["Read", "Write", "Edit", "Bash", "Glob", "Grep", "mcp__*"]

/brand-kit

You are generating a **complete brand kit** from minimal inputs (1-2 colors and optionally a brand name/mood). The output includes a color system, typography scale, spacing system, component tokens, and optionally Figma styles.

Input: **$ARGUMENTS**

Read `${CLAUDE_PLUGIN_ROOT}/skills/design/references/design-system-lead.md` for token architecture and `${CLAUDE_PLUGIN_ROOT}/skills/design/references/ui-designer.md` for visual design principles.

Process

0. Load Project Context (v5)

Before parsing inputs, check for `.naksha/project.json` (search up to 3 directory levels):

**If found**, read v5 constraints to inform generation:

• `constraints.grid` → use as the base unit for all generated spacing tokens. If `"8px"`, every spacing value is a multiple of 8.
• `constraints.dark_mode` → if `false`, omit dark mode token variants. If `true`, dark mode is required. If absent, include as optional.
• `constraints.accessibility_target` → if `"WCAG AAA"`, ensure all generated color combinations achieve ≥ 7:1 contrast. Default to WCAG AA (4.5:1).
• `constraints.out_of_scope` → if an excluded item would normally be part of the brand kit (e.g., dark mode tokens, icon set), skip it silently and note the exclusion.
• `component_patterns` → if named patterns exist, ensure the generated component tokens (button, card, input radii/padding) match the recorded descriptions. Note any intentional divergences.

**If v5 constraints conflict with the user's explicit request** (e.g., user asks for dark mode but `dark_mode: false`): generate what the user asked for, but add a note: "⚠ Note: project memory has `dark_mode: false`. Update via `/naksha-remember` if this decision has changed."

**If no project found**: continue with defaults.

**After generating**, emit memory update blocks for constraints implied by brand decisions:

• Mood `"professional"` or `"minimal"` with no existing `accessibility_target` → emit: `constraints.accessibility_target = "WCAG AA"`
• Spacing system generated with a specific base unit → if no `constraints.grid` exists, emit: `constraints.grid = "{base unit}"`

1. Parse Inputs

Extract from the user's request:

• **Primary color**: The main brand color (hex, rgb, or named color)
• **Secondary color** (optional): A complementary or accent color
• **Brand name** (optional): Used in generated assets
• **Mood** (optional): professional, playful, bold, minimal, premium, warm, cool, tech
• **Industry** (optional): Inferred from name or context

If only one color is provided, generate the secondary color algorithmically.

2. Generate Color System

Primary Palette (10 shades)

From the primary color, generate a full shade scale:

primary-50:  lightest tint (98% lightness)
primary-100: very light tint (95%)
primary-200: light tint (90%)
primary-300: medium-light (80%)
primary-400: medium (65%)
primary-500: THE PRIMARY COLOR (base)
primary-600: medium-dark (45%)
primary-700: dark (35%)
primary-800: very dark (25%)
primary-900: darkest (15%)
primary-950: near-black (8%)

Secondary/Accent Palette

If no secondary color given, derive one:

• **Complementary**: 180° hue rotation → bold contrast
• **Analogous**: 30° hue rotation → harmonious
• **Triadic**: 120° hue rotation → vibrant

Choose based on mood:

• Professional → Complementary (muted)
• Playful → Triadic
• Bold → Complementary (saturated)
• Minimal → Analogous (desaturated)

Generate the same 10-shade scale for secondary.

Semantic Colors

success:  green spectrum (#10B981 default, adjust to complement brand)
warning:  amber spectrum (#F59E0B default)
error:    red spectrum (#EF4444 default)
info:     blue spectrum (#3B82F6 default, or use primary if primary is blue)

Neutral Palette

Derive neutrals from the primary color:

• Mix primary at 3-5% into a pure gray scale
• This gives neutrals a subtle brand warmth/coolness

neutral-50 through neutral-950 (with brand tint)

Surface Colors

background:      neutral-50 (light mode) / neutral-950 (dark mode)
surface:         white (light) / neutral-900 (dark)
surface-raised:  white with shadow (light) / neutral-800 (dark)
border:          neutral-200 (light) / neutral-700 (dark)
text-primary:    neutral-900 (light) / neutral-50 (dark)
text-secondary:  neutral-600 (light) / neutral-400 (dark)
text-muted:      neutral-400 (light) / neutral-600 (dark)

3. Generate Typography Scale

Based on mood, select a font pairing:

| Mood | Heading Font | Body Font | |------|-------------|-----------| | Professional | Inter, IBM Plex Sans | Inter, System UI | | Playful | Nunito, Poppins | Nunito, Inter | | Bold | Montserrat, Space Grotesk | Inter, DM Sans | | Minimal | Inter, Helvetica Neue | Inter, System UI | | Premium | Playfair Display, Fraunces | Inter, Source Sans 3 | | Tech | JetBrains Mono, Space Mono | Inter, IBM Plex Sans |

Type Scale (Tailwind defaults)

text-xs:    12px / 16px (0.75rem)
text-sm:    14px / 20px (0.875rem)
text-base:  16px / 24px (1rem)
text-lg:    18px / 28px (1.125rem)
text-xl:    20px / 28px (1.25rem)
text-2xl:   24px / 32px (1.5rem)
text-3xl:   30px / 36px (1.875rem)
text-4xl:   36px / 40px (2.25rem)
text-5xl:   48px / 48px (3rem)

Font Weights

light:      300
regular:    400
medium:     500
semibold:   600
bold:       700

4. Generate Spacing System

8px base grid:

spacing-0:   0px
spacing-0.5: 2px
spacing-1:   4px
spacing-1.5: 6px
spacing-2:   8px
spacing-3:   12px
spacing-4:   16px
spacing-5:   20px
spacing-6:   24px
spacing-8:   32px
spacing-10:  40px
spacing-12:  48px
spacing-16:  64px
spacing-20:  80px
spacing-24:  96px

5. Generate