branding

Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.

---
name: branding
description: "Use this skill whenever the user needs to define the visual identity of an app, website, or product. This is stage 2 of the development pipeline, sitting between Product Design and Architect. Trigger when the user says 'branding', 'design the look', 'colour scheme', 'colour palette', 'logo', 'visual identity', 'design system', 'what should it look like', 'fonts', 'UI style', 'make it look good', or when handing off from a completed Product Design Brief. Always run this before the Architect stage so visual decisions are locked before technical decisions are made."
---

# Branding Skill

You are running the **Branding** stage — stage 2 of the development pipeline. You have a product idea from the Product Design Brief. Your job now is to define how it looks and feels — the visual identity that users will experience. This stage produces four outputs: generated logo prompts to take to ChatGPT/DALL-E, a written design brief, a code-ready Python design system, and an HTML design preview that visualises the entire brand in context.

Good visual design isn't decoration. For consumer-facing apps it directly affects whether people trust, enjoy, and keep using the product. Get this right before the Architect starts making technical decisions, so the Coding stage has real values to build with.

---

## The Design Conversation

Work through these areas conversationally — don't fire all questions at once. Listen to the answers and let them inform each other. A well-chosen word from the user about personality often unlocks the entire colour direction.

### 1. Personality & Tone

Start here. Everything else flows from this.

- If this app were a person, how would you describe them? (e.g. friendly and casual, authoritative and professional, playful and energetic, calm and trustworthy)
- What three words should a user feel when they first open it?
- What's the opposite of how you want it to feel? (Knowing what you *don't* want is just as useful)

### 2. Target Audience

Visual language that works for a 22-year-old fitness enthusiast is completely different from what works for a 45-year-old accountant.

- Who is using this? Age range, lifestyle, context?
- Where will they typically use it — phone on the go, desktop at work, tablet at home?
- Are they expecting something that feels consumer-polished, or professional/enterprise?

### 3. References & Inspiration

- Are there any apps, websites, or brands whose visual style you admire — even outside your space? (This is the fastest way to align on direction)
- Any colours, styles, or aesthetics you definitely want to avoid?
- Any competitors in this space whose design you want to deliberately differentiate from?

### 4. Practical Constraints

- Is this primarily a mobile app, desktop app, or web app? (Affects typography scale, touch targets, layout)
- Will there be a logo mark (icon/symbol), a wordmark (just the name styled), or both?
- Are there any existing brand elements to work with, or is this a clean slate?

---

## Visual Direction

Based on the conversation, make concrete recommendations across these areas. Be decisive — give a clear recommendation with reasoning, then offer an alternative if there's a genuine close call.

### Colour Palette

Define a 7-colour palette covering primary brand colours and the supporting greyscale needed for real UI work:

- **Primary** — the dominant brand colour, used for key UI elements, buttons, headers
- **Secondary** — supports the primary, used for accents, highlights, secondary actions
- **Background** — the main surface colour (not necessarily white)
- **Text** — primary text colour (ensure 4.5:1 contrast ratio against background minimum)
- **Muted** — secondary text, captions, placeholders, subtle labels
- **White / Cards** — surface colour for cards, modals, raised elements
- **Border** — subtle dividers, input borders, card outlines

For each colour provide the hex code, a short evocative name (e.g. "Career Blue", "Ach