Skip to content
Unicorn Marketers — UM Toolkit Unicorn Marketers — UM Toolkit UM Toolkit

brand-style-extractor: pull a brand's real colors and fonts

Research & strategy Desktop

What it does

Section titled “What it does”

brand-style-extractor pulls a brand’s exact visual identity straight from its live website: real hex codes from the browser’s computed styles, real font names from actual CSS, and logo files located and documented. No guessing, no approximating.

You get back a structured brand guide plus a ready-to-paste prompt injection string that keeps every ad and page on-brand.

It’s the first thing skills like meta-image-ad-generator run automatically, because getting colors even slightly wrong makes ads look off-brand and pages look like a stranger built them.

When to reach for it

Section titled “When to reach for it”
  • You’re building a page or ad for a client without their brand guide on hand.
  • You’re generating images and want the colors and fonts to match the real site.
  • You want to capture a competitor’s brand system for reference.
  • A page or ad you shipped looks slightly off and you want to pin down what the brand uses.
  • You’re onboarding a new client and want to lock in their brand before any work starts.

Where it runs

Section titled “Where it runs”
Desktop

brand-style-extractor requires the Claude Code desktop app. It loads the site in a real browser and runs a JavaScript extraction script against the live DOM, which needs a browser tool only the desktop app has.

Cowork can’t run this skill today: with no live browser, it can’t read computed styles, so it stops and asks you to provide colors and fonts manually.

Not sure which setup you have? See choose your setup.

How to run it

Section titled “How to run it”

Just give it a URL:

“Extract the brand style for examplebrand.com”

Or call it by name:

“/um-toolkit:brand-style-extractor examplebrand.com”

Have screenshots handy? Include them:

“Extract brand style for examplebrand.com, here are screenshots of their homepage and product page”

Screenshots confirm the extraction and fill in visual details (photography, spacing, mood) that CSS alone can’t capture.

What it needs from you

Section titled “What it needs from you”
  • A live URL. The brand’s homepage is ideal; product or service pages also work.
  • (Optional) Screenshots of the live site for visual confirmation and mood.

It works best on a live, publicly accessible site. If the site is behind a login or mostly images with no CSS, it tells you what it couldn’t extract and asks for those pieces.

What you get back

Section titled “What you get back”

A structured brand guide:

  1. Color palette: every color mapped to a role (primary, CTA, secondary, accent, backgrounds, text) with exact hex codes, nothing approximated.
  2. Typography: headline, body, and accent fonts, with the actual CSS font-family names and size relationships.
  3. Logo specs: which logo files exist, their formats, and recommended usage (light or dark background).
  4. Visual aesthetic profile: mood, photography style, layout density, and brand personality.
  5. Prompt injection string: one block of text you paste into any image prompt to ground the output in the real brand.

Any element it can’t confirm is marked [UNCONFIRMED] and surfaced before anything downstream is built. It never silently fills a gap.

A worked example

Section titled “A worked example”

You: “Extract the brand style for examplebrand.com”

brand-style-extractor:

Color palette:

  • Primary: #1A2E4A (deep navy, headlines and nav) [VERIFIED]
  • CTA button: #FF6B35 (warm orange, every button) [VERIFIED]
  • Background: #F8F6F2 (warm off-white, most backgrounds) [VERIFIED]

Typography: Headlines Neue Haas Grotesk Display, body Inter at 16px base. [VERIFIED]

Visual mood: Clean, mid-premium, generous whitespace, studio photography with a lifestyle lean.

Prompt injection string: (ready to paste into any image prompt) Brand colors: deep navy #1A2E4A, warm orange #FF6B35, off-white background #F8F6F2. Typography: Neue Haas Grotesk Display headlines, Inter body. Visual feel: clean, mid-premium, warm and lifestyle-oriented, studio-quality with soft natural lighting.

Drop that string into any image prompt and everything you generate looks on-brand.

Tips & gotchas

Section titled “Tips & gotchas”
  • It won’t guess. If it can’t confirm a color or font from the actual CSS, it stops and asks. A flagged gap is far safer than a wrong hex code that quietly makes every ad look off-brand.
  • It extracts from the browser, not the HTML source. WebFetch (which reads raw HTML) often returns the wrong palette because class names and attributes don’t always match what renders. The script reads live computed styles instead.
  • Run it on 2-3 pages, not just the homepage. Colors appearing across multiple pages are confirmed brand colors; ones on a single page might be decorative.
  • Screenshots confirm what CSS can’t. Photography, spacing, and mood come from looking at the site, and a screenshot lets the skill document those alongside the hex codes.
  • Your own brand doesn’t need extraction. On a Unicorn Marketers page, the brand guide already exists, so the skill loads that directly.
  • Multiple logo variants are normal. Most brands ship a dark-on-light and a light-on-dark version; the extraction documents both and tells you which to use where.
Section titled “Related skills”

brand-style-extractor feeds directly into meta-image-ad-generator (which uses the injection string for every ad) and page builds (which use the specs to match the client’s real brand). Run it once at the start of a client engagement and every downstream skill benefits.