brand-visual-generator
The brand-visual-generator skill helps users define, audit, or apply a brand's visual identity including typography, color palettes, design tokens, spacing systems, and frontend aesthetics. Use it when establishing or refining how a brand looks across web products, presentations, print materials, and documents, or when the user references design systems, brand guidelines, style guides, or specific visual elements like fonts and color schemes.
git clone --depth 1 https://github.com/kostja94/marketing-skills /tmp/brand-visual-generator && cp -r /tmp/brand-visual-generator/skills/components/branding/brand-visual ~/.claude/skills/brand-visual-generatorSKILL.md
# 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. **Keywords**: visual identity, design tokens, color palette, typography, CSS variables, slide deck, brand guidelines, frontend aesthetics, accessibility **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 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: 1. **Scope**: New brand, audit, or component design 2. **Touchpoints**: Web, print, social, product UI, **slides** (PowerPoint, Google Slides, Keynote), **documents** (Word, Google Docs, PDF reports) 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. For **programmatic slides** (e.g. python-pptx), map brand HEX to RGB tuples `(R, G, B)` for fills and text; keep a single source of truth table (HEX + RGB) in the deliverable. - **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 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. ### 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
When the user wants to analyze Google Search Console data, use the GSC API, or interpret search performance. Also use when the user mentions "GSC," "Search Console," "indexing report," "Core Web Vitals," "Enhancements," "Insights report," "search performance," "search queries," "search performance report," "URL inspection," "impressions," "CTR," "average position," "index coverage," "GSC data analysis," "Search Console API," or "searchanalytics.query." When the user wants to rewrite title tags (not only report on them), use title-tag. For meta description rewrites, use meta-description.
When the user wants to build an SEO data analysis system, monitor indexing/traffic/keywords/backlinks, or set up benchmarks. Also use when the user mentions "SEO data analysis," "SEO monitoring," "article database," "traffic benchmark," "penalty recovery," "SEO work document," "SEO dashboard," "keyword tracking," "ranking monitoring," "indexing report," or "backlink monitoring." For GSC API, use google-search-console.
When the user wants to track AI search traffic in GA4 or GSC. Also use when the user mentions "AI traffic," "ChatGPT referral," "Perplexity traffic," "AI Overviews," "GA4 AI sources," "AI search analytics," "track AI referrals," "AI search traffic," "Claude traffic," or "how to track AI traffic." For AI SEO strategy, use generative-engine-optimization.
When the user wants to analyze website traffic sources, attribution, or dark traffic. Also use when the user mentions "traffic sources," "dark traffic," "direct traffic," "UTM parameters," "traffic attribution," "channel attribution," "attribution optimization," "channel analysis," "traffic analysis," "traffic diversification," "natural traffic benchmark," or "organic vs paid traffic." For GA4 setup, use analytics-tracking.
When the user wants to set up, audit, or optimize analytics tracking (GA4, events, conversions). Also use when the user mentions "Google Analytics," "GA4," "event tracking," "conversions," "attribution model," "gtag," "data layer," "GA4 setup," "conversion tracking," "event setup," "User ID tracking," or "CTA attribution." For traffic insights, use traffic-analysis.
When the user wants to promote via forums, communities, or invite users to join a community. Also use when the user mentions "forum promotion," "Indie Hacker," "Hacker News," "community growth," "Discord promotion," "vertical community," "brand encyclopedia," "Wikipedia," "Quora," "Reddit community," "community building," "forum marketing," or "community invite." For Reddit copy, use reddit-posts. For strategy, use integrated-marketing.
When the user wants to submit a product or app to directories, curated lists, launch platforms, or app stores—and needs ready-to-paste copy per platform. Reads project-context.md when present. Also use when the user mentions "directory submission," "get listed," "app store listing," "submit to directories," "curated list," "best tools list," "Taaft," "Product Hunt," "directory ads," "newsletter feature," "directory campaign," "tailor description per platform," "Shopify App Store," "Chrome Web Store," "navigation site," or "product directory." For Product Hunt launch day tactics (hunter, first comment, timing), use product-hunt-launch. For full 0→1 channel planning, use cold-start-strategy.
When the user wants to launch on Product Hunt, prepare a PH submission, or plan launch day (hunter, first comment, timing, upvotes). Also use when the user mentions "Product Hunt," "launch on Product Hunt," "PH launch," "Product Hunt submission," "hunter," "Product of the Day," "upvotes," or "Product Hunt first comment." For multi-platform directory listings and paste-ready copy beyond PH, use directory-submission.