# Logo And Wordmark Design

> Use when constructing or specifying a logo, wordmark, lockups, clear space, responsive marks, favicons, or app icons. Unlike brand-visual-identity, this owns mark geometry and reduction; strategy, palette, typography, and the broader system remain upstream.

- Skill: `peterbamuhigire/logo-and-wordmark-design` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add peterbamuhigire/logo-and-wordmark-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/peterbamuhigire/logo-and-wordmark-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: peterbamuhigire (https://skillmd.com/u/peterbamuhigire)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/peterbamuhigire/logo-and-wordmark-design

---


# Logo and Wordmark Design
Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com.

<!-- dual-compat-start -->
## Use When

- Constructing a mark on an explicit geometry/grid (circle/square modules, golden or
  unit-grid construction, optical correction) and writing down the rules that reproduce it.
- Drawing or specifying a **wordmark / custom lettering**: which letters are modified, the
  spacing/kerning discipline, the one distinguishing letterform detail that makes it ownable.
- Producing the **lockup family**: primary, horizontal, stacked, monogram/glyph-only, and the
  rules for switching between them.
- Setting **clear-space**, **minimum sizes**, and a **responsive logo** ladder (full lockup →
  reduced wordmark → monogram → favicon).
- Building the **favicon + app-icon system** (web `favicon.svg`/ICO, iOS/iPadOS, Android
  adaptive, maskable PWA, monochrome/tinted) from the monogram.
- Specifying **monochrome / reversed / dark-mode** variants and the **misuse sheet** (the
  do-nots that protect the mark).
- Using **interactive wit / a small surprise** (FedEx arrow, I♥NY) and **USP-encoding** as the
  device that earns memorability — not literal depiction.

## Do Not Use When

- The ask is the whole identity system (strategy, colour+type tie-in, photography, voice,
  mini style-guide) — use `brand-visual-identity` and return here for the mark's construction
  and the favicon/app-icon system. This skill is the *mark-construction specialist* under it.
- The ask is only choosing typefaces — use
  `../../01-typography-and-fonts/font-selection-and-pairing`, then return here to draw or
  specify the wordmark cut.
- The ask is only the palette / contrast — use `../color-system-and-palette`, then bind the
  logo's colour variants here.
- You are auditing existing UI/marketing imagery for generative-AI artefacts (warped or
  misspelled marks, melted glyphs) — run `../../00-cross-cutting-ops-qa-a11y/visual-product-slop-audit`
  first, then design the clean replacement here.
- A binding client logo guideline already exists — follow and record it; apply only the
  responsive/favicon/variant extensions it lacks.

## Required Inputs

| Input | Supplied by | Required? | Why |
|---|---|---|---|
| Brand strategy, name, and USP | Brand owner or brief | yes | Gives the mark meaning |
| Usage contexts and icon platforms | Product/marketing teams | yes | Defines lockups and reduction targets |
| Trademark, legacy, and production constraints | Legal/client/production | conditional | Prevents unusable concepts |

- **Strategy hand-off from `brand-visual-identity`** (or gather it first): the one-word
  essence, adjective set, and the *not-to-be-confused-with* competitor list. Distinctiveness is
  relative — you cannot construct an ownable mark without naming the field it stands apart from
  (Neumeier, *The Brand Gap*; Janoff: "do your homework — know the competition and where the
  mark will be seen").
- **The product's USP / differentiator in one sentence** — the thing the mark should *encode*,
  not decorate (Janoff: the Apple rainbow stripes *were* the Apple II's colour-on-TV story).
- **The surface set the mark must survive**: 16 px favicon → app icon → UI → sign/print →
  single-colour/embroidered. Janoff's rule: a strong mark sheds the wordmark, survives
  reduction, and crosses languages with no translation required.
- The brand name's exact spelling/casing, and whether a custom mark is to be **drawn** or an
  existing one **systematised**.
- Approved type (for the wordmark cut's skeleton) and the owned signature colour, if already
  fixed upstream.

## Workflow

1. **Idea before execution — name the ONE device first.** Decide the single distinctive idea
   the mark carries *before* drawing anything. Janoff: "going straight to the computer is often
   devoid of an idea… the idea should come first, the execution follows" — a direct restatement
   of the doctrine's anti-slop rule (don't reach for the tool to "get something on screen";
   `doctrine/design-doctrine.md` §2). The device is one of:
   - **Interactive wit / a small surprise** — a hidden or dual-reading detail the viewer
     *discovers* (the FedEx arrow in the negative space; I♥NY's substitution). A mark that
     carries a small surprise gets remembered. It must be *earned through one device*, never a
     literal picture of the product (Janoff: "visualise it metaphorically, perhaps subliminally
     — certainly not literally").
   - **USP-encoding** — the mark's defining feature *is* the differentiator (stripes =
     colour-on-TV). State the USP, then make the geometry carry it.
   Pick by **conviction, not by test** — a signature mark is a heuristic/taste decision with no
   objective arrow, so it is resolved by demo + taste, never outsourced to a metric or an AI
   recommend-list (`doctrine/references/creative-selection-and-taste.md`, the "41 shades of
   blue" rule; doctrine §2 sourcing-authority asymmetry).

2. **Silhouette iteration.** Draw the essence *every which way* — many quick variants — until
   the simplest form that still carries the device appears. Janoff: "When in doubt, leave it
   out"; clients arrive with "laundry lists of must-haves — a recipe for failure." A clear
   message is singular. Converge to one, then refine (the demo→feedback→next-demo loop,
   `creative-selection-and-taste.md`). **Never an AI-generated mark** — they carry the
   warped/fused/misspelled-glyph tell and read as every other logo
   (`doctrine/references/ai-slop-taxonomy.md` §Visual tells).

3. **Construct the mark on a grid.** Fix the geometry so it is reproducible from rules, not
   from a single exported PNG: construction modules, key ratios, stroke contrast, optical
   corrections (overshoot on round forms, optical centring, joint thinning). Full method in
   `references/mark-construction.md`. Rand's discipline: simple, distinctive, reproducible at
   any size, in one colour, from memory.

4. **Draw / specify the wordmark.** If lettering is custom, state which glyphs are modified and
   why, the kerning and tracking discipline, the cap-height/x-height relationship, and the one
   distinguishing detail. If set from an approved face, name it (from
   `font-selection-and-pairing`) and record the customisation (tightened spacing, a redrawn
   terminal). The wordmark's skeleton should agree with the brand's display type — one voice.

5. **Build the lockup family.** Specify: **primary** lockup, **horizontal** and **stacked**
   variants, **monogram/glyph-only**, and the alignment/relationship rules (mark-to-wordmark
   gap in mark-units, shared baseline or optical alignment, relative scale). Vignelli's
   discipline: a small governed set used consistently, not a sprawl of one-offs.

6. **Clear-space and minimum sizes.** Define clear-space in **units of the mark itself** (e.g.
   = cap-height, or = the monogram's width), never in px. Set minimum legible sizes per lockup,
   verified at the **favicon end** — the scale-relater test (Janoff): does the mark still read
   as itself, not a smudge, at 16 px?

7. **Responsive logo ladder.** Define the breakpoint-driven swap: full lockup → reduced
   wordmark (detail dropped) → monogram → favicon glyph. State the trigger size for each step.
   This is the same load-shedding discipline as "edit for less" — drop detail the small size
   cannot carry rather than shrinking everything uniformly.

8. **Favicon + app-icon system.** Derive the whole icon set from the monogram, not from a
   squashed lockup. Full matrix (web `favicon.svg` + ICO fallback, iOS/iPadOS, Android adaptive
   foreground/background + safe zone, maskable PWA, monochrome/tinted, Safari mask) in
   `references/app-icon-and-favicon-system.md`. Verify the maskable safe zone and the 16 px
   render.

9. **Colour, mono, reversed, dark variants.** Bind the owned signature colour
   (`../color-system-and-palette`) and specify: full-colour, single-colour positive, reversed,
   and dark-mode variants — each verified legible on its surface. A mark that only works in
   full colour is not finished (Janoff: works in one colour, from memory).

10. **Misuse sheet + Construction Gate.** Write the do-nots (no recolour, no stretch, no
    outline, no swoosh, no drop-shadow, no rotate, no set-on-busy-photo-without-scrim, no
    substitute typeface) and run the **Construction Gate** below. Structure the deliverable
    against `examples/aperture-mark-and-lockup-spec.md`.

## The Construction Gate (quality gate — run before sign-off)

1. **Device present and earned:** the one distinctive idea (wit/surprise or USP-encoding) is
   actually carried by the geometry — not bolted on, not literal.
2. **Reproducible from rules:** grid, ratios, and optical corrections are written down; a
   skilled hand could redraw the mark from the spec alone (Rand).
3. **Reduction-proof:** monogram is legible at 16 px favicon; the maskable safe zone holds.
4. **Variant-complete:** full-colour, single-colour, reversed, and dark variants all exist and
   are legible on their surfaces.
5. **Lockup-governed:** primary/horizontal/stacked/monogram + clear-space (in mark-units) +
   min-size are all specified; no ungoverned one-off.
6. **Memory test:** could someone redraw the essence after looking away? If not, sharpen one
   element — it is not yet ownable (Janoff & Rand; brand-visual-identity Consistency Gate).
7. **No AI-mark tells:** no warped, fused, or misspelled glyphs; no melted detail; no uncanny
   near-symmetry (`ai-slop-taxonomy.md`).

If any item fails, fix before sign-off — do not ship a half-built mark.

## Anti-Patterns

- **Going straight to the render with no idea** — fussing a corner before the device exists
  (Janoff: "tech is an idea-killer").
- **AI-generated marks** — warped, fused, or misspelled letterforms; melted detail; the
  highest public-backlash slop tell for a brand (`ai-slop-taxonomy.md`).
- **Literal depiction** — drawing a picture of the product instead of encoding its USP through
  one device (a coffee cup for a coffee app, a leaf for any "eco" brand).
- **The "laundry list" mark** — every must-have crammed in; complexity is the enemy of memory.
- **Exported-PNG-as-spec** — a single image with no grid, ratios, clear-space, or variants;
  unreproducible and ungoverned.
- **Full-colour-only mark** — no mono/reversed/dark; dies on a sign, a fax, or a dark UI.
- **Favicon by squashing the lockup** instead of deriving a purpose-built monogram glyph.
- **Picking the mark by A/B test or an AI tool's suggestion** — a taste decision outsourced to
  a metric is the asymmetry-rule error (`creative-selection-and-taste.md`; doctrine §2).

## Outputs

| Output | Consumer | Evidence / acceptance |
|---|---|---|
| Master mark and lockup set | Brand and production teams | Vector, monochrome, reverse, and responsive variants |
| Construction and usage spec | Style-guide owner | Grid, correction, clear space, minimum size, and misuse |
| App-icon and favicon package | Product engineering | Platform sizes, safe zones, and small-size tests |

## Quality Standards

- Construct in vector form, apply optical corrections, and verify silhouette and one-colour use.
- Test at 16px, app masks, print, dark, light, and adverse backgrounds.
- Stop sign-off when legibility, trademark clearance, production feasibility, or ownership is unresolved.

## Decision Rules

| Condition | Decision | Wrong-choice failure |
|---|---|---|
| Concept needs explanation to reveal relevance | Simplify or reject it | Cleverness does not survive use |
| Geometric alignment looks optically wrong | Correct by eye and document offset | Pure geometry appears unbalanced |
| Detail disappears at minimum size | Create a responsive simplified mark | Small icons become mush |
| Wordmark relies on an unlicensed font | Customise lawfully or change basis | Identity cannot be distributed |

## Capability Contract

Read and vector inspection are required. Editing and export require explicit design authority. Do not claim trademark clearance, purchase licences, overwrite masters, or publish without approval.

## Degraded Mode

Without vector tooling, deliver a construction specification and sketches marked non-production. Without legal or licence clearance, mark release blocked and avoid public deployment.

A **mark + lockup specification** (the buildable spec, 1–3 pages) containing:
- The stated device (interactive wit / small surprise, or USP-encoding) and why it fits.
- Mark construction: grid, modules, key ratios, optical corrections.
- Wordmark: face/custom cut, modified glyphs, spacing discipline.
- Lockup family: primary / horizontal / stacked / monogram + relationship rules.
- Clear-space (in mark-units) + minimum sizes (favicon-verified).
- Responsive logo ladder (swap thresholds).
- Favicon + app-icon matrix (web/iOS/Android/maskable/monochrome).
- Colour / single-colour / reversed / dark variants.
- Misuse sheet + a filled Construction Gate.

## Examples

- `examples/aperture-mark-and-lockup-spec.md` — a full worked mark+lockup spec for an invented
  but realistic brand ("Aperture", a privacy-first photo-archive app): the chosen device
  (USP-encoded interactive wit), grid construction, wordmark cut, lockup family, clear-space,
  responsive ladder, favicon/app-icon matrix, variants, misuse sheet, and a filled Construction
  Gate. Mirror its shape, not its values.

## References

- `references/mark-construction.md` (this folder) — geometry/grid construction, modular and
  ratio systems, optical correction, the wordmark-cut method, and how to encode wit/USP into
  form. Read before step 3.
- `references/app-icon-and-favicon-system.md` (this folder) — the full favicon + iOS/Android/
  web/maskable/monochrome icon matrix, safe zones, and the 16 px reduction test. Read before
  step 8.
- Sibling: `../brand-visual-identity` — the parent identity system this mark plugs into
  (strategy, colour+type tie-in, voice, Consistency Gate). Pair, don't duplicate: that skill
  owns the *system*; this one owns the *mark's construction and the icon set*.
- `../color-system-and-palette` (owned colour + contrast); `../../01-typography-and-fonts/font-selection-and-pairing`
  (the wordmark's skeleton); `../../00-cross-cutting-ops-qa-a11y/visual-product-slop-audit`.
- `doctrine/design-doctrine.md` — Mission (§0, the moat is looking human-made) and the
  Anti-Slop Charter (§2, sourcing-authority asymmetry: human design authority only).
- `doctrine/references/creative-selection-and-taste.md` — pick the mark by conviction + the
  demo→feedback loop, not by metric/AI ("41 shades of blue").
- `doctrine/references/ai-slop-taxonomy.md` — warped/misspelled-mark tells and the visual
  checklist used in the Construction Gate.
- Human design authority: **Rob Janoff** (interactive wit / a small surprise; encode the USP;
  "when in doubt, leave it out"; scale-relater; survives reduction in one colour); **Paul Rand**
  (simple, distinctive, reproducible, earns meaning through use); **Massimo Vignelli** (a small
  governed set, used consistently); **Marty Neumeier**, *The Brand Gap* (differentiation first).
  **No AI-tool recommendation is cited as authority.**
<!-- dual-compat-end -->