Design kit
The ZAOstock look, to take away.
Our marks, colours and type, with the few rules that keep them looking right. Every file downloads. For press copy and partner logos, see the press page.
Signage
Signs for the day
Directional and welcome signs from Candy’s design system, at web size for screens and posts. Print versions come from her master files, so ask before printing any of these.
Illustrations
The poster pieces
Hand-drawn pieces to build a post or a flyer from. Keep them whole: no recolouring or cropping.
Signage and illustrations by Samantha “Candy”, CandyToyBox.
Colour
The colours
Candy's palette from her site build, the one every public page wears. The site's token name comes first, her name for the colour in the line. When your system is in dark mode, her dark variant takes over.
red-500 #C1662C
Fireside. The accent word in a headline, stat values, the top of the button.
red-700 #8F3E1E
Ember. The foot of the button, and fireside when it has to be text.
red-600 #9F4B1D
Between the two. Small red text on cream.
red-300 #E2833F
Fireside on dark grounds.
gold-400 #DFA23C
Sun. Badges, the focus ring, highlights on dark photographs.
gold-300 #EFCB82
Sun tint.
gold-500 #A97C3F
Brass. Card edges and hairlines.
gold-600 #86602C
Brass as text on cream: the only gold that passes for words.
denim-400 #3F4D31
Pine. The kicker label above a heading, links.
denim-300 #8FA26C
Pine on dark grounds.
denim-500 #323E27
Link hover.
denim-600 #26301D
Link pressed.
olive-400 #7C8A3D
Olive. Used rarely: the success alert.
olive-300 #A4AF6E
Olive tint.
olive-500 #5B662A
Olive text on cream.
paper-100 #F2E6CC
Cream. The page ground.
paper-200 #FAF3E6
Cards, and the lighter ground.
ink-950 #2E2015
Ink. Text.
night #1B130B
The footer and the moose's ground. Dark in both modes.
onfill #FFF8EC
Text on the button and on night.
Type
Three families
All three are open-licence and free to download from Google Fonts.
600, 700
Oswald
Headings and big numbers, in capitals, bold. Condensed, so a heading stays short on a phone. Never for a paragraph.
Get Oswald400, 500, 600, 700, 800
Rubik
Body and interface. Buttons and navigation in 700, uppercase, 0.04em tracking.
Get Rubik400, 700
Space Mono
Eyebrows, labels, times and tables. Labels in 700, uppercase, 0.12em tracking.
Get Space MonoUsage
The rules
The moose
- Drawn by attabotty. Credit the moose to attabotty.
- It is white on transparent. Put it on night (#1B130B) or another dark ground; on cream or a light photo it disappears.
- Use the file as supplied. Do not recolour, stretch, rotate, outline or add effects to it, and do not crop the antlers.
- Give it room. Nothing sits inside the antlers or touches the edge of the mark.
Credit
- Credit this colour and type system, the signage and the illustrations to Samantha "Candy", CandyToyBox.
- The red 2026 badge is retired and is not a ZAOstock mark. Do not use it.
Colour
- Cream is the ground, ink is the text, fireside is the only thing that asks to be clicked.
- Never pure white (#FFFFFF) for a surface and never pure black (#000000) for text.
- Sun and brass are never text on cream; they fail contrast. Use gold 600 for gold words.
The name
- ZAOstock: one word, capital ZAO, never hyphenated.