Logo Studio

Logo Design Studio

A professional logo design studio combining three industry-standard methodologies — Rand's Reductive Rationalism, Pentagram's Strategy-to-Craft, and Neumeier's Brand Gap — to produce distinctive, memorable brand marks as clean, hand-coded SVG.

Capabilities

• Extracts brand essence through structured discovery interviews
• Maps brands to Jungian archetypes for psychology-informed visual direction
• Generates 9+ distinct SVG logo concepts across 3 strategic directions
• Produces clean, compatible SVG markup with real typography (Google Fonts) or geometric construction
• Presents all concepts in a self-contained HTML gallery with light/dark backgrounds, zoom, and variant strips
• Supports iterative refinement cycles based on user selection and feedback
• Produces a complete app asset package (iOS, Android, macOS, Windows, favicons, PWA, social) from the final logo
• Produces a multi-page brand guidelines document (logo rules, color palette, type scale, layout, UI components, motion, voice, asset management) at the end of the session, offered in Essentials / Standard / Full depth modes

Workflow

Phase 1: Brand Discovery

The discovery phase extracts the information needed for strategic logo design.

Discovery Interview

Personality Spectrums

Position the brand on these axes (1-10):

Traditional ←————→ Modern
Playful     ←————→ Serious
Luxurious   ←————→ Accessible
Bold        ←————→ Subtle
Organic     ←————→ Geometric

See methodologies.md for how each methodology approaches the discovery process.

Phase 2: Strategic Positioning

Archetype Mapping

Each brand maps to one of 12 Jungian archetypes. The archetype determines the visual vocabulary — shapes, colors, typography, and composition style.

See brand-psychology.md for the complete archetype-to-visual mapping, color psychology, shape psychology, and typography psychology.

Competitive Landscape

Competitor logos are mapped on two axes to identify visual white space:

Axis 1: Traditional ←→ Modern
Axis 2: Playful ←→ Serious

Logo concepts target the empty quadrants — visual territory not yet claimed.

Three Strategic Directions

Phase 3: Concept Generation

Concept Matrix

Each direction produces 3 logo types, yielding a minimum of 9 concepts:

Expandable with additional types: lettermark, abstract mark, emblem.

Concept Development

Each concept follows the Reductive Rationalism process:

1. Start with the core idea from the Only Statement
2. Generate visual metaphors — forced connections between brand noun + unexpected associations
3. Thumbnail: quantity over quality
4. Reduce: strip to essential elements
5. Test mentally: is it drawable from memory?

See methodologies.md for the full process from each methodology.

Phase 4: SVG Construction

Technical Standards

Typography Strategy

Logo wordmarks use real typography by default. The HTML gallery loads Google Fonts so <text> elements render with the intended typeface during preview and iteration.

Every font-family cascades to a system fallback — e.g. 'Inter', -apple-system, sans-serif — so the logo never renders in Times New Roman.

See typography.md for the curated font catalog (Inter, Work Sans, Fraunces, Playfair Display, Space Grotesk, Manrope, Archivo, and more), classic pairings, licensing, and the text-vs-path decision tree.

SVG Skeletons

Symbol / Icon:

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradients, clipPaths, reusable elements -->
  </defs>
  <!-- Logo construction from geometric primitives -->
</svg>

Wordmark with real typography:

<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
  <text x="200" y="65" text-anchor="middle"
        font-family="Inter, -apple-system, system-ui, sans-serif"
        font-size="48" font-weight="800" letter-spacing="-1"
        fill="#0A0A0A">Acme</text>
</svg>

Combination mark (symbol + typographic wordmark):

<svg viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(20, 30)">
    <!-- Symbol from primitives -->
    <circle cx="30" cy="30" r="28" fill="#0071e3"/>
  </g>
  <text x="90" y="72"
        font-family="Inter, system-ui, sans-serif"
        font-size="42" font-weight="700"
        fill="#0A0A0A">Acme</text>
</svg>

Color Variants

Each logo is produced in three variants:

See svg-techniques.md for geometric construction methods, bezier curves, symmetry, golden ratio, and compatibility rules.

Phase 5: Studio Presentation

Gallery Output

All concepts are presented in a self-contained HTML file based on the gallery template.

Output path: ./logo-studio-{brandname}.html in the working directory.

After writing the file, it is opened with open (macOS), xdg-open (Linux), or start (Windows).

Gallery Card Structure

┌─────────────────────────────┐
│  [Light BG]  │  [Dark BG]   │  ← Side-by-side display
├─────────┬─────────┬─────────┤
│ Color   │  Mono   │ Reversed│  ← Variant strip
├─────────┴─────────┴─────────┤
│ [ID] Concept Name           │
│ Description + rationale     │
│ #tag #tag #tag              │
└─────────────────────────────┘

Gallery Sections

Cards are grouped by strategic direction:

• Section: Direction A — "Conservative / Archetype-aligned"
• Section: Direction B — "Distinctive / Hybrid"
• Section: Direction C — "Disruptive / Category-breaking"

Phase 6: Iteration

Feedback Protocol

Users reference concepts by ID (e.g., "A1", "C2").

Quality Gates

Each finalist is evaluated against six tests:

See evaluation-criteria.md for detailed evaluation frameworks.

Iteration Gallery

Each iteration produces an updated HTML file: logo-studio-{brandname}-r{N}.html

The updated gallery contains the refined/new concepts with a header noting the round number.

Final Logo Deliverables

The final selected logo is exported as:

The working file (logo-{name}.svg) remains editable. The outlined version is the delivery asset for print, merch, and environments where the font may not load.

Phase 7: App Asset Production

After the final logo is selected, Phase 7 generates a complete app asset package for every major platform from a canonical icon master.

Icon Master

The icon master is a square-format SVG derived from (but distinct from) the final logo:

The icon master is the input to the build pipeline. It is a separate artifact from the logo because icons and logos have different jobs — see app-assets.md for the full design rationale.

Platform Outputs

Tool Stack

See app-assets.md for the full tool comparison, platform specifications, and gotchas (especially font handling in headless SVG rasterization).

Build Pipeline

The complete pipeline is scripted in build-assets.mjs:

# Install prerequisites (one time)
npm i -D sharp favicons pwa-asset-generator svgo png-to-ico

# Run the build
node build-assets.mjs

Pipeline stages:

1. Optimize source SVGs with svgo
2. Generate favicon/iOS/Android/Windows package with favicons
3. Build macOS .iconset with sharp, then iconutil → .icns
4. Build iOS AppIcon.appiconset (light + dark + tinted 1024 PNGs)
5. Generate social/Open Graph images
6. Optimize all PNGs with pngquant + oxipng

Output Structure

dist/assets/
├── logo.svg                         # Optimized source logo
├── icon-master.svg                  # 1024×1024 square icon master
├── AppIcon.appiconset/              # iOS asset catalog
├── AppIcon.icns                     # macOS compiled icon
├── android/                         # Adaptive + legacy densities
├── windows/                         # .ico + UWP tiles
├── web/                             # favicons, PWA manifest, safari-pinned-tab
└── social/                          # OG, Twitter, profile images

Critical Typography Note

SVG rasterizers (sharp, librsvg, resvg) render <text> elements using system-installed fonts. In CI or on machines missing the brand font, the output silently substitutes a fallback font. The icon master sidesteps this by using outlined paths — the working SVG keeps live text, the icon master ships outlined.

See typography.md for the dual-output workflow.

Phase 8: Brand Guidelines Document

After the final logo is selected, Phase 8 offers to produce a multi-page brand guidelines document — the single source of truth for how the identity is applied across every touchpoint. The offer is explicit; the document is not generated automatically.

Offer Point

The offer is presented after Phase 6 (logo finalization) and is independent of Phase 7 (app assets). Either phase may precede it. A user who declines app assets can still request guidelines; a user who takes app assets is offered guidelines next.

Depth Modes

Standard is the default when the brand brief mentions digital product, app, web, or deck contexts. Essentials is the default for identity-only engagements. Full is opt-in.

Input Sources

Most of the document is filled in from Phases 1–6 context without re-prompting — brand name, audience, tone, primary colors, signature element, logo variants, and typography are all already established. A short extension interview captures the remaining inputs (version, clear-space rule, minimum size, naming convention, voice attributes, and — in Full mode — motion timings) with a default proposed for every item.

See brand-guidelines.md for the complete section order, per-section input spec, extension-interview checklist, and default content library.

Guidelines Template

The document is assembled from brand-guidelines-template.html — a self-contained HTML scaffold with CSS custom properties for brand colors, @page rules for PDF conversion, and {{TOKEN}} placeholders for every field (logo SVGs, color swatches, type scale, component entries, voice/motion rows, footer line). Sections omitted by the chosen depth mode have their entire <section> block removed at render time.

The document is styled with the brand being documented — its heading font, its primary accent color, its signature element color — so the artifact demonstrates the guidelines it contains.

Output

After writing the HTML, it is opened with open / xdg-open / start. PDF conversion is a separate explicit step; command examples are in brand-guidelines.md.