The donebyfive brand kit
Logos, colours, type, social images and favicons. Download what you need, or take the lot in one zip.
Logo
Choose a version, then pick the file that suits the background. PNG for everyday use, SVG for print and anything that needs to scale.
Horizontal: For nav bars, email and documents.
Stacked: For square spaces, covers and merch.
The d: For avatars, app icons and favicons.
Wordmark: For places that already show the d.
Spell it donebyfive
Lowercase, one word, the five spelled out. Add .ai only in a web address.
donebyfiveDoneByFivedoneby5
Give it room
Keep clear space on every side equal to the height of the d's bowl. Nothing goes inside it.
Keep it legible
The d works down to 16px on screen or 6mm in print. The stacked logo needs at least 80px or 20mm of width.
Leave it alone
No stretching, rotating, outlines, shadows or new colours. The wedge is always amber or the logo colour.
Colour
Ink and Five Amber do most of the work. Use amber like a highlighter: the wedge, the button, one moment per layout. Select a colour to copy its hex code.
Roughly how much of each
60% Ink and Evening, 25% Fog and Paper, 10% amber, 5% Dusk at most. Never set amber text on a light background.
Type
Two free Google Fonts from the same family. DM Sans for everything people read. DM Mono for the wordmark, times and numbers.
Aa
DM Sans
Headlines 700 to 800 with tight tracking. Body 400 to 500 at 1.55 line height.
Clear the busywork. Clock off at five.
Get DM Sans17:00
DM Mono
The wordmark at weight 500. Times always 24 hour, so 17:00 and never 5pm.
Invoices chased 09:12
Get DM MonoFavicons
Every size a browser or phone asks for. Upload the set to the root of the site, then paste these lines into the page head.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">Guidelines
The full guidelines, page by page. Send the PDF to anyone designing for donebyfive.
1Cover
2Strategy and voice
3Logo system
4Colour
5Typography
6Applications
7Instagram post
That's the kit. Done by five.
Every logo, social image, favicon and guideline page in one zip.
Download everything, 4.9 MB
Social
Sized for each platform. Use the Ink profile picture everywhere unless a campaign calls for amber.
LinkedIn banner
1584 × 396
Personal profile. Left side kept clear for your photo.
LinkedIn company cover
1128 × 191
Company page header.
X header
1500 × 500
Left side kept clear for the profile picture.
Facebook cover
1640 × 624
Content sits in the middle so the mobile crop is safe.
Instagram post
1080 × 1350
Example feed post in the portrait format.
Email signature logo
600 × 150
Upload it and set it to display at 300 × 75.