brand-theme-designlisted

Turn a brand into a working theme for this design system — from a screenshot, a website, a PDF brand guide, a style guide, or a handful of hex values. Use when asked to match a company's brand, apply brand colors or brand guidelines to documents, make reports look like an existing site or product, build a theme from a logo or screenshot, or fill in the brand-template slot; and when an existing theme needs its contrast, accent, or print behavior audited. Do not use for choosing between the themes that already ship (that is a one-line answer in core/tokens.md), for restyling a single document rather than creating a reusable theme, or for general visual design of a report, diagram, chart, or deck — those belong to the skill for that artifact.
Avinava/document-design-system · ★ 2 · Web & Frontend · score 66

Install: claude install-skill Avinava/document-design-system

# Brand Theme Design Turn a brand into a theme that satisfies the token contract — and say plainly when the brand cannot do what is being asked of it. The job is not filling in blanks. A brand guide is a **superset with different intent**: five to eight colors chosen to work on a logo, a billboard, and a product UI. The contract needs a value-structured neutral ramp and exactly **one** accent. Most of the work is deciding what to leave out. The other half of the job is arithmetic nobody does by eye. Brand colors routinely fail contrast for body text, because body text is not what they were picked for. Finding that out *before* shipping is most of this skill's value. ## Workflow ### 1. Ask what exists Do not guess the input. Ask which of these they have, and take the best one available: | Input | How to read it | |---|---| | PDF brand guide, style guide | **Best.** Read the pages directly. Brand guides state their hex values as text, which beats sampling any rendering | | Website | `scripts/extract_site_theme.py <url>` — reads *computed styles* off real elements, not pixels | | Screenshot, logo, product shot | Look at it directly. Vision judges which color is the brand's "look here" color better than pixel-frequency counting, which just returns the most-used color | | A few hex values | Go straight to mapping | `references/extraction.md` covers each path, including what to pull beyond color. ### 2. Extract with provenance Record where every value came from — "primary