# Zad brand pack
The Zad mark is the word, lowercase, followed by a full stop. A fact, stated, then
nothing more. The stop is the only colour.
This folder is the pack: logo files, colours, type, and two files you can drop into
another project (`zad.css` for the tokens and fonts, `brand.json` for anything that
reads settings). It is published at , so a link to a file
here is a stable link. Zad is a product of Wolk Technology Pty Ltd.
## Logo files
| File | Use |
|---|---|
| `zad-wordmark.svg` | Black on light grounds. The default. |
| `zad-wordmark-reverse.svg` | White on dark grounds. |
| `zad-wordmark-mono.svg` | One colour, inherits `currentColor`. Inline it; an `` cannot pass colour through. |
| `zad-mark.svg`, `zad-mark-reverse.svg` | The `z.` alone, where the word does not fit. |
| `zad-tile.svg`, `zad-tile-light.svg` | The mark on a rounded square. App icons, social avatars. |
| `favicon.svg` | The dark tile at 64 px with a tighter corner. |
| `zad-lockup.svg`, `zad-lockup-reverse.svg` | Wordmark plus the descriptive line, for a header, an email footer or a page where the name cannot explain itself. |
| `png/zad-avatar-512.png` | The tile rendered at 512 px, for services that refuse SVG. |
| `png/zad-wordmark-on-pale.png`, `png/zad-wordmark-on-ink.png` | Rendered wordmarks for the same reason. |
Every SVG carries outlined glyphs. Nothing depends on a font being installed. The
files are generated from the variable fonts by a build script in the product
repository and copied here unchanged; never hand-edit one, and never redraw the mark.
## Colour
| Token | Light | Dark | Where |
|---|---|---|---|
| ink | `#000000` | `#ffffff` | The word, body text |
| paper | `#ffffff` | `#000000` | The ground |
| ember | `#e0873f` | `#e0873f` | The stop, and only the stop; small accents such as bullets |
| ember-ink | `#b8551a` | `#e0873f` | Link text; ember darkened on white so it passes contrast |
| muted | `#5c6873` | `#96a2ad` | Secondary text, navigation at rest |
| line | `#d9dde2` | `#2a2f34` | Rules and borders |
| surface | `#f6f7f8` | `#0f1113` | Panels |
Black, orange and white are WOLK's colours; Zad wears the house palette. Ember is a
burnt orange chosen to sit well away from the Amazon Web Services orange, because a
dark ground with a bright orange accent reads as theirs.
Never colour the letters ember. Never add a second accent. Never set the mark on a
blue or blue-black ground. In one colour the stop takes the ink and the mark is
simply `zad.`.
## Type
| Role | Family | Axes | Licence |
|---|---|---|---|
| Display, headings | Space Grotesk (Florian Karsten) | weight 300 to 700 | SIL Open Font License 1.1 |
| Text, interface | DM Sans (Colophon Foundry) | weight 100 to 1000, optical size 9 to 40 | SIL Open Font License 1.1 |
Both ship in `fonts/` as variable fonts, `woff2` for the web and `ttf` for
everything else, with their licences alongside. `zad.css` declares them with
`@font-face` and exposes `--zad-display` and `--zad-text` font stacks.
The website itself sets system fonts so that its pages load nothing but their own
files. The brand page is the one exception: it self-hosts these two to show them.
## Construction of the wordmark
Space Grotesk Bold, tracking -0.04 em. The stop is a circle 22/128 em across, its
lower edge 6/128 em above the baseline, set 1.2/128 em after the d. The mark uses the
same stop against the z with a hair of overlap so the pair reads as one glyph. Clear
space of 0.16 em on all sides is already built into each file's viewBox. Do not set
the wordmark smaller than 24 px tall.
## Using the pack elsewhere
```html
Articles people are already looking for.
```
Or copy the folder into your project and keep the relative layout (`zad.css` next to
`fonts/`). `brand.json` carries the same values for tools that read settings rather
than stylesheets.
Questions about use of the mark: info@wolk.com.au.