Klado brand

Logos, colour, and typography for Klado, plus the build that derives every asset from a tiny set of source files.

Quick start

nix develop           # toolchain: Python (cairosvg/Pillow/svgelements), make, Node + SVGO
make                  # full build into dist/

flake.nix pins the whole toolchain (nixpkgs 26.05), so nix develop is the reproducible way in. Without Nix, bring your own Python with cairosvg, Pillow, and svgelements, plus GNU make and Node, then run make.

SVG minification uses SVGO via npx, so it needs Node. If you don't have Node, run make no-svgo. The SVGs are left un-minified; everything else is identical.

Other targets: make logos, make png, make guidelines, make clean, make help.

What gets built

The build writes everything to dist/, which is generated and not committed (it's gitignored). Clone the repo, then run make to produce it.

Output (with klado- prefix)	Variants
icon, wordmark	default, reversed, mono-black, mono-white
logo-primary, logo-horizontal	default, reversed, mono-black, mono-white
logo-signature (adds the tagline)	default, reversed
app-icon-light, app-icon-dark	rounded-square app tiles
favicon	favicon.svg, favicon-{16,32,48,64}.png, .ico

PNGs cover the icon (5 sizes), app icons, wordmark (2000/1000), the primary and signature lockups (transparent + on Paper), a 1024 social avatar, and a 1200x630 OG banner.

How colour works

src/*.svg fill only with the three role colours from tokens.json (ink, paper, clay). The build produces each variant by remapping roles:

"variants": {
  "default":    { "map": { "ink": "#1B1B1B", "paper": "#F7F1EC", "clay": "#C18452" } },
  "reversed":   { "map": { "ink": "#F7F1EC", "paper": "#1B1B1B", "clay": "#C18452" } },
  "mono-black": { "map": { "ink": "#000000", "paper": "#000000", "clay": "#000000" } },
  "mono-white": { "map": { "ink": "#FFFFFF", "paper": "#FFFFFF", "clay": "#FFFFFF" } }
}

Each path keeps its own fill-rule, so the icon's eye (even-odd) and the wordmark's O-ring (winding) stay correct through every recolour and lockup.

Change a brand colour

Edit the hex under roles in tokens.json (and the matching entry in palette so the guidelines swatch updates), then update the variants maps if needed. Run make.

Add a palette colour (neutral / shade)

Add an entry to palette in tokens.json with name, hex, rgb, cmyk, group (neutral or clay), and on (legible text colour). It appears in the guidelines automatically; add its name to the relevant ramp in scripts/build_guidelines.py if you want it in a specific row.

Changing the artwork

• Wordmark / icon / tagline: edit the SVG in src/. Keep fills to the role hexes (#1B1B1B, #F7F1EC, #C18452) so recolouring works, and keep the viewBox. Run make.
• Lockup spacing (icon size, gaps, tagline position) lives in scripts/build_logos.py as a few named constants near the top of each lockup block. That's the only place geometry isn't an SVG.

Using the marks

See dist/brand-guidelines.html after building for clear-space, contrast, and misuse rules. In short: use the vector files at their native proportions, never stretch, rotate, recolour outside the palette, or flood the mark with Clay. The wordmark is custom artwork and is never re-typeset.

Licence

See LICENSE. The Klado name, wordmark, icon, and tagline are brand assets; the build scripts are MIT.