Skip to content

Visual Identity Systems

OWNER: Christel (Brand Identity Designer) ALSO_USED_BY: Tobias (UI/UX Designer), Sandro (Front-End Developer), Boris (Senior Developer), Faye (Team Alfa PM), Sytske (Team Bravo PM) LAST_UPDATED: 2026-03-28 CONFIDENCE: High — mature design discipline

Why This Matters

A logo is not a brand. A visual identity system is the complete toolkit that ensures a brand looks and feels consistent across every touchpoint — website, app, emails, print, social media, packaging, signage. For GE clients, this system must be robust enough that multiple agents (and eventually the client's own team) can produce on-brand work without Christel reviewing every piece.

What Constitutes a Complete Visual Identity

The System Components

Visual Identity System
├── Logo System (see logo-design.md)
├── Color System (see color-systems.md)
├── Typography System
├── Photography / Illustration Style
├── Iconography System
├── Pattern & Texture Library
├── Layout & Grid System
├── Motion / Animation Principles
└── Voice & Tone (visual expression of)

A visual identity is a SYSTEM, not a collection. Each component must relate to the others through shared principles — the same brand personality that drives the logo should inform the type choices, the color palette, and the photography style.

Color Theory for Branding

Color Psychology — Baseline Associations

These are starting points, not rules. Context and culture override psychology.

Color Common Associations Industries Caution
Blue Trust, stability, calm, professionalism Finance, tech, healthcare, corporate Overused — requires differentiation in shade/application
Red Energy, urgency, passion, appetite Food, entertainment, retail, sports Can signal danger/error in UI — use sparingly in digital products
Green Growth, nature, health, money Sustainability, finance, health, organic "Greenwashing" concerns — must be authentic
Yellow Optimism, warmth, attention, caution Children, food, energy, creative Low contrast on white — accessibility challenge
Purple Luxury, creativity, wisdom, royalty Beauty, premium products, creative Can read as "cheap" if shade is wrong
Orange Friendly, energetic, affordable, creative Tech, food, youth, budget Rarely works as a primary for premium brands
Black Sophistication, luxury, power, elegance Fashion, luxury, tech, premium Can feel cold/unapproachable without warmth
White Clean, minimal, pure, spacious Healthcare, tech, luxury, minimal Requires strong secondary colors to avoid feeling empty

Cultural Associations

  • White = mourning in parts of East Asia; purity in Western cultures.
  • Red = luck/prosperity in Chinese culture; danger in Western contexts.
  • Green = Islam; environmentalism; money (US).
  • Yellow = cowardice (Western); royalty (China).
  • For GE's EU-focused SME clients, Western European associations are the primary frame, but always ask about target market demographics.

Building a Brand Color Palette

The 60-30-10 Rule: - 60% dominant (usually neutral: white, off-white, dark gray) - 30% secondary (brand primary or secondary color) - 10% accent (high-contrast, high-energy color for CTAs and highlights)

Palette Structure: 

Brand Colors (from logo/identity)
├── Primary:    The main brand color (1 color)
├── Secondary:  Supporting brand color (1–2 colors)
├── Accent:     High-contrast action color (1 color)
├── Neutrals:   Gray scale from near-white to near-black (5–7 steps)
├── Semantic:   Success (green), Warning (amber), Error (red), Info (blue)
└── Surfaces:   Background, card, elevated, overlay

Full color system details including tokens and dark mode: see color-systems.md.

Typography Systems for Brands

Selecting Typefaces

The Decision Framework: 1. What is the brand personality? Map adjectives to type classifications. 2. Where will it be used? Screen-first? Print-first? Both? 3. What is the language coverage? Latin-only? Cyrillic? Greek? Arabic? 4. What is the budget? Free (Google Fonts, open source) or licensed? 5. What is the technical context? Variable font support? Web performance budget?

Type Classification Quick Reference:

Classification Personality Best For
Geometric sans (Futura, Montserrat, Inter) Modern, clean, neutral Tech, SaaS, startups
Humanist sans (Fira Sans, Open Sans, Source Sans) Friendly, readable, warm Content-heavy, accessibility-first
Neo-grotesque sans (Helvetica, Arial, Roboto) Professional, universal, safe Corporate, government, healthcare
Transitional serif (Georgia, Merriweather, Charter) Trustworthy, editorial, established Finance, law, publishing
Modern serif (Didot, Playfair Display, Libre Bodoni) Elegant, fashion, luxury Beauty, luxury, editorial
Slab serif (Rockwell, Roboto Slab, Zilla Slab) Strong, confident, industrial Construction, manufacturing, bold brands
Monospace (JetBrains Mono, Fira Code, IBM Plex Mono) Technical, code, raw Dev tools, tech brands, data

Pairing Rules

  1. Contrast, not conflict. Pair a serif heading with a sans body, or a display face with a neutral workhorse. Do not pair two faces that are similar-but-different (e.g., Helvetica + Arial).
  2. Maximum two families for most brands. Three is the ceiling. One display/heading + one body is the sweet spot.
  3. Same superfamily is safe. IBM Plex Sans + IBM Plex Serif. Source Sans + Source Serif. These are designed to work together.
  4. Match x-height. When pairing across families, match the x-height so they feel proportional at the same font-size.
  5. Variable fonts preferred. One file, all weights/widths. Better performance, more flexibility.

Type Hierarchy (for Digital Products)

Display:     Hero headlines, marketing pages
             48–72px (desktop), 32–48px (mobile)
             Font: Display/heading face, bold or medium weight

Heading 1:   Page titles
             32–40px (desktop), 24–32px (mobile)

Heading 2:   Section titles
             24–32px (desktop), 20–24px (mobile)

Heading 3:   Subsection titles
             20–24px (desktop), 18–20px (mobile)

Body:        Paragraph text
             16–18px (desktop), 16px (mobile) — NEVER below 16px on mobile

Body Small:  Captions, metadata, helper text
             14px — use sparingly

Label:       Form labels, buttons, navigation
             14–16px, medium or semibold weight

Code:        Inline code, code blocks
             14–16px, monospace family

Line height: 1.4–1.6 for body text. 1.1–1.3 for headings. Paragraph width: 45–75 characters per line. 66 characters is optimal.

Photography / Illustration Style

Photography Style Guide Components

  1. Subject matter — What do we show? People? Products? Environments? Abstract?
  2. Composition — Rule of thirds? Centered? Overhead? Close-up?
  3. Color treatment — Warm? Cool? Desaturated? Vibrant? Brand color overlay?
  4. Lighting — Natural? Studio? Dramatic? Flat? Direction?
  5. Post-processing — Grain? Contrast? Matte? Clean?
  6. People — Diversity requirements. Posed vs candid. Eye contact vs environmental.
  7. Exclusions — What we NEVER show (stock cliches: handshakes, pointing at screens, corporate high-fives).

Illustration Style Guide Components

  1. Style — Line art? Flat? Isometric? 3D? Hand-drawn? Geometric?
  2. Line weight — Consistent stroke width or varied?
  3. Color — Brand palette only? Extended palette? Gradients allowed?
  4. Level of detail — Minimal/icon-like or rich/detailed?
  5. Perspective — Flat/2D? Isometric? Mixed?
  6. Human figures — Proportions, features, diversity, level of abstraction.
  7. Metaphor rules — How abstract concepts are represented visually.

For GE Agents

When Christel defines the photography/illustration style, this MUST be documented in a way that Tobias (UI/UX) and Sandro (Front-End) can apply without ambiguity. Use: - Reference image boards (3x3 grid of "yes" examples, 3x3 grid of "no" examples) - Named Figma/design token presets for color filters - Specific stock photography sources and search terms

Iconography Systems

Icon Design Principles

  1. Consistent stroke weight across all icons (e.g., 1.5px at 24px base size).
  2. Consistent corner radius (e.g., 2px rounds).
  3. Pixel-perfect at base size — design on a 24x24 grid with 2px padding (20x20 live area).
  4. Optical balance — visually center icons, not mathematically center them.
  5. Filled vs outlined — pick ONE as the default. Use the other for state changes (e.g., outlined = inactive, filled = active).

Icon Grid Standard

┌────────────────────────┐
│  2px padding            │
│  ┌──────────────────┐  │
│  │                  │  │
│  │   20x20 live     │  │
│  │   area           │  │
│  │                  │  │
│  └──────────────────┘  │
│                 24x24   │
└────────────────────────┘

Icon Categories for SaaS Products

  • Navigation: Home, search, menu, back, close, settings
  • Actions: Add, edit, delete, save, share, download, upload, filter, sort
  • Objects: User, file, folder, calendar, clock, notification, message
  • Status: Success, warning, error, info, loading
  • Commerce: Cart, payment, invoice, shipping
  • Social: Email, phone, LinkedIn, Instagram (use official brand assets)

Sourcing Strategy for GE

  1. Prefer open-source icon sets that can be customized: Lucide, Phosphor, Heroicons, Tabler.
  2. Customize to match brand — adjust stroke weight, corner radius, and style to align with the visual identity.
  3. Custom icons only when needed — for unique product concepts not covered by standard sets.
  4. Never mix icon sets without harmonizing them first.

Pattern and Texture Libraries

When to Use Patterns

  • Background fills for sections, cards, or hero areas
  • Texture overlays for depth (subtle)
  • Brand differentiation (distinctive geometric patterns are highly ownable)
  • Empty states and loading screens in UI

Pattern Construction

  1. Derive from the logo or brand elements — use the same geometry, angles, or motifs.
  2. Keep it subtle — patterns should support, not compete with content.
  3. Build on a tile grid — seamless repeat in both axes.
  4. Provide at multiple densities — tight pattern for small areas, loose for large.
  5. Define opacity/blend rules — typically 5–15% opacity over backgrounds.

Texture Do's and Don'ts

  • DO use subtle grain/noise to add warmth to flat digital surfaces (1–3% noise).
  • DO provide texture as CSS/SVG, not as raster images (performance).
  • DON'T use textures that increase page weight significantly.
  • DON'T use skeuomorphic textures (leather, wood, paper) unless the brand explicitly calls for it.

Building a System That Scales

The visual identity must work when applied by people (and agents) who did not design it. This is the hardest part.

Principles for Scalable Systems

  1. Rules over taste. Every decision must be expressible as a rule. "Use #1A73E8 for primary buttons" beats "use a nice blue."
  2. Tokens over values. Define design tokens (color-primary, spacing-md, radius-sm) and reference tokens, not raw values.
  3. Examples over descriptions. Show what "correct" and "incorrect" look like side by side.
  4. Constraints over freedom. A system with fewer options is easier to use consistently. Limit the palette, limit the type scale, limit the spacing scale.
  5. Automated enforcement. Where possible, bake the system into code: CSS custom properties, Tailwind config, Figma component libraries. If the system can be violated, it will be.

The Consistency Spectrum

Most Constrained ←──────────────────────────→ Most Free
Tokens/Variables    Components    Templates    Layouts    Compositions
(colors, spacing)   (buttons)    (pages)      (grids)    (marketing)

Constrain heavily on the left. Allow creative freedom on the right.

For GE's Multi-Agent Context

  • Christel defines the system.
  • Tobias consumes it for UI design.
  • Sandro consumes it for front-end implementation.
  • The system must be documented in a way that an LLM agent can interpret and apply without visual judgment.
  • This means: explicit values, named tokens, clear rules with examples, and machine-readable formats (JSON design tokens, Tailwind config).

Checklist: Visual Identity System Delivery

Before marking a visual identity work package as complete:

  • [ ] Logo system complete (per logo-design.md checklist)
  • [ ] Color system defined with tokens (per color-systems.md checklist)
  • [ ] Primary + secondary typefaces selected with rationale
  • [ ] Type scale defined (display through caption, with line heights)
  • [ ] Type pairing tested in real layouts
  • [ ] Photography/illustration style guide with "yes" and "no" examples
  • [ ] Iconography style defined (stroke, radius, grid, filled vs outlined)
  • [ ] Base icon set selected or created (min: navigation + actions + status)
  • [ ] Pattern/texture library defined (at least 1 ownable pattern)
  • [ ] All specifications provided as design tokens (JSON) for developer handoff
  • [ ] Tailwind/CSS config generated from tokens
  • [ ] Brand book created (per brand-book-creation.md)
  • [ ] System tested across: website, mobile app, email, social media, print
  • [ ] Accessibility audit: contrast ratios, color blindness simulation, font sizes

Anti-Patterns

Anti-Pattern Why It Fails What to Do Instead
Designing components, not a system Inconsistency across touchpoints Define principles and tokens first, then derive components
Too many options Decision paralysis, inconsistency Constrain: 1 primary color, 5 neutrals, 2 type families
No dark mode consideration Retrofit is expensive and often ugly Design light and dark simultaneously from the start
PDF-only delivery Nobody opens a 60-page PDF Deliver as living documentation (web-based, tokenized)
Designing for desktop only Mobile is usually 60%+ of traffic Mobile-first, then scale up
Ignoring accessibility Legal risk, excludes users WCAG AA minimum from day one
One-time delivery, no maintenance Systems decay without governance Include update/governance process in delivery
Subjective guidelines ("use warm tones") Different people interpret differently Specific values: "#F5E6D3 at 40% opacity on white"

References

  • Wheeler, A. — Designing Brand Identity (6th ed.)
  • Muller-Brockmann, J. — Grid Systems in Graphic Design
  • Itten, J. — The Art of Color
  • W3C Design Tokens Community Group — format specification for interoperable design tokens
  • Material Design 3 (Google) — comprehensive public design system reference
  • Apple Human Interface Guidelines — platform-specific design system
  • Atlassian Design System — excellent example of scalable, documented identity
  • Figma — Design Systems resource hub