brand-visual
starsforks
How to install brand-visual?
kostja94/marketing-skills/brand-visual
$npx -y skills add kostja94/marketing-skills --skill brand-visualWhen the user wants to define, audit, or apply visual identity (typography, colors, spacing, design tokens, frontend aesthetics). Also use when the user mentions "brand style guide," "visual identity," "design system," "typography," "color palette," "brand guidelines," "AI brand
SKILL.md
| 1 | # Components: Brand Visual Identity |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | **Keywords**: visual identity, design tokens, color palette, typography, CSS variables, slide deck, brand guidelines, frontend aesthetics, accessibility |
| 6 | |
| 7 | **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. |
| 8 | |
| 9 | ## Initial Assessment |
| 10 | |
| 11 | **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. |
| 12 | |
| 13 | Identify: |
| 14 | 1. **Scope**: New brand, audit, or component design |
| 15 | 2. **Touchpoints**: Web, print, social, product UI, **slides** (PowerPoint, Google Slides, Keynote), **documents** (Word, Google Docs, PDF reports) |
| 16 | 3. **Existing assets**: Logo, style guide, design files |
| 17 | |
| 18 | ## Best Practices |
| 19 | |
| 20 | ### Typography |
| 21 | |
| 22 | - **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. |
| 23 | - **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**. |
| 24 | - **Headline font**: Communicates brand voice; must be readable in under one second. Carries personality while body handles infrastructure. |
| 25 | - **Type scale**: Use ratios 1.25–1.5 (Major Third or Perfect Fifth) for hierarchy. Limit to 3–4 styles per block. |
| 26 | - **Pairing rule**: Decorative fonts only with neutral typefaces. Assign distinct roles; avoid mixing more than two families. |
| 27 | - **Sizes**: Hero, section, subheading, body, caption; responsive scaling. Line length max 120 chars; generous line-height. |
| 28 | |
| 29 | ### Color Palette |
| 30 | |
| 31 | - **Structure**: Primary, secondary, CTA, background, text. Use flexible systems (core hero color + complementary shades), not single rigid colors. |
| 32 | - **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. |
| 33 | - **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. |
| 34 | - **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. |
| 35 | |
| 36 | ### Spacing |
| 37 | |
| 38 | - **Margins**: Horizontal (e.g. 120px), vertical section padding |
| 39 | - **Grid**: Consistent spacing scale (8px base common) |
| 40 | - **Logo clear space**: Minimum space around logo; document in brand guide |
| 41 | |
| 42 | ### Logo Usage |
| 43 | |
| 44 | - **Variants**: Primary, secondary, monogram; light/dark backgrounds |
| 45 | - **Minimum size**: Prevent illegibility |
| 46 | - **Don't**: Stretch, recolor, add effects without approval |
| 47 | |
| 48 | ### Anti-Patterns (Avoid) |
| 49 | |
| 50 | - **Aesthetics over functionality**: Don't sacrifice usability for visual appeal. |
| 51 | - **Unclear CTAs**: Limit primary CTA to one per section; visually differentiate primary vs secondary. |
| 52 | - **Inconsistent elements**: Pixelated icons, mismatched spacing/typography/color reduce trust. |
| 53 | - **Poor text hierarchy**: Disordered, cluttered text confuses users. |
| 54 | - **Overusing effects**: Drop shadows, pop-ups, crowded UI distract from content. |
| 55 | - **Chasing trends blindly**: Adopt trends only when they fit project needs. |
| 56 | - **Ignoring performance**: Heavy assets and complex layouts hurt load times. |
| 57 | - **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. |
| 58 | - **Emoji as icons**: Use SVG icons (Heroicons, Lucide, Simple Icons)—never emojis (🎨 🚀 ⚙️) as UI icons; emojis look unprofessional and inconsistent. |
| 59 | - **Unstable hover st |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
