Visual Brand Generator

Brand visual generator

by kostja94 · MIT license · ★ 1,006 on GitHub

When 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,"…

---
name: brand-visual-generator
description: When 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 aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.
license: MIT
metadata:
  version: 1.4.0
---

# 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

Overview

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.

What you get

Typographyspec (fonts, weights, sizes, colors)
Colorpalette (HEX, usage rules, industry mapping)
Spacingscale
Logoclear space and variants
Frontend aesthetics(optional): Motion, spatial composition, backgrounds—for distinctive implementation
Anti-patternsand accessibility checklist

Manual install (npx, ZIP)

Claude Codenpx skills add kostja94/marketing-skills --skill brand-visual-generator -g -a claude-code

Claude Code (degit)npx degit kostja94/marketing-skills/skills/components/branding/brand-visual#main ~/.claude/skills/brand-visual-generator

Claude.ai / desktopZip the folder and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md11.9 KB

Read SKILL.md here

kostja94/main1 file shown

SKILL.md11.9 KB

Browse every file on GitHub↗

SKILL.md

Show the full text201 lines

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

Project context: Read root contextus.md when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.

Identify:

Scope: New brand, audit, or component design
Touchpoints: Web, print, social, product UI, slides (PowerPoint, Google Slides, Keynote), documents (Word, Google Docs, PDF reports)
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 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)

For AI/SaaS products, consider these visual trends and brand archetypes; adopt, ignore, or counter 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

Return Visual Identity Context

When returning confirmed visual identity context through Contextus, include:

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

Slides & Documents (Non-Web)

When the user asks for deck or document branding—not only websites:

Slide master: Background color from token; title font = display/heading token; body = body token; default title/body sizes aligned to type scale from branding / Section 12.
Theme colors: Map primary, secondary, background, text, and one accent to the presentation app's theme (PowerPoint Design → Variants, Google Slides Theme, Keynote Document settings) so shapes and charts inherit palette.
Charts & shapes: Cycle accents in a fixed order (e.g. primary → secondary → tertiary) instead of random colors; keeps decks on-brand.
Documents: Same fonts and heading hierarchy as web where possible; specify paragraph style names (Title, Heading 1–3, Normal) with point sizes and colors.

Strategy and narrative layers remain in branding; this section is visual execution for office/slide tools.

Brand Guidelines Structure (Single Source of Truth)

Ensure consistency across touchpoints. Include:

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
Contextus for maintained project-specific visual identity
Slides/documents (when requested): theme mapping + master typography + chart accent order

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

1	---
2	name: brand-visual-generator
3	description: When 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 aesthetics," "brand colors," "font choices," "spacing system," "design tokens," "motion," "distinctive design," "frontend aesthetics," "PowerPoint theme," "Google Slides brand," or "slide master colors." For brand story, positioning, and voice, use branding.
4	license: MIT
5	metadata:
6	version: 1.4.0
7	---
8
9	# Components: Brand Visual Identity
10
11	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.
12
13	Keywords: visual identity, design tokens, color palette, typography, CSS variables, slide deck, brand guidelines, frontend aesthetics, accessibility
14
15	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.
16
17	## Initial Assessment
18
19	Project context: Read root `contextus.md` when present and load only the modules relevant to this task. Without Contextus, use available project material or user-provided facts and ask for missing information; do not create a parallel context system.
20
21	Identify:
22	1. Scope: New brand, audit, or component design
23	2. Touchpoints: Web, print, social, product UI, slides (PowerPoint, Google Slides, Keynote), documents (Word, Google Docs, PDF reports)
24	3. Existing assets: Logo, style guide, design files
25
26	## Best Practices
27
28	### Typography
29
30	- 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.
31	- 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.
32	- Headline font: Communicates brand voice; must be readable in under one second. Carries personality while body handles infrastructure.
33	- Type scale: Use ratios 1.25–1.5 (Major Third or Perfect Fifth) for hierarchy. Limit to 3–4 styles per block.
34	- Pairing rule: Decorative fonts only with neutral typefaces. Assign distinct roles; avoid mixing more than two families.
35	- Sizes: Hero, section, subheading, body, caption; responsive scaling. Line length max 120 chars; generous line-height.
36
37	### Color Palette
38
39	- Structure: Primary, secondary, CTA, background, text. Use flexible systems (core hero color + complementary shades), not single rigid colors.
40	- 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.
41	- 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.
42	- 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.
43
44	### Spacing
45
46	- Margins: Horizontal (e.g. 120px), vertical section padding
47	- Grid: Consistent spacing scale (8px base common)
48	- Logo clear space: Minimum space around logo; document in brand guide
49
50	### Logo Usage
51
52	- Variants: Primary, secondary, monogram; light/dark backgrounds
53	- Minimum size: Prevent illegibility
54	- Don't: Stretch, recolor, add effects without approval
55
56	### Anti-Patterns (Avoid)
57
58	- Aesthetics over functionality: Don't sacrifice usability for visual appeal.
59	- Unclear CTAs: Limit primary CTA to one per section; visually differentiate primary vs secondary.
60	- Inconsistent elements: Pixelated icons, mismatched spacing/typography/color reduce trust.
61	- Poor text hierarchy: Disordered, cluttered text confuses users.
62	- Overusing effects: Drop shadows, pop-ups, crowded UI distract from content.
63	- Chasing trends blindly: Adopt trends only when they fit project needs.
64	- Ignoring performance: Heavy assets and complex layouts hurt load times.
65	- 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.
66	- Emoji as icons: Use SVG icons (Heroicons, Lucide, Simple Icons)—never emojis (🎨 🚀 ⚙️) as UI icons; emojis look unprofessional and inconsistent.
67	- Unstable hover states: Use color/opacity transitions on hover; avoid scale transforms that shift layout or cause content jump.
68
69	### Accessibility Checklist
70
71	- Contrast: Normal text >=4.5:1; large text >=3:1; interactive elements >=3:1.
72	- Focus: Visible focus indicator (>=2px solid, 3:1 contrast); logical Tab order; no keyboard traps.
73	- Color: Never use color alone to convey information; add text or icons for states (error, success).
74	- Keyboard: All interactive elements reachable via Tab, Enter, Spacebar.
75	- Reduced motion: Respect `prefers-reduced-motion` for animations.
76
77	## Frontend Aesthetics
78
79	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.
80
81	### Typography
82
83	- Avoid generic AI fonts: Inter, Roboto, Arial, system fonts, Space Grotesk. These create cookie-cutter aesthetics.
84	- Distinctive pairing: One display font (headlines, personality) + one refined body font (readability). Choose characterful, unexpected fonts that elevate the interface.
85	- Consistency: Use CSS variables; limit to 3–4 type styles per block.
86
87	### Motion
88
89	- High-impact moments: One well-orchestrated page load with staggered reveals (`animation-delay`) creates more delight than scattered micro-interactions.
90	- Prioritize: CSS-only for HTML; Motion library for React when available. Scroll-triggering and hover states that surprise.
91	- Accessibility: Always respect `prefers-reduced-motion`; provide reduced or no-motion alternatives.
92
93	### Spatial Composition
94
95	- Unexpected layouts: Asymmetry, overlap, diagonal flow, grid-breaking elements.
96	- Balance: Generous negative space OR controlled density—choose intentionally.
97	- Hierarchy: Clear visual flow; avoid predictable, evenly-distributed layouts.
98
99	### Backgrounds & Visual Details
100
101	- Atmosphere over flat: Create depth rather than defaulting to solid colors.
102	- Techniques: Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, grain overlays.
103	- Context: Match effects to overall aesthetic; don't distract from content.
104
105	### Never
106
107	- Overused font families (Inter, Roboto, Arial, system fonts)
108	- Clichéd color schemes (e.g., purple gradients on white)
109	- Predictable layouts and cookie-cutter component patterns
110	- Design that lacks context-specific character
111	- Emojis as UI icons (use SVG: Heroicons, Lucide, Simple Icons)
112
113	## AI Brand Aesthetics (Optional)
114
115	For AI/SaaS products, consider these visual trends and brand archetypes; adopt, ignore, or counter consciously to avoid sameness.
116
117	### Visual Trends
118
119	\| Trend \| Signal \|
120	\|-------\|--------\|
121	\| Off-white / beige \| Trust, restraint, premium without gloss \|
122	\| Organic gradients \| Distinctiveness; add grain, texture \|
123	\| Digital impressionism \| Mood over literal; suggestive, not descriptive \|
124	\| Lomo / imperfect \| Exploratory, human creativity \|
125	\| Contemporary realism \| Precision, reliability, mastery \|
126	\| Sketch / scribble \| Human thought, exploration over certainty \|
127	\| Non-brand academia \| Authority; work speaks for itself \|
128	\| Technical illustrations \| Rigor, engineering depth \|
129	\| Quirky cuteness \| Approachability; counter doomsday narratives \|
130	\| Morphing objects \| Emergence, systems that learn \|
131	\| Futuristic surrealism \| Gateway to new worlds \|
132	\| Outer space \| Exploration, unknown \|
133	\| ASCII / pixels \| Retro, playful, technical \|
134	\| Generative art \| Algorithmic, living system \|
135
136	### Brand Archetypes
137
138	\| Archetype \| Tone \| Visual \|
139	\|-----------\|------\|--------\|
140	\| Likeable Leaders \| Seriousness, stability, trust \| Muted greys, warm beiges; impressionistic \|
141	\| Gentle Humanists \| People before tech \| Hand-drawn, everyday moments, nature \|
142	\| Nerdy Idealists \| Engineering culture \| Unpolished, quirky, non-branded \|
143	\| Bold Builders \| Groundbreaking, transformative \| Dark palettes, space references \|
144	\| Utopian Dreamers \| What becomes possible \| Retrofuturistic, surreal worlds \|
145
146	## Return Visual Identity Context
147
148	When returning confirmed visual identity context through Contextus, include:
149
150	```markdown
151	## 12. Visual Identity (Optional)
152
153	Colors: Primary #XXX, secondary #XXX; backgrounds #XXX
154	Typography: Headings (font, weight, color); Body (font, weight, color)
155	Sizes: Hero Xpt, section Xpt, body Xpt
156	Spacing: Margins Xpx; section padding Xpx
157	Layout: Viewport, top bar, footer heights if fixed
158	```
159
160	## Slides & Documents (Non-Web)
161
162	When the user asks for deck or document branding—not only websites:
163
164	- Slide master: Background color from token; title font = display/heading token; body = body token; default title/body sizes aligned to type scale from branding / Section 12.
165	- Theme colors: Map primary, secondary, background, text, and one accent to the presentation app's theme (PowerPoint Design → Variants, Google Slides Theme, Keynote Document settings) so shapes and charts inherit palette.
166	- Charts & shapes: Cycle accents in a fixed order (e.g. primary → secondary → tertiary) instead of random colors; keeps decks on-brand.
167	- Documents: Same fonts and heading hierarchy as web where possible; specify paragraph style names (Title, Heading 1–3, Normal) with point sizes and colors.
168
169	Strategy and narrative layers remain in branding; this section is visual execution for office/slide tools.
170
171	## Brand Guidelines Structure (Single Source of Truth)
172
173	Ensure consistency across touchpoints. Include:
174
175	- Logo: Usage rules, clear space, minimum sizes, variants (light/dark)
176	- Colors: Primary, secondary, CTA, background, text (HEX, RGB, CMYK)
177	- Typography: Font families, hierarchy, sizing, spacing
178	- Imagery: Photography tone, subject matter, visual mood
179	- Iconography: Style, stroke weight, usage rules
180
181	## Output Format
182
183	- Typography spec (fonts, weights, sizes, colors)
184	- Color palette (HEX, usage rules, industry mapping)
185	- Spacing scale
186	- Logo clear space and variants
187	- Frontend aesthetics (optional): Motion, spatial composition, backgrounds—for distinctive implementation
188	- Anti-patterns and accessibility checklist
189	- AI products (optional): Visual trend and archetype alignment
190	- Contextus for maintained project-specific visual identity
191	- Slides/documents (when requested): theme mapping + master typography + chart accent order
192
193	## Related Skills
194
195	- branding: Brand strategy; visual identity strategy; this skill implements typography, colors, spacing
196	- logo-generator: Logo placement, clear space; brand visual defines logo rules
197	- favicon-generator: Favicon aligns with brand mark and colors
198	- media-kit-page-generator: Media kit hosts brand guidelines document; links to logo, favicon
199	- hero-generator: Hero uses brand typography, colors, spacing
200	- 404-page-generator: Error pages maintain brand consistency
201