---
name: brand-extract
description: Turn a business's existing website into a brand pack for the site — a tokenized palette (ink/paper/rule/accent plus a deepened accent for legible text), the logo and icon saved as image files, and a brand.md recording the company facts the site exposes (name, contact, services, about copy, socials) together with an explicit list of what is still unknown. Use as the first step of a web-design build, or on its own when someone wants design tokens + logo + company facts pulled from a URL. Trigger phrases include "extract the brand from <url>", "get tokens and logo from <site>", "pull the company details from their website".
allowed-tools:
  - Bash
  - Read
  - Write
  - WebFetch
  - Grep
---

# brand-extract

Reads an existing website and produces what the `web-design` and `socials`
templates need to be branded: a **palette**, the **logo** and **icon** as files,
and a **brand.md** of company facts with an honest "still unknown" list.

## Outputs

```
<output>/site/images/logo.png      # the wordmark/lockup, on a white or transparent ground
<output>/site/images/icon.png      # the square mark / monogram (favicon source)
<output>/site/favicon.png          # 64px icon
<output>/brand.md                  # tokens + facts found + gaps
```

## Palette — the token contract

The templates resolve every colour through ten CSS custom properties. Fill their
values from the site; do not introduce new token names.

| Token | Role | How to choose |
|---|---|---|
| `INK_900` | primary text, headings, dark surfaces | the site's darkest near-black text colour |
| `INK_700` | secondary text | a step lighter than INK_900 |
| `INK_400` | muted / captions | a mid grey |
| `PAPER_100` | white surface | the lightest surface (usually `#FFFFFF`) |
| `PAPER_200` | page-bg tint / bands | a faint off-white for alternating bands |
| `RULE_100` | borders / dividers | a pale neutral hairline |
| `ACCENT` | the brand accent (separators, hairlines, CTA hover) | the logo's accent colour, used verbatim |
| `ACCENT_TEXT` | accent used as small text (eyebrows, links) | the accent **deepened** until it is legible at ~10px on white (aim for ≥ 3:1 contrast). This is the one token you compute rather than copy — a light brand accent is unreadable as tracked-caps text, so darken it while keeping the same hue. |
| `ACCENT_SOFT` | soft tint behind accent text | a pale wash of the accent |
| `BRAND_GREY` | logo/wordmark grey | the logo's neutral grey |

If the operator supplied design tokens directly, use them verbatim and skip
derivation. The three-font editorial system (Cormorant Garamond display, Lora
body, Inter UI) is the template default and stays unless the operator asks to
change it — brand identity lives in the logo, the accent, and the copy.

## Logo — make it usable on dark and light

Save the site's primary logo as `images/logo.png`. Note its background: a logo on
a **white ground** sits cleanly on a light nav but cannot be dropped onto a dark
photo. The `socials` tiles place the logo on a white chip precisely so a
white-ground logo still reads over any hero. Record in brand.md whether a
transparent or light-art variant exists. Save the square mark as `images/icon.png`
and a 64px `favicon.png`.

Right-size the logo (a multi-megabyte original is overkill for a 42–84px display);
keep it crisp but reasonable.

## Facts — record, and mark the gaps

Write `brand.md` with everything the site exposes: trading name, legal name,
tagline, sector, established year, phone, email, address, region, services,
"about" copy, social links. For every field the site does **not** expose, write
it under a `## Still unknown` heading. That list is exactly what the intake step
turns into questions for the operator.

Do not promote a marketing line to a hard fact. "Over 35 years" is a claim about
experience, not a company age; "since 1987" is a trading date, not necessarily an
incorporation date. Keep claims as claims.

## The 2000px image rule

Never `Read` an image whose longest edge exceeds 2000px — it can break the
session. Measure first (`sips -g pixelWidth -g pixelHeight`), and if larger,
downscale a preview into `/tmp`, read that, and delete it.

## Completion criteria

- `images/logo.png`, `images/icon.png`, `favicon.png` exist and are right-sized.
- `brand.md` lists the ten palette tokens with values, the company facts found,
  and an explicit "Still unknown" list.
- No colour was invented beyond deriving `ACCENT_TEXT` from `ACCENT`; no marketing
  claim was recorded as a registration fact.