Logo Design Principles¶

OWNER: Christel (Brand Identity Designer) ALSO_USED_BY: Tobias (UI/UX Designer), Faye (Team Alfa PM), Sytske (Team Bravo PM), Aimee (Scoping Agent) LAST_UPDATED: 2026-03-28 CONFIDENCE: High — established design discipline with stable best practices

Why This Matters¶

Every client project that passes through GE will need a logo or logo evaluation. Christel must be able to design logos that are professional, versatile, and systematized — not one-off artwork. Logos produced by GE become the keystone of the entire visual identity system delivered to the client.

The Five Principles of Effective Logo Design¶

These are non-negotiable. Every logo Christel produces must pass all five.

1. Simplicity¶

A logo must be reducible to its essence. If you cannot describe it in one sentence, it is too complex.
Simple logos are easier to recognize at a glance (sub-second recognition).
Test: Can it work as a single-color silhouette? If not, simplify.
The Nike swoosh, Apple apple, and Target target all pass this test.

2. Memorability¶

Directly linked to simplicity — but adds distinctiveness.
The logo must have a "hook": an unusual angle, a clever negative space, or a distinctive proportion.
Test: Show someone the logo for 5 seconds. Can they sketch it roughly from memory?

3. Timelessness¶

Avoid trend-driven design. Gradients, drop shadows, and ultra-thin lines come and go.
Ask: "Will this look dated in 10 years?" If the answer is uncertain, strip back.
The best logos from the 1960s–1970s (IBM, Shell, Lufthansa) still work today because they relied on geometry and clarity, not style.

4. Versatility¶

Must work at 16px (favicon) and on a billboard.
Must work in full color, single color, reversed (white on dark), and grayscale.
Must work on screen (RGB, 72–144 ppi) and in print (CMYK, 300 dpi).
Must work embroidered, engraved, stamped — physical production matters for SME clients.

5. Appropriateness¶

A children's brand should not look like a law firm. A fintech should not look like a bakery.
Appropriateness is NOT about being literal (a dentist logo does not need a tooth).
It IS about tone: weight, geometry, color temperature, and typographic voice.

Logo Types¶

Christel must know which type fits a given client. The choice depends on name length, industry, target audience, and how the logo will be used.

Type	Description	Best For	Examples
Wordmark (logotype)	Company name in custom or modified typography	Short, distinctive names (max ~8 chars)	Google, Coca-Cola, FedEx
Lettermark (monogram)	Initials only	Long company names, B2B	IBM, HBO, CNN
Brandmark (symbol)	Icon/symbol only, no text	Established brands with high recognition	Apple, Twitter/X, Nike
Combination mark	Symbol + wordmark, separable	New brands needing flexibility	Adidas, Burger King, Lacoste
Emblem	Text enclosed within symbol (inseparable)	Heritage brands, institutions	Starbucks, Harley-Davidson, BMW

Default recommendation for GE clients: Combination mark. It gives the most flexibility — the symbol can be used alone as the brand matures, while the wordmark provides name recognition early on.

The Logo Design Process¶

Phase 1: Discovery (Input from Aimee/Anna/Client)¶

Understand the business: what they do, who they serve, what makes them different.
Review competitor logos — identify the visual "language" of the industry, then decide whether to conform or contrast.
Identify constraints: existing brand colors? Legal/trademark issues? Cultural sensitivities?
Define the brand personality in 3–5 adjectives (e.g., "bold, approachable, modern").

Phase 2: Concept Development¶

Sketch broadly — minimum 20 rough concepts. Do not self-edit too early.
Explore different logo types (wordmark, combination, etc.) — do not commit to one type prematurely.
Work in black and white ONLY at this stage. Color is a distraction during form development.
Use geometric construction (circles, rectangles, golden ratio) to give the mark structure.

Narrow to 2–3 strongest concepts.
Digitize in vector (SVG). Clean up curves, align to pixel grid for screen rendering.
Test at multiple sizes: 16px, 32px, 48px, 128px, 512px, and large format.
Test in context: on a website header, app icon, business card, social media avatar.
Apply color — start with one accent color + neutral. Build the palette later.

Phase 4: Presentation¶

Present 2–3 options with rationale. Never present a single option ("take it or leave it") or more than 3 (decision paralysis).
Show each option in real-world mockups, not on a white artboard.
Include the usage system: primary logo, secondary layout, icon, and favicon.

Phase 5: Finalization¶

Incorporate feedback. Maximum 2 revision rounds (scope this in the work package).
Produce the Minimum Viable Logo System (see below).
Export all required formats (see deliverables checklist).

Grid Systems and Golden Ratio¶

Grid Construction¶

Overlay a grid on the logo workspace. Common grids: 8-unit, 12-unit, or a custom grid derived from the letterforms.
Align key elements (curves, endpoints, counters) to grid intersections.
Grids ensure optical consistency — elements that "feel" aligned actually are.

Golden Ratio (1:1.618)¶

Useful for proportioning elements: the relationship between a symbol and its wordmark, the size of inner vs outer shapes.
Do NOT force it. The golden ratio is a tool, not a rule. If a shape looks better at 1:1.5, use 1:1.5.
Circular logo construction: use golden ratio circles (each 1.618x the previous) to define curves and intersections.

Optical Corrections¶

Mathematical alignment is not the same as visual alignment. Round shapes must extend slightly beyond the baseline to appear aligned. Pointed shapes must extend further still.
Horizontal strokes appear thicker than vertical strokes at the same weight — compensate.
These corrections are what separate professional work from amateur work.

Responsive Logo Design¶

Logos must adapt across contexts. This is NOT just "make it smaller."

The Logo Cascade¶

Level 1: Full logo (combination mark — symbol + wordmark + tagline)
         Used: Website header (desktop), print materials, presentations

Level 2: Compact logo (symbol + wordmark, no tagline)
         Used: Website header (tablet), email signatures, social banners

Level 3: Symbol only (brandmark)
         Used: App icon, social avatar, small UI placements

Level 4: Favicon / micro icon (simplified symbol)
         Used: Browser tab, 16x16 / 32x32 contexts

Rules¶

Each level must be a DELIBERATE design, not an automated crop.
Detail is REMOVED as size decreases. Fine lines, thin strokes, and small text disappear at small sizes.
At favicon size, the mark may be a single letter or the most recognizable fragment of the symbol.
All levels must be recognizably the same brand.

Minimum Viable Logo System (MVLS)¶

Every GE client delivery must include at minimum:

Asset	Format	Color Variants
Primary logo (horizontal)	SVG, PNG (@1x, @2x, @3x)	Full color, white, black
Secondary logo (stacked)	SVG, PNG (@1x, @2x, @3x)	Full color, white, black
Symbol / icon	SVG, PNG (@1x, @2x, @3x)	Full color, white, black
Favicon	ICO (16, 32, 48), SVG	Full color on transparent
App icon	PNG (1024x1024 master)	Full color (iOS/Android templates)
Social avatar	PNG (400x400, 800x800)	Full color on brand background
Open Graph image	PNG (1200x630)	Full color with brand lockup

File Naming Convention¶

{client-slug}-logo-primary-color.svg
{client-slug}-logo-primary-white.svg
{client-slug}-logo-primary-black.svg
{client-slug}-logo-secondary-color.svg
{client-slug}-icon-color.svg
{client-slug}-favicon.ico
{client-slug}-favicon.svg
{client-slug}-appicon-1024.png

Common Logo Design Mistakes¶

Anti-Patterns — Christel Must Avoid These¶

Mistake	Why It Fails	Fix
Designing in color first	Color masks weak form	Always start in B&W
Too many colors (>3)	Increases print cost, reduces recognition	Limit to 2 colors + neutral
Raster-first workflow	Cannot scale, cannot edit	Always work in vector (SVG)
Overly literal imagery	A coffee shop logo with a coffee cup is forgettable	Abstract the concept
Following trends	Gradients, shadows, and "flat" styles date the logo	Prioritize timelessness
Tight clear space	Logo gets visually "crowded" in real usage	Define clear space = height of a key element (e.g., the "x-height")
No dark mode variant	Logo disappears on dark backgrounds	Design light-on-dark version explicitly
Presenting on white only	Client cannot judge real-world impact	Use mockups in context
Wordmark in a system font	Helvetica/Arial wordmarks look generic	Modify or commission letterforms
Not testing at small sizes	Logo breaks at favicon/app icon size	Test at 16px early in process

Checklist: Logo Delivery¶

Before marking a logo work package as complete, verify:

[ ] Logo passes all 5 principles (simplicity, memorability, timelessness, versatility, appropriateness)
[ ] All MVLS assets exported (see table above)
[ ] Works at 16px (favicon) without losing recognizability
[ ] Works in full color, single color (black), reversed (white on dark), and grayscale
[ ] SVG files are clean (no embedded rasters, no unnecessary groups, viewBox defined)
[ ] PNG files include @2x and @3x for retina
[ ] Clear space rules defined and documented
[ ] Minimum size rules defined and documented
[ ] Color specifications documented (HEX, RGB, HSL, CMYK, Pantone where applicable)
[ ] Files follow naming convention
[ ] Logo cascade defined (full → compact → symbol → favicon)
[ ] Presented in real-world mockups, not just artboard

References¶

Wheeler, A. — Designing Brand Identity (6th ed.) — the industry bible for brand identity process
Airey, D. — Logo Design Love — practical modern logo design
Mollerup, P. — Marks of Excellence — taxonomy and history of trademarks
Google Material Design — Icon guidelines and grid system documentation
Apple Human Interface Guidelines — App icon specifications and size requirements
W3C SVG specification — for clean, accessible vector output