What is brand-visual-generator for?

It defines, audits, and applies a brand's visual identity—typography, color palette, spacing—and aligns with brand style guides.

What outputs will I get?

A typography system, color palette, spacing guidelines, logo usage rules, and accessibility considerations; plus design tokens for a design system.

When should I invoke this skill?

When creating a new brand visual identity, auditing existing branding, or applying visuals consistently across touchpoints.

brand-visual-generator

npx machina-cli add skill kostja94/marketing-skills/brand-visual --openclaw

Files (1)

SKILL.md

7.5 KB

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.

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 product marketing context first: If .claude/product-marketing-context.md or .cursor/product-marketing-context.md exists, read Section 12 (Visual Identity) for colors, typography, spacing. See branding for brand strategy and visual identity strategy layer.

Identify:

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

Best Practices (2025)

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. Recommended: Inter, Source Sans 3, Poppins. Neutral personality; supports content without competing.
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.

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.

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

Product Marketing Context (Section 12)

When creating or updating .cursor/product-marketing-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

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

Source

git clone https://github.com/kostja94/marketing-skills/blob/main/skills/components/brand-visual/SKILL.mdView on GitHub

Overview

This skill guides the visual identity of a brand across typography, color, spacing, and logo usage to ensure consistency. It helps define, audit, or apply a brand’s visual system across touchpoints, driving recognition and trust.

How This Skill Works

It starts with an initial assessment of scope, touchpoints, and existing assets, then defines typography, color palettes, and spacing rules aligned to brand guidelines. Outputs typically include a typography system, color palette, spacing grid, logo usage rules, and accessibility checks, packaged for a style guide or design system.

When to Use It

Define a new visual identity across touchpoints (web, print, product UI).
Audit an existing visual identity—typography, color palette, and spacing—for consistency.
Apply the brand visual system to a project or component, aligning with guidelines.
Create or update a design system or design tokens for brand visuals.
Align visuals with brand style guides and brand guidelines across channels.

Quick Start

Step 1: Assess scope, touchpoints, and existing brand assets (logo, style guide).
Step 2: Define typography, color palette, spacing system, and logo usage rules.
Step 3: Compile outputs into a brand style guide and, if needed, a design system with tokens; validate accessibility.

Best Practices

Adopt a two-font system: a display font for headlines and a body font for text, ensuring clear contrast and cohesion.
Prioritize legibility for body text: high x-height, open counters; suggested fonts include Inter, Source Sans 3, and Poppins.
Define a headline font that expresses brand voice and remains readable quickly (under a second one-scan readability).
Establish a disciplined type scale (ratios of 1.25–1.5) and limit to 3–4 styles per block; pair decorative fonts only with neutral typefaces.
Build robust spacing rules: consistent margins/grid, clear logo clear space, and a max line length around 120 characters with generous line-height; ensure accessible color contrast.

Example Use Cases

A fintech brand defines Inter as the body text and a geometric display font for headlines, using a 1.33 type scale across marketing assets.
A fashion retailer audits colors to align with a luxury palette (rose gold, burgundy, black) and creates a spacing grid for print and digital.
A SaaS product applies a design system with typography, color, and spacing tokens across UI components.
A marketing team updates logo usage rules for primary/secondary/monogram on light and dark backgrounds.
An accessibility-focused revamp ensures contrast ratios of at least 4.5:1 for normal text and 3:1 for large text across assets.

Frequently Asked Questions

Add this skill to your agents