Skip to content
CONCEPTS
3 min readЧитать на русском

Programmatic Identity Generation

Brand-identity exploration runs the same way most weeks. Five-to-ten Figma variants by hand. The director picks two. You make ten more in those directions. The director picks one. By the time the brand book ships, the breadth was always shallow — you tried what came to mind, not what was possible. The director never asked for hundreds because hundreds aren't on the table.

If wordmarks and monograms become the output of code, hundreds are on the table. Every variant is a file the designer can review, fork, or promote. Breadth becomes a parameter, not a budget.

Programmatic identity generation treats wordmarks, monograms, and lockups as the output of code: a set of typed primitives, palette + font tokens, and composition rules. Output is dozens or hundreds of variants in minutes; every variant is a file the designer can review, fork, or promote.

When to apply

  • Brand exploration needs breadth (the brief is unsettled).
  • The brand has a single repeatable glyph or device (a letterform, a punctuation mark, a number).
  • Logo work is iterative and the design record should preserve all variants, not collapse them.

Mechanism

1. Primitives library

A small toolbox of effect primitives (10+), each a pure function over SVG paths:

  • blob-merge — boolean union of overlapping rounded shapes
  • slice — diagonal cut + offset
  • wave — sinusoidal baseline distortion
  • mixed-typeface — per-glyph font swap
  • monogram-with-capsules — glyph + piercing pill shapes
  • italic-oval — extreme italic + ellipse container
  • pill-container — uniform stadium wrap
  • script-overlay — handwritten layer over geometric base
  • ball-joints — terminals replaced with circles
  • hand-drawn-stroke — jittered stroke offset
  • decorations — appended marks (asterisks, slashes, dots)
  • custom-glyph-builds — per-glyph constructive geometry

2. Token layer

Palette and font tokens live separately. Mono first, color second. Every primitive consumes the tokens; switching palette is one edit.

3. Style → technique map

A documented table from "style adjective" to primitive(s): crazy yet minimalist → mixed-typeface + slice, cringe → chrome-bevel + emo-heart, normcore → pill-container + flat color. The map is the bridge between brief language and code.

4. No-overwrite discipline

Every variant lives as a new file (09 / 09b / 09c). The original is part of the design record. This is non-negotiable: a "fix" that overwrites the prior version destroys the comparison the designer needs to make a decision.

5. Batch driver

Single command regenerates every variant. Idempotent — same code + same tokens → same SVG. Reviews happen in a contact sheet (PNG mosaic of the SVG folder) generated alongside.

Example — one brand exploration

A single batch run produced ~125 SVG variants in the first session, across blob / slice / wave / mixed / italic-oval / liquid / overlay / pill / divider / abstract-shatter / cringe-WordArt / crooked / collapse-squash / scary-drip / smiley / chrome-bevel / bubble-glossy / emo-heart / normcore families. Latin primary, Cyrillic where the variant family permits.

The specific tech stack (Node, opentype.js, paper-jsdom, headless Chrome for previews) and per-primitive knobs are documented in generative-logo-design.

Pitfalls

  • Premature consolidation — collapsing similar variants too early loses the design record. Save first, curate later.
  • Token coupling — a primitive that hardcodes #0A0A0A instead of COLORS.ink blocks palette swaps. Fix at the primitive level.
  • Style-map drift — when a new primitive lands without a row in the style→technique map, the brief→variant bridge silently weakens.

Pairs with

  • primitives-library-first — the methodology shift from variant-by-variant exploration to a primitives library + compositions.
  • generative-logo-design — the implementation depth: tech stack, per-primitive code, boolean tricks, pitfalls.