npbuilds Visual Identity — How the Brand Looks
The visual translation of brand strategy into a coherent system of marks, colors, imagery, and patterns. Every visual decision should trace back to a strategic rationale.
Logo Systems
Logo Types
| Type | What It Is | Best For | Example Pattern |
|---|---|---|---|
| Wordmark | Brand name in custom typography | Distinctive names, established brands | Custom lettering of the brand name |
| Lettermark | Initials/monogram | Long names, acronym-known brands | 2-3 letters, geometric treatment |
| Symbol/Icon | Abstract or pictorial mark | Universal recognition at scale | Geometric shape, simplified object |
| Combination | Symbol + wordmark together | New brands building recognition | Icon left/above, name right/below |
| Emblem | Name embedded in symbol | Heritage, authority, institutions | Seal, badge, or crest format |
Logo Design Principles
- Works in one color — if it needs color to be understood, it's too complex
- Readable at 16px — favicons, app icons, social avatars. Test at the smallest size first.
- Distinct silhouette — squint test: is the shape recognizable blurred?
- No more than 2 visual ideas — a clever mark has one concept. Two is pushing it. Three is chaos.
- Avoids trends — gradients, glossy effects, and ultra-thin lines date quickly
Logo Variations (The System)
A modern logo isn't one file — it's a system:
| Variation | Use Case | Requirements |
|---|---|---|
| Primary | Main usage, hero placement | Full logo with all elements |
| Simplified | Small sizes, co-branding | Reduced detail, may drop tagline |
| Icon only | Favicons, app icons, avatars | Must work at 16x16px minimum |
| Horizontal | Navigation bars, email signatures | Wide aspect ratio lockup |
| Stacked | Square spaces, social profiles | Compact, roughly 1:1 ratio |
| Reversed | Dark backgrounds | Light version of all variations |
Clear Space
Define minimum clear space around the logo — typically the height of a key letter (like the "x" in the wordmark) on all sides. No other elements encroach on this space.
Brand Color System
Beyond a Palette
A brand color system is not "pick 5 colors you like." It's a functional hierarchy:
| Role | Count | Purpose | Example Usage |
|---|---|---|---|
| Primary | 1-2 | The brand's signature color(s) | Logo, primary buttons, key headings |
| Secondary | 2-3 | Supporting colors for variety | Backgrounds, illustrations, categories |
| Neutral | 3-5 | Text, borders, backgrounds | Body text, dividers, subtle UI |
| Semantic | 3-4 | Functional meaning | Success (green), error (red), warning (amber), info (blue) |
| Extended | As needed | Illustration, data viz, campaigns | Charts, marketing materials, seasonal |
Color Ratios
The 60-30-10 rule adapted for brand:
- 60% neutral — backgrounds, body text, whitespace
- 30% primary — headers, navigation, key UI elements
- 10% accent — CTAs, highlights, moments of emphasis
Color and Accessibility
Every color in the system needs WCAG-tested pairings:
- Normal text: 4.5:1 contrast ratio minimum (AA)
- Large text (18px+ or 14px+ bold): 3:1 minimum (AA)
- Non-text elements (icons, borders): 3:1 minimum
- AAA targets: 7:1 for normal text, 4.5:1 for large
Build a contrast matrix: every foreground color tested against every background it might touch.
Color Derivation from Strategy
| Brand Personality | Color Direction |
|---|---|
| High sincerity | Warm, natural tones — earthy oranges, greens, warm grays |
| High excitement | Saturated, high-energy — electric blue, hot pink, vivid red |
| High competence | Cool, structured — navy, slate, silver, measured blue |
| High sophistication | Restrained, rich — black, gold, deep purple, cream |
| High ruggedness | Earthy, high contrast — dark green, brown, charcoal, rust |
Imagery Direction
Photography Style
Define these parameters for consistent brand photography:
| Parameter | Options | Strategic Link |
|---|---|---|
| Subject matter | People, products, environments, abstract | What the brand wants to emphasize |
| Composition | Centered, rule-of-thirds, asymmetric, overhead | Personality — formal vs dynamic |
| Color treatment | Full color, desaturated, duotone, monochrome | Visual identity color system |
| Lighting | Natural, studio, dramatic, flat | Mood — warm/authentic vs polished |
| Focus | Sharp throughout, shallow depth-of-field | Attention direction |
| People | Candid vs posed, diverse representation | Brand values and audience |
Illustration Style (If Used)
| Decision | Options | Consideration |
|---|---|---|
| Dimensionality | Flat, 2.5D, isometric, 3D | Flat = modern/approachable, 3D = premium/technical |
| Line weight | Thin, medium, thick, variable | Consistent with typography weight choices |
| Color | Full palette, limited palette, monochrome | Must use brand color system |
| Detail level | Minimal/abstract, moderate, highly detailed | More detail = more expensive to produce consistently |
| Character style | None, geometric, realistic, stylized | Must align with brand personality |
Iconography
Icon System Rules
- Consistent stroke weight across all icons (match the brand's typography weight)
- Consistent grid — design on a shared pixel grid (24x24 or 32x32 common)
- Consistent corner radius — sharp, slightly rounded, or fully rounded, applied uniformly
- Consistent fill style — outline, filled, or duotone, not mixed within one context
- Optical alignment — icons should appear the same visual weight, not the same pixel dimensions
Icon Style from Brand Personality
| Personality | Icon Direction |
|---|---|
| Friendly/playful | Rounded corners, thicker strokes, filled style |
| Professional/corporate | Geometric, consistent stroke, outline style |
| Luxury/premium | Thin strokes, generous padding, minimal detail |
| Technical/precise | Pixel-perfect, sharp corners, systematic grid |
Building the System
Brand Guidelines Document Structure
A complete visual identity guide contains:
- Brand Overview — positioning, values, personality (from brand-foundations)
- Logo — all variations, clear space, minimum sizes, misuse examples
- Color — full system with hex/RGB/CMYK values, usage ratios, contrast pairings
- Typography — primary and secondary typefaces, hierarchy, usage rules (from typography director)
- Imagery — photography and illustration direction with examples
- Iconography — style rules, grid, available icons
- Layout Patterns — grids, spacing system, component patterns
- Voice & Tone — writing style, vocabulary, messaging (from brand-voice)
The Consistency Test
For any new brand asset, ask:
- Could this belong to a different brand? If yes, it's not distinctive enough.
- Does this follow the system's rules? If not, is there a documented exception?
- Would someone unfamiliar with the brand recognize the family resemblance? If not, the system needs tightening.
Anti-Patterns
- Logo-first branding — designing the logo before defining strategy
- Collecting "inspiration" without a strategic filter — mood boards need a brief
- Color choices based on personal preference — "I like blue" is not a rationale
- Inconsistent icon styles — mixing outline and filled, or different stroke weights
- No dark mode consideration — modern brands need to work on dark backgrounds
- Infinite color palette — more than 12-15 total colors (including neutrals and semantics) becomes unmanageable