v1.0.0 to v1.0.0

---

name: brand-dna

description: "Extract brand identity from a website URL — voice, colors, typography, imagery, values, and target audience — into a structured brand-profile.json. The profile feeds downstream skills (seo-content-writer, email-composer, frontend-design, pro-deck-builder, cross-platform-audit) for brand-consistent output. Use when the user says brand DNA, brand profile, extract brand, analyze brand, brand voice, brand identity, brand colors, or brand style guide."

license: MIT

origin: custom

author: Rebecca Rae Barton

author_url: https://github.com/thatrebeccarae

metadata:

version: 1.0.0

category: strategy

domain: brand-identity

updated: 2026-03-16

---

# Brand DNA — Brand Identity Extractor

Extracts brand identity from a website and produces a structured `brand-profile.json` that other skills can consume for brand-consistent output.

## Quick Reference

| Command | What It Does |

|---------|-------------|

| "Extract brand DNA from https://example.com" | Full extraction → `brand-profile.json` |

| "Quick brand profile for https://example.com" | Homepage-only extraction (faster, lower confidence) |

## Zero Dependencies

This skill uses only the WebFetch tool — no Python scripts, no Playwright, no external APIs. It works anywhere Claude Code runs.

## Extraction Process

### Step 1: Collect URL

If the user hasn't provided a URL, ask:

> "What website URL should I analyze? (e.g., https://yoursite.com)"

### Step 2: Fetch Pages

Use the **WebFetch tool** to retrieve page content. For each URL, request:

- All visible text content

- Full contents of `<style>` blocks

- Inline `style=` attributes

- `<meta>` tags (especially `og:image`, `description`)

- Google Fonts `@import` URLs

- Any `<link>` tags referencing external stylesheets

**Fetch order:**

1. **Homepage** (`<url>`)

2. **About page** — try `<url>/about`, then `/about-us`, then `/our-story`

3. **Product/Services page** — try `<url>/products`, then `/product`, then `/services`

**Quick mode:** If the user requests a quick extraction, fetch homepage only — skip pages 2 and 3.

If a secondary page returns 404 or redirects to homepage, continue with fewer pages and note reduced confidence.

### Step 3: Extract Brand Elements

#### Colors

- **Primary color:** Most prominent brand color from CSS `background-color` on `.hero`, `.btn-primary`, `header`, or `og:image` dominant color

- **Secondary colors:** Supporting palette from CTAs, accents, borders

- **Background/text:** `body` background-color and color

- **Forbidden:** Infer from brand positioning (e.g., competitor colors if identifiable)

- **Dark mode detection:** If body background is #333 or darker, swap background/text values

**CSS targets:** `background-color`, `color`, `border-color` on `body`, `header`, `.hero`, `.btn`, `.cta`, `h1`, `h2`

#### Typography

- **Google Fonts:** Extract from `@import url(https://fonts.googleapis.com/css2?family=...)` — parse font name from URL

- **CSS font-family:** Check `h1`, `h2`, `body`, `.headline` declarations

- **Fallback:** If no Google Fonts detected, set heading_font to `null` and body_font to `"system-ui"`

#### Voice (1-10 scale per axis)

Analyze hero headline, subheadline, about page intro, and CTA button text:

| Signal | Axis | Direction |

|--------|------|-----------|

| Uses "you/your" frequently | formal_casual | +2 toward casual |

| Technical jargon, industry terms | expert_accessible | -2 toward expert |

| Short punchy sentences (≤8 words) | bold_subtle | +2 toward bold |

| Data, stats, percentages in hero | rational_emotional | -2 toward rational |

| "Transform", "revolutionize", "disrupt" | traditional_innovative | +2 toward innovative |

| Customer testimonials lead | rational_emotional | +2 toward emotional |

| "Trusted by X companies", awards | traditional_innovative | -1 toward traditional |

| Humor, wordplay, casual phrasing | playful_serious | +2 toward playful |

| Formal language, third person | playful_serious | -2 toward serious |

Start each axis at 5 (neutral) and adjust based on signals found.

**Descriptors:** Choose 3-5 adjectives that capture the overall voice tone. These should complement the numerical scores, not repeat them.

#### Imagery

- **Style:** Professional photography, illustration, flat design, 3D renders, or mixed

- **Subjects:** What appears in hero images and product shots (people, products, abstract, data)

- **Composition:** Clean/minimal, busy/editorial, dark/dramatic, light/airy

- **Forbidden elements:** Infer from industry (healthcare → no unqualified medical claims imagery; B2B → no cheesy stock photos)

#### Aesthetic

- **Mood keywords:** 3 adjectives describing the visual mood (e.g., "trustworthy", "modern", "premium")

- **Texture:** minimal, textured, or mixed

- **Negative space:** generous, moderate, or dense

#### Brand Values

Extract from about page, mission statement, or footer. Look for repeated themes. Choose 3-5 core values.

#### Target Audience

Infer from copy, pricing signals, and positioning:

- **Age range:** Estimate from visual design, language complexity, and product type

- **Profession:** Who the product/service is for

- **Pain points:** What problems the brand addresses (from hero copy and feature descriptions)

- **Aspirations:** What the audience wants to achieve (from benefit-oriented copy)

### Step 4: Build brand-profile.json

Construct the JSON following the schema in REFERENCE.md precisely. Use `null` for any field that cannot be confidently extracted — never guess.

### Step 5: Write and Confirm

Write `brand-profile.json` to the current working directory.

Display a summary:

```

Brand DNA extracted → brand-profile.json

Brand: [brand_name]

Voice: [descriptor 1], [descriptor 2], [descriptor 3]

Primary Color: [hex]

Typography: [heading_font] / [body_font]

Audience: [age_range], [profession]

This profile can be consumed by:

- seo-content-writer (voice matching)

- email-composer (tone calibration)

- frontend-design (visual identity)

- pro-deck-builder (brand colors/fonts)

- cross-platform-audit (brand consistency checks)

```

## Limitations

- **Sparse sites:** <200 words of body text produce lower-confidence profiles. Note this in output.

- **SPA/React sites:** JavaScript-rendered content may not be fully captured by WebFetch. Note this if detected.

- **Multi-brand enterprises:** Creates one profile per URL. Run separately for each brand.

- **CSS-in-JS:** Modern React/Next.js sites may not have extractable CSS. Use og:image analysis as fallback.

## How to Use This Skill

Ask questions like:

- "Extract the brand DNA from https://example.com"

- "Build a brand profile for my client's website"

- "Analyze the brand voice and colors of https://competitor.com"

- "Quick brand profile — homepage only — for https://example.com"

- "What's the brand identity of this website?"