Visual Brand Design

Instructions

Typography System

• Type Scale: Establish a complete scale with defined ranges:
• Display: 48–72px (hero headlines, marketing moments)
• H1: 32–40px | H2: 24–28px | H3: 20–22px | H4: 16–18px
• Body Large: 18px | Body: 16px | Body Small: 14px
• Label: 12px | Micro: 10–11px (legal text, timestamps)
• Pairing Rules: Pair a humanist sans-serif with a geometric sans-serif, or use a serif for long-form reading. Never use more than two type families in a single product. Choose typefaces for legibility at target sizes, not novelty.
• Rhythm: Line height 1.4–1.6 for body text, 1.1–1.3 for headlines. Optimal line length 60–80 characters. Use optical sizing — a 12px caption needs more letter-spacing than a 48px display heading.
• Weight System: Define a limited weight palette (Regular, Medium, Semibold, Bold). Avoid using weight alone to create hierarchy; combine with size and color.

Color Theory

• 60 / 30 / 10 Rule: 60% dominant neutral (backgrounds, large surfaces), 30% secondary (cards, sections, supporting elements), 10% accent (CTAs, active states, key highlights).
• Emotional Associations: Blue = trust/stability, Green = growth/success, Red = urgency/danger, Orange = warmth/energy, Purple = luxury/creativity, Yellow = optimism/caution, Gray = neutrality/professionalism. Choose palette foundations that align with brand personality.
• Functional Colors: Define separate semantic palettes for success, warning, danger, and info states. These must be distinct from brand accent colors to avoid ambiguity.
• Dark Mode: Treat dark mode as a first-class design, not a CSS inversion. Use elevated surfaces (not just reversed backgrounds), reduce saturation of brand colors, increase contrast for text, and test all illustration/imagery against dark backgrounds.

Iconography

• Single Family: Choose one icon family (Phosphor, Lucide, Material Symbols) and commit to it across the entire product. Mixing icon families creates visual dissonance.
• Consistency: Maintain uniform stroke weight, corner radius, and optical size across all icons. Use a fixed size grid — 16px (inline), 20px (default), 24px (prominent).
• Labeling: Pair icons with text labels on first exposure. Icon-only buttons require tooltips. Never assume universal icon recognition.
• Custom Icons: When extending the set, match the system’s grid, stroke weight, and style exactly. Custom icons that don’t match the family undermine the entire system.

Imagery & Illustration

• Representation: Imagery must reflect the diversity of the actual user base. Avoid stock photography that feels generic or performative.
• Illustration Style: Define a consistent illustration style (flat, isometric, hand-drawn, 3D) and document stroke weights, color usage, and level of detail. Illustrations support narrative — they never decorate.
• Compression: Use WebP for web delivery, optimize SVGs (remove metadata, simplify paths), and provide responsive image sets (1x, 2x, 3x) for raster assets.

Best Practices

• Create a visual language document before designing screens — palette, type scale, icon family, spacing grid, and illustration style in one reference
• Test color palettes in grayscale first to verify hierarchy works without hue
• Use optical sizing and spacing — visually balanced, not mechanically even
• Design dark mode from the first screen, not as a retrofit
• Never choose a typeface for novelty; choose for legibility at all target sizes
• Never use gradients to fix a contrast problem — fix the underlying palette
• Never place text on busy photography without a scrim or overlay ensuring WCAG contrast