Brand
What makes Labelmate look like Labelmate
The logo, the mascot, the colours, the typefaces, the pieces of the interface, the photographs and the way we write. It is all here, with the rules that go with it, in the app and on the site.
Labelmateby vvaultThe logo
A mascot and a word
The logo brings together the mascot, a walking record in a cap, and the word "Labelmate" over "by vvault", in Degular Display Medium. The two lines together are as tall as the character.
On a lime tile with rounded corners, the mascot becomes the app's icon and every tab's. There is no other logo: the mascot is enough.
Labelmateby vvault
- "Labelmate" is written with a capital L, always.
- The mascot is used exactly as it is: never recoloured, filled or redrawn.
- Where it doesn't draw, the lime shows through.
- On the site and in the app, the mascot sits to the left of the word.
Colour
One anchor, warm neutrals, two deep colours
As at Zapier, the system puts focus before variety: one anchor colour, neutrals that carry it, two deep colours, and every text readable on its background.
Lime is the anchor
It makes the brand recognisable. Never text, never a thin line on a light background: ink always sits on it.
Violet is the action
Every button and link in the app. Lime can't be read on a light background, so the action has a colour of its own.
The neutrals carry the colour
Paper instead of white, ink instead of black, and ink shadows, faint.
Every text passes AA
Body text even passes AAA. Flint and pebble are for lines, never text.
The anchor and the action
Lime makes Labelmate recognisable; violet is what you click in the app.
- Lime
#ACF01A
RGB 172 240 26
The anchor: the icon, the top line, the site's main button
- Lime Dark
#9CDC00
RGB 156 220 0
Lime under the pointer
- Violet
#6D3BF5
RGB 109 59 245
The app's buttons, the action
- Violet Dark
#5B2FD6
RGB 91 47 214
Link text, hovers
- Violet Wash
#EEE9FF
RGB 238 233 255
Tags, highlighted passages, selection
The neutrals
Eight warm steps that lean to the lime. Nothing is pure white, nothing is pure black.
- Paper
#FEFEFB
RGB 254 254 251
The page, cards, the sidebar
- Linen
#F5F5F0
RGB 245 245 240
Every second band
- Chalk
#EBECE4
RGB 235 236 228
Under the pointer, a selected control
- Pebble
#DBDBD2
RGB 219 219 210
Hairlines
- Flint
#B8B8AB
RGB 184 184 171
Field borders, strong lines
- Sage
#696B5E
RGB 105 107 94
Quiet text: dates, hints
- Graphite
#525448
RGB 82 84 72
Secondary text
- Ink
#101602
RGB 16 22 2
Text, dark surfaces
Depth
Two deep colours for a dark band or a brand moment. Paper or lime on them.
- Forest
#29311E
RGB 41 49 30
The dark band
- Indigo
#241E4B
RGB 36 30 75
A dark band, rarely
These are the values the app and the site use.
Accessibility
Every text readable on its background
Ratios computed with the WCAG 2.x formula. AA asks for 4.5 to 1 for body text, AAA for 7.
| Text | Background | Ratio | Grade | |
|---|---|---|---|---|
| Statement | Ink | Paper | 18.3:1 | AAA |
| Statement | Ink | Lime | 13.4:1 | AAA |
| Statement | Ink | Violet Wash | 15.6:1 | AAA |
| Statement | Graphite | Paper | 7.6:1 | AAA |
| Statement | Sage | Paper | 5.4:1 | AA |
| Statement | Violet Dark | Paper | 7.4:1 | AAA |
| Statement | Paper | Violet | 5.8:1 | AA |
| Statement | Paper | Forest | 13.4:1 | AAA |
| Statement | Lime | Forest | 9.8:1 | AAA |
| Statement | Paper | Indigo | 15.3:1 | AAA |
Type
One family for reading, one for titles
Inter for everything read and clicked, Degular Display for titles and the word "Labelmate".
Degular Display Bold
Your royalty statements
Page and section titles
One weight, set at 700: the browser never makes up another.
Aa Bb Cc 0123456789 € %
Degular Display Medium
Labelmate
The word "Labelmate" and "by vvault"
Served by the team's Adobe Fonts kit.
Aa Bb Cc 0123456789 € %
Inter
Every line of a statement points back to the report lines it comes from.
Everything read and clicked
Regular 400 and Medium 500, optical sizes on.
Aa Bb Cc 0123456789 € %
- Letter spacing is never reduced, in either family.
- In the app, a page's title is 36px and a section's 22px.
- The app keeps its Inter files on the computer: it never needs the network to draw text.
The interface
The pieces that come back everywhere
The site's buttons and links follow Mailchimp; the headline's highlighted word follows Record Club.
- Pills with a 1.5px ink outline: lime and ink for the main action, transparent for the other. Under the pointer they lift 3px onto a hard ink edge.
- A link that leads somewhere ends in a lime circle holding an ink arrow; under the pointer the circle grows into a pill under the words.
- The changing word in the headline sits on a violet brush stroke, crisp, with no shadow or blur.
- No glass, anywhere: no blur, no frosted bars.
Photographs
Clean, warm pictures, with no brands
The site's photographs come from Pexels. We choose them clean and warm, in natural light, and serve them from our own site.
Pictures of the app are screenshots of the app itself, on its example label, "Exemple Records".
- No logos, no album covers, no recognisable brands.
- People pictured are never presented as customers or as our team.
- Every page names its photographers.
Writing
How Labelmate speaks
Plain words
Short sentences, active voice. We say "you", and explain a term of the trade the first time.
Nothing invented
Every claim is true today, every figure has a source, and examples are marked as examples.
No long dashes
No em dash, no en dash: commas, colons or parentheses instead.
French typography
In French, a non-breaking space before colons, semicolons, question and exclamation marks, and inside amounts.