Help us improve
Share bugs, ideas, or general feedback.
From brand
Author the visual identity system for a brand — logo, wordmark, marks, color systems, typography, photography direction, and iconography style as one coherent authoring skill. Direct (not execute) logo and mark design; specify color palettes with semantic naming and contrast pairings; build type systems that pair correctly and license correctly; ensure dark-mode and accessibility compliance from the start. Inherits the named bans from design-taste (LILA, Inter, pure-black, two-warring-primaries, mixed-stroke icons, geometric circle logo). Use this skill any time a brand identity is being designed, refreshed, or applied.
npx claudepluginhub bpainter/composable-dxp-claude-marketplace --plugin brandHow this skill is triggered — by the user, by Claude, or both
Slash command
/brand:brand-identity-systemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill is the visual-identity authoring layer of brand work. Logo direction, wordmark, color system, type system, photography direction, and iconography style — all as one coherent system. The output is a complete identity that holds across surfaces and time.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Explores codebases via GitNexus: discover repos, query execution flows, trace processes, inspect symbol callers/callees, and review architecture.
Share bugs, ideas, or general feedback.
This skill is the visual-identity authoring layer of brand work. Logo direction, wordmark, color system, type system, photography direction, and iconography style — all as one coherent system. The output is a complete identity that holds across surfaces and time.
You usually aren't drawing the logo yourself; you're directing it, evaluating it, or briefing a designer. Same for type and photography. The job is to make the visual decisions strategic and coherent — not "I like this one."
Pair with [[brand-strategist]] (positioning that informs identity), [[brand-naming]] (the wordmark's source), [[brand-voice-tone]] (verbal register that visual register must match), [[design-taste]] (named visual-tells the identity must avoid), [[stylistic-vocabulary]] (the register family the identity lives in).
A strong mark is:
# Logo brief: {Brand}
## Strategic context
- What the brand stands for (3 words):
- Who it serves:
- What it needs to feel (3 adjectives):
- What it must not feel (2 adjectives):
- Competitors to differentiate from:
- Stylistic register from `stylistic-vocabulary`:
## Constraints
- Required formats: SVG (primary), PNG, ICO
- Required variants: full color, monochrome, single-color, knockout (for dark backgrounds)
- Required minimum size: 16px favicon
- Color palette: directional or fixed?
- Type pairing: directional or fixed?
## Concept directions (2–4)
For each:
- Direction name
- One-sentence rationale
- What it earns the brand
- What it risks
- Reference visual cue
## Anti-bland gates
- No generic swooshes.
- No globe-with-arrow.
- No lightbulb-as-idea.
- No abstract-geometric-circle-on-pastel-gradient.
- No "AI Purple/Blue" gradient backgrounds.
When reviewing concepts, comment on each axis. Avoid taste-based feedback ("I prefer the second one"). Tie comments to the brief.
| Axis | Question |
|---|---|
| Strategic fit | Does it match the brief's three adjectives? |
| Distinctiveness | How does it stand next to competitors? |
| Versatility | Does it scale, work monochrome, on dark, on light? |
| Construction | Type, geometry, balance, kerning. |
| Risks | Legibility at small sizes, similarity to known marks, cultural read. |
| What I want next | Specific direction for the next round. |
A brand color system has four jobs:
Primary (1–2 colors):
- The colors the brand owns.
- High impact, used sparingly.
Secondary / supporting (2–4):
- Expand expressive range.
- Used in editorial moments, accent treatments.
Neutrals (4–6):
- Grays from near-white to near-black.
- Often slightly tinted (warm or cool).
Functional (4):
- Success, warning, error, info.
- Each accessible against neutrals.
Surface and text:
- Derived from neutrals.
- Named for role, not hue.
For each color, document:
accent not blue-500. ink not near-black. paper not off-white.220 90% 56%) for CSS variables (shadcn/Tailwind format).#000000. Use Off-Black, Zinc-950, Charcoal.For digital, prefer HSL channel triplets (220 90% 56%) for source values, since shadcn/ui and most design-token systems wrap them.
Type does more brand work than color. It is also where most brand systems quietly fail — wrong license tier, too many weights, fonts that fight each other.
Display: for headlines and brand moments.
- Distinctive, can be expensive.
- Often the brand's signature face.
Text: body and UI.
- Must be highly legible at 14–18px.
- Often a workhorse face that can do everything.
Mono (optional): code, data, numerals.
- For technical brands or data-heavy applications.
For each typeface, document:
Photography and illustration extend the brand's visual register beyond logo/color/type.
For full art-direction language, see [[design-imagery]] in the design plugin.
For brand identity work specifically:
Pick one icon family for the brand. Hold it across all surfaces.
For brand-side icon work, see [[design-iconography]] in the design plugin. Decision tree:
Specify in the brand identity system:
When asked to develop a brand identity:
Ask:
| Failure | Symptom | Fix |
|---|---|---|
| Geometric circle logo | Abstract circle/swoosh that could belong to any tech company | Brief grounded in the brand's actual story; reject generic shapes |
| AI Purple/Blue palette | Indigo gradient backgrounds, neon glows | Desaturated neutrals, one accent at <60% saturation |
| Two warring primaries | Two equally weighted "primary" colors fighting | One primary; others become functional |
| Inter as premium signal | Inter on a luxury/creative brief | Geist, Cabinet Grotesk, Söhne, Migra |
| Too many fonts | Display + text + accent + display-2 + script | Three faces max (display, text, mono optional) |
| Unlicensed display font | Beautiful free font that turns out unlicensed for app embed | License every face for every use case before committing |
| No dark-mode strategy | Bolted-on dark mode that fails contrast | Plan dark mode from start; test contrast in both modes |
| Five-color brand palette | Five equally weighted colors with no hierarchy | Two-color foundational palette + functional + neutrals |
| Personality-trait grid in guidelines | "Bold. Friendly. Trustworthy. Modern." in stock-photo boxes | Voice attributes prove themselves in their own writing |
| Logo too detailed for favicon | Logo unreadable at 16×16 | Test at 16×16 every concept |
| Mixed-stroke icons across surfaces | UI uses 1.5px Lucide, deck uses 2px Phosphor, doc uses Flaticon outline | One family, one stroke weight, holdable across surfaces |
software-engineering-tailwind-tokens — for token implementation in code.software-engineering-shadcn-component — for shadcn theme customization.