Brand
Two marks, three colours, and the rules that keep them looking like one thing. Take what you need.
Download the kitZIP · 13 filesThe marks
The monogram is for square and small places — an avatar, an app icon, a corner. The wordmark is for anywhere that has room to say the name. Neither is a substitute for the other and they are not locked into a pair.
Colour
Three values, and each belongs to a ground. Blue and black are for light grounds; white is for dark ones. There is no fourth — a mark in any other colour is not our mark. Click any of them to copy the hex.
Space & size
Both numbers are taken from the artwork itself rather than chosen, so they hold at any scale and survive a redraw.
One stroke on every side — 170 units, which is 25% of the mark’s height. Nothing else comes inside it: no type, no edge, no other logo.
24px wide for the monogram, 90px for the wordmark. Below that the counters close and it stops being a shape. Use an icon file instead of shrinking the mark.
App icons
White mark knocked out of the blue. The maskable one is drawn smaller on purpose: Android crops it to a circle or squircle and only the inner 80% is guaranteed to survive.
Don’t
Each of these is the real vector, altered by CSS — so they show exactly what the wrong thing looks like rather than an artist’s impression of it.
Files
| File | What it is |
|---|---|
| dd.svg | Monogram, inherits colour |
| dd-blue.svg | Monogram, blue |
| dd-black.svg | Monogram, black |
| dd-white.svg | Monogram, white |
| drifters.svg | Wordmark, inherits colour |
| drifters-blue.svg | Wordmark, blue |
| drifters-black.svg | Wordmark, black |
| drifters-white.svg | Wordmark, white |
| icon-32.png | Browser tab |
| icon-180.png | Apple touch icon |
| icon-192.png | Android / PWA |
| icon-512.png | Large app icon |
| icon-maskable-512.png | Android maskable — 66% fill |
PNG versions of both marks ship at 512, 1024 and 2048 wide in the kit. Prefer the SVG wherever it will render — it is smaller than any of them and sharp at every size. Questions, or need something that is not here? Get in touch.