Components: Brand Visual Identity

Initial Assessment

.claude/product-marketing-context.md

.cursor/product-marketing-context.md

1. Scope: New brand, audit, or component design
2. Touchpoints: Web, print, social, product UI
3. Existing assets: Logo, style guide, design files

Best Practices

Typography

• Two-font system: One display font for headlines, one body font for text. Contrast + harmony: different enough for distinct roles, similar enough to feel cohesive.
• Body font: Prioritize legibility—large x-height, open counters. For neutral/safe: Source Sans 3, Lora, IBM Plex Sans. For distinctiveness: avoid overused AI fonts (Inter, Roboto, Arial, system fonts); prefer characterful choices that elevate the brand. See Frontend Aesthetics.
• Headline font: Communicates brand voice; must be readable in under one second. Carries personality while body handles infrastructure.
• Type scale: Use ratios 1.25–1.5 (Major Third or Perfect Fifth) for hierarchy. Limit to 3–4 styles per block.
• Pairing rule: Decorative fonts only with neutral typefaces. Assign distinct roles; avoid mixing more than two families.
• Sizes: Hero, section, subheading, body, caption; responsive scaling. Line length max 120 chars; generous line-height.

Color Palette

• Structure: Primary, secondary, CTA, background, text. Use flexible systems (core hero color + complementary shades), not single rigid colors.
• Industry mapping: Finance → blue, gray, navy (stability); Luxury → rose gold, burgundy, black (exclusivity); Tech → teal, neon accents, charcoal (innovation); Wellness → lavender, peach, mint (calm); Sustainability → sage green, earthy tones.
• Reproduction: HEX, RGB, CMYK for print and digital.
• Accessibility: Contrast >=4.5:1 for normal text, >=3:1 for large text (18px+ or 14px+ bold). Don't rely on color alone for information.

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

Anti-Patterns (Avoid)

• Aesthetics over functionality: Don't sacrifice usability for visual appeal.
• Unclear CTAs: Limit primary CTA to one per section; visually differentiate primary vs secondary.
• Inconsistent elements: Pixelated icons, mismatched spacing/typography/color reduce trust.
• Poor text hierarchy: Disordered, cluttered text confuses users.
• Overusing effects: Drop shadows, pop-ups, crowded UI distract from content.
• Chasing trends blindly: Adopt trends only when they fit project needs.
• Ignoring performance: Heavy assets and complex layouts hurt load times.
• Generic AI aesthetics: Inter, Roboto, Arial, Space Grotesk, and system fonts contribute to cookie-cutter design; avoid clichéd schemes (e.g., purple gradients on white). Prefer distinctive choices when brand differentiation matters.
• Emoji as icons: Use SVG icons (Heroicons, Lucide, Simple Icons)—never emojis (🎨 🚀 ⚙️) as UI icons; emojis look unprofessional and inconsistent.
• Unstable hover states: Use color/opacity transitions on hover; avoid scale transforms that shift layout or cause content jump.

Accessibility Checklist

• Contrast: Normal text >=4.5:1; large text >=3:1; interactive elements >=3:1.
• Focus: Visible focus indicator (>=2px solid, 3:1 contrast); logical Tab order; no keyboard traps.
• Color: Never use color alone to convey information; add text or icons for states (error, success).
• Keyboard: All interactive elements reachable via Tab, Enter, Spacebar.
• Reduced motion: Respect

  prefers-reduced-motion

  for animations.

Frontend Aesthetics

Typography

• Avoid generic AI fonts: Inter, Roboto, Arial, system fonts, Space Grotesk. These create cookie-cutter aesthetics.
• Distinctive pairing: One display font (headlines, personality) + one refined body font (readability). Choose characterful, unexpected fonts that elevate the interface.
• Consistency: Use CSS variables; limit to 3–4 type styles per block.

Motion

• High-impact moments: One well-orchestrated page load with staggered reveals (

  animation-delay

  ) creates more delight than scattered micro-interactions.
• Prioritize: CSS-only for HTML; Motion library for React when available. Scroll-triggering and hover states that surprise.
• Accessibility: Always respect

  prefers-reduced-motion

  ; provide reduced or no-motion alternatives.

Spatial Composition

• Unexpected layouts: Asymmetry, overlap, diagonal flow, grid-breaking elements.
• Balance: Generous negative space OR controlled density—choose intentionally.
• Hierarchy: Clear visual flow; avoid predictable, evenly-distributed layouts.

Backgrounds & Visual Details

• Atmosphere over flat: Create depth rather than defaulting to solid colors.
• Techniques: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
• Context: Match effects to overall aesthetic; don't distract from content.

Never

• Overused font families (Inter, Roboto, Arial, system fonts)
• Clichéd color schemes (e.g., purple gradients on white)
• Predictable layouts and cookie-cutter component patterns
• Design that lacks context-specific character
• Emojis as UI icons (use SVG: Heroicons, Lucide, Simple Icons)

AI Brand Aesthetics (Optional)

Visual Trends

Brand Archetypes

Product Marketing Context (Section 12)

.cursor/product-marketing-context.md

## 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

Brand Guidelines Structure (Single Source of Truth)

• Logo: Usage rules, clear space, minimum sizes, variants (light/dark)
• Colors: Primary, secondary, CTA, background, text (HEX, RGB, CMYK)
• Typography: Font families, hierarchy, sizing, spacing
• Imagery: Photography tone, subject matter, visual mood
• Iconography: Style, stroke weight, usage rules

Output Format

• Typography spec (fonts, weights, sizes, colors)
• Color palette (HEX, usage rules, industry mapping)
• Spacing scale
• Logo clear space and variants
• Frontend aesthetics (optional): Motion, spatial composition, backgrounds—for distinctive implementation
• Anti-patterns and accessibility checklist
• AI products (optional): Visual trend and archetype alignment
• Context template for product-marketing-context Section 12

Related Skills

• branding: Brand strategy; visual identity strategy; this skill implements typography, colors, spacing
• logo-generator: Logo placement, clear space; brand visual defines logo rules
• favicon-generator: Favicon aligns with brand mark and colors
• media-kit-page-generator: Media kit hosts brand guidelines document; links to logo, favicon
• hero-generator: Hero uses brand typography, colors, spacing
• 404-page-generator: Error pages maintain brand consistency