andrem-sec Brand Context Skill
Establish brand identity before writing any UI, marketing, or document code. No design work starts without confirmed brand context.
What Claude Gets Wrong Without This Skill
Without brand context, Claude invents a color palette. It defaults to blues and purples (the AI slop palette), picks Inter because it is safe, and produces something that could belong to any company. The output is technically correct and visually generic. Fixing brand drift after implementation is expensive — colors are scattered across files, fonts are hardcoded, the logo is the wrong variant.
Brand context is not optional decoration. It is the foundation that every downstream design decision rests on.
The brand_assets/ Pattern
Every project using this skill should have a brand_assets/ directory at the project root containing:
brand_assets/
logo.svg (primary logo, SVG preferred)
logo-dark.svg (dark background variant, if available)
logo-mark.svg (icon/symbol only, if available)
brand.md (guidelines — colors, fonts, voice, usage rules)
If brand_assets/ does not exist, create it and prompt the user to populate it before continuing.
Reference it explicitly in CLAUDE.md so it is loaded every session:
## Brand
Brand assets are in brand_assets/. Always check this directory before writing any UI code.
Phase Gates
Locate Phase — hard gate
Check for brand_assets/ at the project root. If it does not exist:
- Create the directory
- Stop and ask the user to provide: logo file, primary color, secondary color, primary font
- Do not proceed to design work until at minimum a color and font are confirmed
If brand_assets/ exists, inventory what is present. Note what is missing (logo variants, brand guidelines doc).
Extract Phase
From brand.md or equivalent guidelines document, extract:
| Token | Example | Notes |
|---|---|---|
| Primary color | #2563EB |
With HSL equivalent |
| Secondary color | #EA580C |
CTA / accent |
| Background | #F8FAFC |
Light mode base |
| Foreground | #1E293B |
Primary text |
| Primary font | Inter |
With fallback stack |
| Secondary font | Playfair Display |
Heading variant if separate |
| Logo path | brand_assets/logo.svg |
Relative path |
| Brand voice | Professional, direct |
2-3 adjectives |
If a design-system/MASTER.md already exists (from a previous ui-ux-pro-max design system generation), read it — it may already contain the extracted tokens.
Confirm Phase — hard gate
Present extracted context to the user in a summary table. Get explicit confirmation before proceeding to any design task. This prevents building on misread or outdated brand data.
Do not start writing UI code during the confirmation step.
Integration with ui-ux-pro-max
After brand context is confirmed, the ui-ux-pro-max design system generator can be seeded with the brand personality and product type to produce a full design system recommendation:
python3 .claude/skills/ui/ui-ux-pro-max/scripts/search.py \
"[product type] [brand personality]" --design-system -p "[ProjectName]"
This produces a design-system/MASTER.md that becomes the session's design source of truth.
Anti-Patterns
Do not invent colors or fonts when brand_assets/ is absent. Stop and ask.
Do not read only the logo file and skip the guidelines document. The logo file provides no color or font information.
Do not assume colors from the logo are the full palette. Logos often use a subset of the brand palette.
Do not proceed if the user says "just use something that looks good." That is a signal to run ui-ux-pro-max first and present options before building.
Mandatory Checklist
- Verify brand_assets/ directory exists or was created
- Verify primary color, secondary color, and primary font were extracted or confirmed
- Verify logo file path is known and the file exists
- Verify brand voice / personality was noted (used by inspiration-brief and ui-slop-guard)
- Verify user explicitly confirmed the extracted context before design work began