SVG Logo Design skill for Codex

A finished mark reads at 16px and at billboard size, works in one flat color, has a reason behind its shape that the client can repeat in one sentence, and ships as clean, outlined, optimised SVG plus the raster sizes platforms require.

Workflow

• Write the brief back in five lines before drawing anything.
• Generate 3-5 distinct concepts as black-on-white thumbnails at 32px and 256px.
• Pick one with the user; refine construction on a grid.
• Apply optical corrections; test at 16, 32, 64 px and reversed.
• Add color, then build lockups (symbol, wordmark, horizontal, stacked).
• Optimise, run scripts/svg_audit.py, export the icon set.

1. Brief

Ask for or infer, then confirm:

Name: <exact spelling and casing>
What they do: <one sentence>
Audience and feel: <three adjectives, and one thing it must NOT feel like>
Where it lives: <app icon, favicon, product UI, print, signage, merch>
Constraints: <existing colors, competitor marks to avoid, must-include element>

Look at existing assets in the repo first (rg --files -g '*.svg' | rg -i 'logo|brand|mark') and read AGENTS.md for where assets belong.

2. Concepts

Choose a mark type deliberately:

Type	Use when	Risk
Wordmark (lettering only)	Name is short, distinctive, and must be learned	Weak as an app icon; needs a monogram fallback
Monogram / lettermark	Long name, needs a compact icon	Generic unless the letterform is modified
Abstract symbol	Product spans many offerings; long-term brand	Means nothing until the brand earns it
Pictorial symbol	A concrete idea is central (a leaf for a garden app)	Clichés: check it is not the first stock icon result
Combination mark	Most startups: symbol for icons, wordmark for headers	Two things to keep balanced

Each concept gets a one-line rationale tied to the brief. Render them side by side in a scratch HTML page so the user can compare at real sizes:

<div style="display:flex;gap:48px;align-items:end;font:14px system-ui">
  <figure><img src="c1.svg" width="256"><img src="c1.svg" width="32"><img src="c1.svg" width="16">
    <figcaption>C1 - folded path: "two teams meeting"</figcaption></figure>
</div>

Never trace or closely imitate an existing trademark. If the user asks for “like the X logo”, take the quality (geometric, playful), not the shape.

3. Construction

• Work in a viewBox="0 0 64 64" (symbol) or a height-normalised box for wordmarks. Integer and half-integer coordinates keep edges crisp at small sizes.
• Build from geometry: circles, arcs, 45-degree and 90-degree segments, a consistent corner radius. Write path data by hand or compute it; keep a construction layer (circles, guides) in a separate -construction.svg for the guideline document.
• Prefer filled shapes to strokes. If you drew with strokes, outline them before export (Inkscape: Path > Stroke to Path; or redraw the stroke as two offset paths).
• Use fill-rule="evenodd" or separate subpaths for counters; check holes render as holes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <title>Northfold</title>
  <path fill="currentColor" fill-rule="evenodd"
        d="M8 8h28a20 20 0 0 1 20 20v28H28A20 20 0 0 1 8 36Zm12 12v16a8 8 0 0 0 8 8h16V28a8 8 0 0 0-8-8Z"/>
</svg>

fill="currentColor" lets the mark inherit text color inline; the exported brand files use explicit hex fills.

4. Optical corrections

Problem	Correction
Circle looks smaller than square of same height	Overshoot round shapes 2-3% beyond the baseline and cap line
Horizontal strokes look heavier than vertical	Make horizontals 5-10% thinner
Mark looks left-heavy or low when centred	Shift the visual centre up about 2-4% of height
Counters close up at 16px	Open counters and gaps to at least 1/16 of the viewBox
Reversed (white on dark) looks bolder	Provide a reversed variant 2-4% lighter in weight, or accept and document

Test by rendering at 16, 32, 64px in a browser, both on white and on near-black.

5. Lettering

Wordmarks must be outlined: live <text> depends on fonts the viewer may not have. Check the font licence permits logo use (most OFL fonts do; many commercial licences need a specific tier). To outline with fontTools (pip install fonttools, needs network):

from fontTools.ttLib import TTFont
from fontTools.pens.svgPathPen import SVGPathPen
from fontTools.pens.transformPen import TransformPen

font = TTFont("Fraunces-SemiBold.ttf")          # static instance, not the variable file
glyphs, cmap = font.getGlyphSet(), font.getBestCmap()
ascent = font["hhea"].ascent
x, tracking, parts = 0, 20, []                  # tracking in font units
for ch in "northfold":
    name = cmap[ord(ch)]
    pen = SVGPathPen(glyphs)
    glyphs[name].draw(TransformPen(pen, (1, 0, 0, -1, x, ascent)))  # flip y-up to y-down
    parts.append(pen.getCommands())
    x += glyphs[name].width + tracking
print(f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {x - tracking} {ascent - font["hhea"].descent}">'
      f'<path d="{" ".join(parts)}"/></svg>')

This ignores kerning. Kern pairs by eye afterwards (adjust x per pair), then modify letterforms so the wordmark is not just a typed font: a cut terminal, a joined pair, a custom counter.

6. Color and variants

Design and approve in one color first. Then add at most 1-3 colors and produce:

File	Content
logo-symbol.svg	Symbol only, square viewBox
logo-horizontal.svg	Symbol left, wordmark right, gap = 0.5x symbol width
logo-stacked.svg	Symbol above wordmark
logo-wordmark.svg	Wordmark only
*-mono-black.svg, *-mono-white.svg	One-color versions of each

Define clear space (for example, the height of one counter) and minimum size (the size at which the counters still open, usually 16-24px for the symbol, 80-120px wide for a horizontal lockup) and record both for $brand-guidelines.

Export set

npx svgo logo-symbol.svg -o dist/logo-symbol.svg --multipass --precision 2   # network on first run
python3 scripts/svg_audit.py dist/*.svg
rsvg-convert -w 180 -h 180 icon-padded.svg -o dist/apple-touch-icon.png
rsvg-convert -w 512 -h 512 icon-maskable.svg -o dist/icon-maskable-512.png
magick dist/icon-16.png dist/icon-32.png dist/icon-48.png dist/favicon.ico

rsvg-convert (librsvg) and magick (ImageMagick 7) may need installing; Inkscape’s inkscape in.svg --export-type=png --export-width=512 --export-filename=out.png works too. A favicon SVG can follow the color scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <style>path{fill:#0f172a}@media (prefers-color-scheme:dark){path{fill:#f8fafc}}</style>
  <path d="..."/>
</svg>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Apple touch icons need an opaque background (transparent areas render black). Maskable icons keep the mark inside the central circle of 80% diameter; platforms crop the rest.

Audit script

python3 scripts/svg_audit.py dist/logo-symbol.svg dist/logo-horizontal.svg

Errors (exit 1): no viewBox, embedded raster, live <text>, external refs, scripts. Warnings: editor metadata, strokes, more than 4 colors, over-precise coordinates, no <title>, files over 15 KB.

Gotchas

• SVGO with removeViewBox enabled (default in older SVGO versions) breaks scaling; confirm viewBox survives optimisation.
• Gradients and shadows vanish in one-color uses (embroidery, fax, laser etching). The mark must stand without them.
• A mark that only works at 256px fails as a favicon. Simplify, or draw a separate small-size version and document when to use it.
• Trademark clearance is a legal question. Say plainly that a trademark lawyer should search before the client invests in the mark.

Deliverable summary

## Logo delivery: <name>
Concept: <one-sentence rationale>
Files: dist/ (symbol, horizontal, stacked, wordmark; color, mono-black, mono-white)
Icons: favicon.svg, favicon.ico (16/32/48), apple-touch-icon.png (180), icon-192/512, maskable-512
Colors: <hex values>  Font: <name, licence>
Clear space: <rule>  Minimum size: <px>
Audit: svg_audit.py clean on all SVGs
Open: trademark search not performed