# Production pipeline

Turn the approved design into **font-independent** vector assets (outlined paths that render
identically with no webfont) plus web/app rasters, organized as a single source of truth.

## Why outline the glyphs

If the logo is live `<text>` with a `font-family`, it only looks right where that font is
installed/loaded — everywhere else it silently falls back and the mark is wrong. Converting the
letterforms to SVG `<path>` data bakes the shapes in. The mark then works in any renderer, in
email, in print, with zero font loading. (It also means the mark is *artwork*, which matters
for licensing — see below.)

## Outlining with fontTools — `scripts/outline_glyphs.py`

The bundled script does the whole extraction. Workflow:

1. Make a venv and install deps: `python3 -m venv .venv && ./.venv/bin/pip install fonttools brotli`
   (`brotli` is needed to read `.woff2`).
2. Get the font file. Google Fonts variable TTFs live in the `google/fonts` repo, e.g.
   `https://raw.githubusercontent.com/google/fonts/main/ofl/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf`.
   Fontsource CDN also serves variable woff2:
   `https://cdn.jsdelivr.net/fontsource/fonts/<family>:vf@latest/latin-wght-normal.woff2`.
3. Copy `outline_glyphs.py` next to your work, edit its `CONFIG` block (font path, weight, and
   a list of asset specs — each is `text` + a per-glyph color list + an output filename), run
   with the venv python. It instances the variable font at your weight, lays out each string
   using the font's real metrics, emits one `<path>` per color group, and computes a tight
   viewBox. It also builds a favicon tile.

Editing the per-glyph colors is how you express the design (e.g. brackets in ink, one slash in
the accent). Keep letter-spacing/tracking in the CONFIG so you can tune the fit.

## The variant set to produce

- **`mark.svg` / `mark-dark.svg` / `mark-mono.svg`** — the symbol. Dark version recolors for
  dark backgrounds; mono uses `fill="currentColor"` so it inherits text color.
- **`lockup.svg` / `lockup-dark.svg`** — mark + wordmark, horizontally, with a divider or
  spacing. If any part is the name-color, it's here.
- **`favicon.svg`** — a rounded tile containing a **compact 2-3 glyph** fragment, legible at
  16px. A wide 5-glyph logo squeezed into a square is unreadable; pick the smallest
  recognizable piece (e.g. `A/B` instead of `<AB/>`), on a solid tile so it holds at tiny size.

## Rasterizing — `scripts/generate-raster.sh`

Vector is the master; ship rasters for convenience. The script rasterizes every source SVG in
its folder to multi-size **PNG** via `rsvg-convert` (librsvg — high-quality SVG rendering) and
**lossless WebP** via `cwebp`. Install once: `brew install librsvg webp`. Sizes: marks at
512/1024 wide, lockups at 1024/2048, favicon square 16→512. Re-run after any SVG edit. If those
CLIs aren't available, `resvg` or a headless browser can substitute, but rsvg-convert + cwebp
is the clean default.

## Single source of truth

Keep **one** canonical folder, e.g. `assets/brand/` at the repo root:

```
assets/brand/
├── mark.svg / mark-dark.svg / mark-mono.svg
├── lockup.svg / lockup-dark.svg
├── favicon.svg
├── png/  webp/            # generated rasters
└── generate-raster.sh
```

Other apps that need the assets **symlink** to this folder (`ln -s`), never copy — copies drift
out of sync the moment the logo changes. If a static-site build needs the favicon at a fixed
path, symlink that one file too (and verify the build dereferences it).

## Licensing — read it, don't assume

Confirm the font permits commercial use and logos before shipping. Read the license straight
from the font file rather than trusting memory:

```python
from fontTools.ttLib import TTFont
f = TTFont("Font.ttf")
name = f["name"]
print(name.getDebugName(13))  # license description
print(name.getDebugName(14))  # license URL
```

Most quality free fonts (Space Grotesk, Inter, and the rest of Google Fonts' OFL set) are
**SIL Open Font License 1.1**: free for commercial use, **logos explicitly allowed**, and
**outlined glyphs are artwork, not "font software"**, so the mark itself is unrestricted — you
can even trademark it. The only constraints: don't sell the font by itself, and don't publish a
*modified font* under a reserved name. If you self-host the webfont for a site, ship the
accompanying `LICENSE` file (the `@fontsource/*` npm packages include it). Flag anything that
isn't clearly OFL/Apache/permissive to the user before using it.