Brand Dna

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.

Install

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/brand-dna ~/.claude/skills/

Quick Reference

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:

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?"

Brand DNA — Examples

1. Full Brand Extraction

User Request:

"Extract the brand DNA from https://linear.app"

Analysis Steps: 1. Fetch homepage, about page, and product page via WebFetch 2. Extract colors from CSS and meta tags 3. Analyze typography from Google Fonts imports and font-family declarations 4. Score voice axes from hero copy, feature descriptions, and CTA text 5. Classify imagery style from og:image and hero visuals 6. Infer target audience from positioning, pricing, and copy 7. Write brand-profile.json

Sample Output:

Brand DNA extracted → brand-profile.json

  Brand: Linear
  Voice: precise, confident, opinionated
  Primary Color: #5E6AD2
  Typography: Inter / Inter
  Audience: 25-40, engineering and product teams

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)

Sample brand-profile.json:

{
  "schema_version": "1.0",
  "brand_name": "Linear",
  "website_url": "https://linear.app",
  "extracted_at": "2026-03-16T14:30:00Z",

  "voice": {
    "formal_casual": 4,
    "rational_emotional": 3,
    "playful_serious": 3,
    "bold_subtle": 8,
    "traditional_innovative": 8,
    "expert_accessible": 4,
    "descriptors": ["precise", "confident", "opinionated"]
  },

  "colors": {
    "primary": "#5E6AD2",
    "secondary": ["#FFFFFF", "#F7F8F9"],
    "forbidden": [],
    "background": "#000000",
    "text": "#FFFFFF"
  },

  "typography": {
    "heading_font": "Inter",
    "body_font": "Inter",
    "pairing_descriptor": "single typeface system, weight-differentiated, clean and precise"
  },

  "imagery": {
    "style": "product screenshots with motion",
    "subjects": ["product UI", "workflow animations", "minimal abstract shapes"],
    "composition": "dark backgrounds, centered focal point, generous negative space",
    "forbidden": ["stock photos", "people", "corporate imagery"]
  },

  "aesthetic": {
    "mood_keywords": ["premium", "precise", "minimal"],
    "texture": "minimal",
    "negative_space": "generous"
  },

  "brand_values": ["craftsmanship", "speed", "purposeful design"],

  "target_audience": {
    "age_range": "25-40",
    "profession": "software engineers, product managers, and engineering leaders",
    "pain_points": ["slow, bloated project tools", "context switching", "poor developer experience"],
    "aspirations": ["ship faster", "build excellent products", "reduce project management overhead"]
  }
}

---

2. Quick Extraction (Homepage Only)

User Request:

"Quick brand profile for https://glossier.com — just the homepage"

Analysis Steps: 1. Fetch homepage only via WebFetch 2. Extract available brand elements 3. Note reduced confidence where secondary pages would have helped 4. Write brand-profile.json

Sample Output:

Brand DNA extracted → brand-profile.json (homepage only — reduced confidence)

  Brand: Glossier
  Voice: friendly, inclusive, effortless
  Primary Color: #F5C6C6
  Typography: Neue Haas Grotesk / system-ui
  Audience: 18-35, beauty-conscious consumers

Note: About and product pages were not analyzed. Voice and value
extraction may be less accurate. Run full extraction for higher confidence.

---

3. Extraction with Downstream Usage

User Request:

"Extract brand DNA for https://notion.so, then use it to draft a LinkedIn post about their new AI features."

Analysis Steps: 1. Run brand DNA extraction → brand-profile.json 2. Hand off to seo-content-writer with brand-profile.json context 3. SEO content writer reads voice axes and descriptors to calibrate tone 4. Draft LinkedIn post matching Notion's brand voice

Workflow:

Step 1: brand-dna extracts → brand-profile.json
Step 2: seo-content-writer reads brand-profile.json
  → formal_casual: 6 (slightly casual)
  → bold_subtle: 6 (moderate confidence)
  → descriptors: ["approachable", "thoughtful", "empowering"]
Step 3: Draft uses Notion's voice characteristics
  → Approachable but not flippant
  → Feature-focused but benefit-led
  → "We" language, inclusive framing

---

4. Competitor Brand Comparison

User Request:

"Extract brand DNA for both https://figma.com and https://sketch.com so I can compare their positioning."

Analysis Steps: 1. Run brand DNA extraction for Figma → figma-brand-profile.json 2. Run brand DNA extraction for Sketch → sketch-brand-profile.json 3. Compare voice axes, color palettes, imagery styles, and target audiences 4. Summarize positioning differences

Sample Comparison Output:

Positioning gap: Figma leans heavily into collaboration and team workflows. Sketch positions around individual craft and native Mac experience. Content for Figma should emphasize "together" language; content for Sketch should emphasize "your workflow" language.

Brand DNA Reference

brand-profile.json Schema

{
  "schema_version": "1.0",
  "brand_name": "string",
  "website_url": "string (full URL including https://)",
  "extracted_at": "ISO-8601 timestamp",

  "voice": {
    "formal_casual": 1-10,
    "rational_emotional": 1-10,
    "playful_serious": 1-10,
    "bold_subtle": 1-10,
    "traditional_innovative": 1-10,
    "expert_accessible": 1-10,
    "descriptors": ["adjective1", "adjective2", "adjective3"]
  },

  "colors": {
    "primary": "#hexcode or null",
    "secondary": ["#hex1", "#hex2"],
    "forbidden": ["#hex or color name"],
    "background": "#hexcode",
    "text": "#hexcode"
  },

  "typography": {
    "heading_font": "Font Name or null",
    "body_font": "Font Name or system-ui",
    "pairing_descriptor": "brief description of the pairing"
  },

  "imagery": {
    "style": "professional photography | illustration | flat design | 3D renders | mixed",
    "subjects": ["subject1", "subject2"],
    "composition": "brief description",
    "forbidden": ["element1", "element2"]
  },

  "aesthetic": {
    "mood_keywords": ["keyword1", "keyword2", "keyword3"],
    "texture": "minimal | textured | mixed",
    "negative_space": "generous | moderate | dense"
  },

  "brand_values": ["value1", "value2", "value3"],

  "target_audience": {
    "age_range": "e.g., 25-45",
    "profession": "brief description",
    "pain_points": ["pain1", "pain2"],
    "aspirations": ["aspiration1", "aspiration2"]
  }
}

Field Reference

Voice Axes (1-10 Scale)

Score interpretation: 1 = extreme left pole, 10 = extreme right pole, 5 = neutral.

Descriptors: 3-5 free-form adjectives that capture voice nuance not covered by the numerical axes. Examples: "authoritative", "warm", "direct", "irreverent", "polished", "empathetic".

Colors

Typography

Imagery

Target Audience

CSS Extraction Targets

/* Colors */
body { background-color: → colors.background; color: → colors.text }
header, .hero { background-color: → colors.primary candidate }
.btn-primary, .cta { background-color: → colors.primary candidate }
h1, h2 { color: → potential accent/secondary }
a { color: → potential secondary }

/* Typography */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700")
  → heading_font = "Inter"
body { font-family: → body_font }
h1, h2, .headline { font-family: → heading_font }

/* Imagery signals */
meta[property="og:image"] → analyze for dominant color and imagery style
.hero img, .hero video → imagery style classification

How Downstream Skills Consume brand-profile.json

seo-content-writer

• Voice axes → calibrate tone, reading level, formality of written content
• Descriptors → anchor voice consistency checks
• Target audience → adjust pain points and aspirations in content framing
• Brand values → weave into messaging naturally

email-composer

• Voice axes → set email tone (formal_casual drives salutation and sign-off style)
• Descriptors → guide subject line personality
• Colors → suggest email template accent colors

frontend-design

• Colors → primary, secondary, background, text for design system
• Typography → heading and body font selections
• Aesthetic → mood keywords, texture, and negative space guide layout decisions
• Imagery → style and composition inform hero sections and visual elements

pro-deck-builder

• Colors → override default RRBC palette with brand colors for client-facing decks
• Typography → use brand fonts when available, fall back to system fonts
• Brand name → title slides, headers, footers

cross-platform-audit

• Voice → check creative messaging consistency across platforms
• Colors → verify ad creative uses brand palette
• Imagery → confirm creative style matches brand positioning