Home / Brand & logo

Brand & logo

The Zudo mark, wordmark and app icon, ready to drop into a slide, a README or a conference badge. Take what you need — no request, no sign-up.

Download everything (ZIP, 22 KB) 6 SVGs · 10 PNGs · usage notes

The mark

A Z built from modules, with a red diagonal running through the layers: the packages, and the one path through them. Use it on its own wherever the name is already obvious — an avatar, a favicon, a sticker.

The Zudo mark: a Z built from dark squares with a red diagonal
Mark On light backgrounds SVG PNG 512 PNG 1024
The Zudo mark in off-white, for dark backgrounds
Mark, reversed On dark backgrounds SVG PNG 512 PNG 1024

Mark and wordmark

The full lockup: mark, then ZUDO drawn as strokes on the same grid. This is the default choice anywhere the project is being introduced.

The Zudo logo: the mark followed by the ZUDO wordmark
Logo On light backgrounds SVG PNG 660 PNG 1320
The Zudo logo in off-white, for dark backgrounds
Logo, reversed On dark backgrounds SVG PNG 660 PNG 1320

App icon

The mark on its navy tile, for app stores, desktop shortcuts and anywhere a square icon is required. It carries its own background, so it needs no padding of yours.

The Zudo app icon: the mark in off-white on a navy tile
App icon Navy tile, no transparency SVG PNG 512 PNG 1024
The Zudo favicon
Favicon 32 px grid SVG PNG 32 Apple touch

Colours

Ink#1A1A2E Mark and wordmark
Red#C0392B The diagonal
Navy#16213E Dark surfaces, icon tile
Off-white#FAFAF9 Light surfaces, reversed mark

Using it

Please do

  • Prefer the SVG. It stays sharp at any size.
  • Leave clear space of at least one module — one square of the grid, or 12/80 of the mark's width — on every side.
  • Keep the mark at 24 px or larger, and the lockup at 96 px wide or larger.
  • Use the reversed files on dark backgrounds.
  • Use the logo to link to or refer to Zudo.

Please don't

  • Recolour the artwork, or swap the red diagonal for another colour.
  • Stretch, rotate, outline or add effects to it.
  • Rebuild the wordmark in another typeface.
  • Place the mark on a busy image, or on a background it cannot be read against.
  • Use it as your own product's logo, or in a way that suggests Zudo endorses your product.

Linking to it

Every file is served from this site, so a README or a slide can link to it directly rather than keeping its own copy.

# Markdown [![ZudoJS](https://zudojs.oyinlola.site/assets/zudo-logo.svg)](https://zudojs.oyinlola.site)
<!-- HTML --> <a href="https://zudojs.oyinlola.site"> <img src="https://zudojs.oyinlola.site/assets/zudo-logo.svg" alt="ZudoJS" width="220"> </a>

The artwork is part of the Zudo project, which is MIT licensed. The marks identify the project; the rules above apply to them.

For scripts and AI agents

The kit is also published as data, so a build script or an assistant can pick the right file without scraping this page.

  • brand.json — every asset with its URL, format, pixel size and intended background, plus the palette, the rules and the licence.
  • brand.md — this page as Markdown, like every docs page.
  • llms.txt — the site index agents read first; it points here.
# the mark, whatever the current file is called curl -s https://zudojs.oyinlola.site/assets/brand/brand.json \ | jq -r '.assets[] | select(.id == "mark") | .preferred.url'

Need something else?

If you need a format that isn't here — a vector for print, a one-colour version, a wider lockup — open a discussion and it will be added.