/Docs

Match brand from screenshot

Drop a logo, a moodboard, or any brand screenshot into the editor and Claude returns a 3–5 colour palette plus an optional font-family and weight suggestion. Each suggestion is a click-to-apply chip wired to the same intents the Inspector controls dispatch — Text colour, Background colour, Font family, Font weight.

When this is useful

When you're running a variation that aims to feel on-brand and you don't want to eyeball hex codes off the customer's marketing site. Paste a screenshot, get the palette, apply the right tone to the right element.

The feature is element-scoped — colours apply to whichever element you had selected when you opened the modal. Open Match brand for the hero CTA and the chip will recolour that CTA, not the page.

How to use it

  1. Click the element you want to recolour. The floating popover appears above it.
  2. Click the overflow button on the popover, then Match brand from screenshot.
  3. In the modal, choose either Upload image or Paste URL:
    • Upload — drag or click to pick a PNG, JPEG, WEBP, or GIF up to 4 MB.
    • URL — paste an HTTPS URL pointing at a brand image (logo, hero screenshot, moodboard). HTTP is rejected; cloud-metadata and private-network hostnames are blocked server-side.
  4. Click Analyse. Claude returns the palette and optional font suggestions in 2–4 seconds.
  5. Click any chip to apply: Text sets text colour, BG sets background colour. If a font family or weight is suggested, an Apply font / Apply weight button lives below the chips.
Pick one suggestion at a time
There's no bulk-apply: you decide which suggestion lands and which doesn't. Each click stages a STYLE change in the LeftPanel just like any Inspector edit, so undo / redo / preview still work the way you expect.

Limits

  • Rate limit — 5 requests per minute per user.If you hit the limit, the modal surfaces “Too many requests. Try again in a minute.”
  • Image size — 4 MB hard cap. Enforced client-side for fast feedback and re-enforced server-side as the security boundary.
  • MIME allowlist — PNG, JPEG, WEBP, GIF only. Other types are rejected with “Only PNG, JPEG, WEBP, and GIF images are accepted.”
  • HTTPS only. URL inputs must start with https://. HTTP redirects are rejected mid-fetch.

What the AI sees

Claude sees the image bytes (forwarded server-side from the dashboard, never directly from the extension) plus the currently selected element's text colour, background colour, and font-family — used as soft context so the suggested palette doesn't recommend white-on-white. The element's actual text and the page's URL are not sent.

Cancelling a slow request

While the spinner is showing, a Cancel button sits next to it. Clicking it aborts the in-flight request on the service worker and returns the modal to the input stage. Useful if the image was wrong or the request is taking longer than expected.

Errors you might see
  • “Couldn't fetch that URL” — the URL failed the server-side fetch (DNS, connection, redirect cap, or non-HTTPS).
  • “Image is larger than 4 MB” — pick a smaller file or use the URL path with a different host.
  • “Couldn't analyse that image”— the AI couldn't produce a confident palette. Try a different image with clearer brand colours.