When the user wants to define, audit, or apply visual identity (typography, colors, spacing, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," or "frontend aesthetics."
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.
Check for project context first: If .claude/project-context.md or .cursor/project-context.md exists, read Section 12 (Visual Identity) for colors, typography, spacing. See branding for brand strategy and visual identity strategy layer.
Identify:
prefers-reduced-motion for animations.Guides distinctive, production-grade frontend implementation. Components (hero, CTA, footer, etc.) and pages (landing, home, features) should reference these principles for visual differentiation. Intentionality over intensity: bold maximalism and refined minimalism both work when executed with precision.
animation-delay) creates more delight than scattered micro-interactions.prefers-reduced-motion; provide reduced or no-motion alternatives.For AI/SaaS products, consider these visual trends and brand archetypes; adopt, ignore, or counter consciously to avoid sameness.
| 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 |
| 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 |
When creating or updating .cursor/project-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
Ensure consistency across touchpoints. Include: