Components: Brand Visual Identity
Guides visual identity for consistent brand presentation. Companies with consistent branding see up to 23-33% revenue lift; 94% of consumers say consistency influences buying decisions.
When invoking: On first use, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
Initial Assessment
Check for product marketing context first: If .claude/product-marketing-context.md or .cursor/product-marketing-context.md exists, read Section 12 (Visual Identity) for colors, typography, spacing.
Identify:
- Scope: New brand, audit, or component design
- Touchpoints: Web, print, social, product UI
- Existing assets: Logo, style guide, design files
Best Practices (2025)
Typography
- Font families: Primary (headings), secondary (body); specify weights (Regular, Semi Bold, Bold)
- Hierarchy: Hero, section, subheading, body, caption; limit to 3-4 styles per block
- Sizes: Use scale (e.g. 120pt, 60pt, 28pt, 16pt); responsive scaling
- Line length: Max 120 chars for body; generous line-height for readability
- Color: HEX codes for text (e.g. #191919 headings, #666666 body)
Color Palette
- Primary, secondary, accent: HEX, RGB, CMYK for reproduction
- Backgrounds: Light, dark, gradient; specify opacity when layered
- Accessibility: Contrast ratio >=4.5:1 for text; don't rely on color alone
Spacing
- Margins: Horizontal (e.g. 120px), vertical section padding
- Grid: Consistent spacing scale (8px base common)
- Logo clear space: Minimum space around logo; document in brand guide
Logo Usage
- Variants: Primary, secondary, monogram; light/dark backgrounds
- Minimum size: Prevent illegibility
- Don't: Stretch, recolor, add effects without approval
AI Brand Aesthetics (Optional)
For AI/SaaS products, Aesthetics of AI identifies 14 visual trends and 5 brand archetypes. Adopt, ignore, or counter trends consciously to avoid sameness.
Visual Trends
| Trend |
Signal |
| Off-white / beige |
Trust, restraint, premium without gloss |
| Organic gradients |
Distinctiveness; add grain, texture |
| Digital impressionism |
Mood over literal; suggestive, not descriptive |
| Lomo / imperfect |
Exploratory, human creativity |
| Contemporary realism |
Precision, reliability, mastery |
| Sketch / scribble |
Human thought, exploration over certainty |
| Non-brand academia |
Authority; work speaks for itself |
| Technical illustrations |
Rigor, engineering depth |
| Quirky cuteness |
Approachability; counter doomsday narratives |
| Morphing objects |
Emergence, systems that learn |
| Futuristic surrealism |
Gateway to new worlds |
| Outer space |
Exploration, unknown |
| ASCII / pixels |
Retro, playful, technical |
| Generative art |
Algorithmic, living system |
Brand Archetypes
| Archetype |
Tone |
Visual |
| Likeable Leaders |
Seriousness, stability, trust |
Muted greys, warm beiges; impressionistic |
| Gentle Humanists |
People before tech |
Hand-drawn, everyday moments, nature |
| Nerdy Idealists |
Engineering culture |
Unpolished, quirky, non-branded |
| Bold Builders |
Groundbreaking, transformative |
Dark palettes, space references |
| Utopian Dreamers |
What becomes possible |
Retrofuturistic, surreal worlds |
Product Marketing Context (Section 12)
When creating or updating .cursor/product-marketing-context.md, add:
## 12. Visual Identity (Optional)
**Colors**: Primary #XXX, secondary #XXX; backgrounds #XXX
**Typography**: Headings (font, weight, color); Body (font, weight, color)
**Sizes**: Hero Xpt, section Xpt, body Xpt
**Spacing**: Margins Xpx; section padding Xpx
**Layout**: Viewport, top bar, footer heights if fixed
Output Format
- Typography spec (fonts, weights, sizes, colors)
- Color palette (HEX, usage rules)
- Spacing scale
- Logo clear space and variants
- AI products (optional): Visual trend and archetype alignment
- Context template for product-marketing-context Section 12
Related Skills
- components-logo: Logo placement, clear space; brand visual defines logo rules
- components-favicon: Favicon aligns with brand mark and colors
- pages-media-kit: Media kit hosts brand guidelines document; links to logo, favicon
- components-hero: Hero uses brand typography, colors, spacing
- pages-404: Error pages maintain brand consistency
1---2name: components-brand-visual3description: When the user wants to define, audit, or apply visual identity (typography, colors, spacing). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," or "AI brand aesthetics."4---56# Components: Brand Visual Identity78Guides visual identity for consistent brand presentation. Companies with consistent branding see up to 23-33% revenue lift; 94% of consumers say consistency influences buying decisions.910**When invoking**: On **first use**, if helpful, open with 1-2 sentences on what this skill covers and why it matters, then provide the main output. On **subsequent use** or when the user asks to skip, go directly to the main output.1112## Initial Assessment1314**Check for product marketing context first:** If `.claude/product-marketing-context.md` or `.cursor/product-marketing-context.md` exists, read Section 12 (Visual Identity) for colors, typography, spacing.1516Identify:171. **Scope**: New brand, audit, or component design182. **Touchpoints**: Web, print, social, product UI193. **Existing assets**: Logo, style guide, design files2021## Best Practices (2025)2223### Typography2425- **Font families**: Primary (headings), secondary (body); specify weights (Regular, Semi Bold, Bold)26- **Hierarchy**: Hero, section, subheading, body, caption; limit to 3-4 styles per block27- **Sizes**: Use scale (e.g. 120pt, 60pt, 28pt, 16pt); responsive scaling28- **Line length**: Max 120 chars for body; generous line-height for readability29- **Color**: HEX codes for text (e.g. #191919 headings, #666666 body)3031### Color Palette3233- **Primary, secondary, accent**: HEX, RGB, CMYK for reproduction34- **Backgrounds**: Light, dark, gradient; specify opacity when layered35- **Accessibility**: Contrast ratio >=4.5:1 for text; don't rely on color alone3637### Spacing3839- **Margins**: Horizontal (e.g. 120px), vertical section padding40- **Grid**: Consistent spacing scale (8px base common)41- **Logo clear space**: Minimum space around logo; document in brand guide4243### Logo Usage4445- **Variants**: Primary, secondary, monogram; light/dark backgrounds46- **Minimum size**: Prevent illegibility47- **Don't**: Stretch, recolor, add effects without approval4849## AI Brand Aesthetics (Optional)5051For AI/SaaS products, [Aesthetics of AI](https://www.acolorbright.com/en/insights/aesthetics-of-ai) identifies 14 visual trends and 5 brand archetypes. Adopt, ignore, or counter trends consciously to avoid sameness.5253### Visual Trends5455| Trend | Signal |56|-------|--------|57| **Off-white / beige** | Trust, restraint, premium without gloss |58| **Organic gradients** | Distinctiveness; add grain, texture |59| **Digital impressionism** | Mood over literal; suggestive, not descriptive |60| **Lomo / imperfect** | Exploratory, human creativity |61| **Contemporary realism** | Precision, reliability, mastery |62| **Sketch / scribble** | Human thought, exploration over certainty |63| **Non-brand academia** | Authority; work speaks for itself |64| **Technical illustrations** | Rigor, engineering depth |65| **Quirky cuteness** | Approachability; counter doomsday narratives |66| **Morphing objects** | Emergence, systems that learn |67| **Futuristic surrealism** | Gateway to new worlds |68| **Outer space** | Exploration, unknown |69| **ASCII / pixels** | Retro, playful, technical |70| **Generative art** | Algorithmic, living system |7172### Brand Archetypes7374| Archetype | Tone | Visual |75|-----------|------|--------|76| **Likeable Leaders** | Seriousness, stability, trust | Muted greys, warm beiges; impressionistic |77| **Gentle Humanists** | People before tech | Hand-drawn, everyday moments, nature |78| **Nerdy Idealists** | Engineering culture | Unpolished, quirky, non-branded |79| **Bold Builders** | Groundbreaking, transformative | Dark palettes, space references |80| **Utopian Dreamers** | What becomes possible | Retrofuturistic, surreal worlds |8182## Product Marketing Context (Section 12)8384When creating or updating `.cursor/product-marketing-context.md`, add:8586```markdown87## 12. Visual Identity (Optional)8889**Colors**: Primary #XXX, secondary #XXX; backgrounds #XXX90**Typography**: Headings (font, weight, color); Body (font, weight, color)91**Sizes**: Hero Xpt, section Xpt, body Xpt92**Spacing**: Margins Xpx; section padding Xpx93**Layout**: Viewport, top bar, footer heights if fixed94```9596## Output Format9798- **Typography** spec (fonts, weights, sizes, colors)99- **Color** palette (HEX, usage rules)100- **Spacing** scale101- **Logo** clear space and variants102- **AI products** (optional): Visual trend and archetype alignment103- **Context template** for product-marketing-context Section 12104105## Related Skills106107- **components-logo**: Logo placement, clear space; brand visual defines logo rules108- **components-favicon**: Favicon aligns with brand mark and colors109- **pages-media-kit**: Media kit hosts brand guidelines document; links to logo, favicon110- **components-hero**: Hero uses brand typography, colors, spacing111- **pages-404**: Error pages maintain brand consistency
tools-only