Logo types & design principles
Five common logo types: wordmark (name in custom type), lettermark (initials), emblem (text inside a badge), abstract mark (a non-literal shape) and combination mark (symbol + name). Principles: keep it simple enough to draw from memory; test at 16px and in one color; design for black/white first; build on a grid with clear space; make sure it is distinctive in its category; plan horizontal, stacked and icon-only lockups.
Summary
Five common logo types: wordmark (name in custom type), lettermark (initials), emblem (text inside a badge), abstract mark (a non-literal shape) and combination mark (symbol + name). Principles: keep it simple enough to draw from memory; test at 16px and in one color; design for black/white first; build on a grid with clear space; make sure it is distinctive in its category; plan horizontal, stacked and icon-only lockups.
What it is
A guide to logo types and design principles, illustrated with our own render.
Who it’s for
Anyone starting a logo or reviewing one.
Key takeaways
- Our own illustration and the referenced Wikipedia article: text-first layout with example marks; the illustration uses this site’s paper/ink/vermilion palette.
- Color: monochrome light theme; dominant colors #FFFFFF, #9CA2A9, #DAE0E9 (ESTIMATED from our capture).
- Layout: editorial pattern, educational mood.
Best practices to borrow
- Keep chrome neutral and let content carry color.
- Lead with type: large headings, generous measure and quiet chrome.
- Choose the logo type that fits how the name will be seen (small sizes favor simple marks).
Palette preview
Quick links
Figures
An original illustration made for this library (no third-party logos reproduced).
Dominant palette from our captures
Measured by us from our screenshot(s) of https://en.wikipedia.org/wiki/Logo (median-cut quantization; share = % of pixels). Approximate and not official.
Layout pattern: Editorial
Observed by us on the captured page(s). See all entries by layout.
How to apply it: Lead with type: large headings, generous measure and quiet chrome.
Other entries with this layout: Mailchimp brand assets.
Our analysis
Our own illustration and the referenced Wikipedia article: text-first layout with example marks; the illustration uses this site’s paper/ink/vermilion palette.
Similar to this
Ranked by shared color theme, layout, category, type and mood tags.
Downloads
PDF: research notes made for this library; third-party images inside follow the credits in their captions. License / terms of the source: Illustration: original, made for this library
DESIGN.md for AI coding agents
Copy this into your repo or agent context. OFFICIAL and ESTIMATED values are labelled.
# DESIGN.md · Logo types & design principles (LG-010) > Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens. ## Overview - Type: Guide · Category: H. Logos and Brand Identity - Platforms: Web - Color theme: Monochrome light · Layout pattern: Editorial · Mood: Educational - License / terms: Illustration: original, made for this library Five common logo types: wordmark (name in custom type), lettermark (initials), emblem (text inside a badge), abstract mark (a non-literal shape) and combination mark (symbol + name). Principles: keep it simple enough to draw from memory; test at 16px and in one color; design for black/white first; build on a grid with clear space; make sure it is distinctive in its category; plan horizontal, stacked and icon-only lockups. ### Analysis (ours) Our own illustration and the referenced Wikipedia article: text-first layout with example marks; the illustration uses this site’s paper/ink/vermilion palette. ## Color tokens No official color tokens documented for this entry. ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official: - `#FFFFFF` ~73% - `#9CA2A9` ~4% - `#DAE0E9` ~3% - `#B1BDD3` ~3% - `#3B507D` ~3% ## Typography No official type scale documented for this entry; use the product’s own typography guidance. ## Spacing, radii, shadows Not documented for this entry. Do not invent values; derive from your own design system. ## Components No component inventory documented for this entry. ## Layout rules - Observed layout pattern: **Editorial** (from our captures). ## Do’s and don’ts - Do: Keep chrome neutral and let content (images, icons, type) carry color. - Don’t: Don’t introduce decorative color that competes with content. - Do: follow the source’s license/terms listed above. - Don’t: present ESTIMATED colors as official tokens. ## Sources - https://en.wikipedia.org/wiki/Logo - Library entry: https://design-library-byt.pages.dev/entry/LG-010