Brand basics one page
One word.
Two colours.
A lot of space.
Everything you need to set Vantle correctly, and the reasons behind it, so you can make the calls we haven’t thought of.
The wordmark
Our name in Inter Display Semibold, lowercase, set 34 units tighter than the font wants. Lowercase because a counter is easiest to see in a small letter. Tight because the letters should read as one object.
- Clear space one x-height on every side. Nothing else goes inside it, including the edge of the screen.
- Smallest size 80 px wide on screen, 18 mm in print. Below that, use the window.
- Never stretch it, outline it, give it a colour, a shadow or a gradient, or put it on a photograph without a dark scrim.
Wordmark, black SVG Wordmark, white SVG Wordmark on black SVG
The window
The counter of our a, cut out of a black tile. It’s the mark for places the wordmark won’t fit: app icons, avatars, the browser tab. It’s also the shape the home page flies you through.
Colour
Black and white do the work. The greys are for text and lines only. There is no accent colour: when something needs emphasis, we invert it.
- Night#000000Ground of the front
- Paper#FFFFFFGround of the back
- Snow#F5F5F7Text on Night, 19.3:1
- Graphite#1D1D1FText on Paper, 16.8:1
- Steel#86868BQuiet text on Night, 5.8:1
- Slate#6E6E73Quiet text on Paper, 5.1:1
Type
SF Pro where the device has it, Inter everywhere else. They’re close cousins, so a page reads the same on a Mac and on a Windows laptop. Semibold for anything that should be seen, Regular for anything that should be read.
- Mega
- 120 px, Semibold, tracking −4.5 %, leading 0.96
- Extra large
- 84 px, Semibold, −4 %, 1.0
- Large
- 44 px, Semibold, −3 %, 1.08
- Medium, for ledes
- 24 px, Medium, −1.6 %, 1.33
- Body, for reading at length
- 17 px, Regular, −1.1 %, 1.47
- Small, for meta and captions
- 14 px, Regular or Medium
How we write
Like a person who knows the work and has somewhere to be.
-
Say the specific thing.
We create meaningful digital experiences.
Prompts shrink by 58.2% on average.
-
Short sentences. Then a longer one, when it earns the room.
Our holistic, user-centred methodology ensures alignment across every touchpoint.
We talk to the people who’ll use the site, not only the people paying for it.
-
Explain the trade once. Then trust the reader.
Kerning (the adjustment of space between characters) is important because…
The counter is the space inside a letter. Without it you couldn’t read a word.
-
No buzzwords, no exclamation marks.
Elevate your brand seamlessly!
Got something to say? We’ll make room for it.
Motion
Things go through and come out inverted. Reveals ease out fast and settle slowly. Big things move slower than small things. Nothing moves to decorate.