Brand
Brand assets and guidelines
Logos, colour, type and the rules for using them. Take what you need.
Logos
60 files in the pack. Use SVG for anything digital or printed, and PNG only where a raster is required. SVG stays sharp at any size.
Primary lockup
The default. Use this everywhere unless you have a reason not to.
Reverse lockup
For dark backgrounds, photography and video.
Stacked
Square-ish spaces, print and merchandise.
One colour, ink
Single-colour printing, engraving, or anywhere colour is not available.
One colour, white
One colour on blue, photography or a busy background.
Icon
The mark on its own. Use it only where VOCPhone is already named nearby.
App icons and tiles
For app stores, favicons, avatars and anywhere square.
Space and size
Two rules cover most of it. Give the logo room, and do not run it smaller than it can survive.
Clear space: 25% of the icon's height, on all four sides. Nothing comes inside it. No type, no rules, no photo edges.
Minimum sizes
- Primary lockup28 px tall
- Compact lockup20 px tall
- Icon alone20 px tall
- App tile or favicon16 px
Below 28 px, switch to the compact lockup
The phone half of the wordmark is set in Light. Under about 28 px those hairlines start to break up, so the compact files set it in Regular instead. Below 20 px, drop the wordmark and use the icon on its own.
Colour
Click any swatch to copy its hex.
Keep the chevron lighter than the frame
On light grounds that is VOC Blue with a VOC Sky chevron. On dark it is Blue Lift with a white one. That relationship is what makes the mark read the same way in either theme, and the supplied files already handle it.
Typography
Sora
Headings and display. Set tight, with generous space around it.
Logotype
Inter, ExtraBold and Light
Drawn as outlines in every file. You never need the font installed to use the logo.
Headings
Sora, 700 and 800
Used across vocphone.com.
Body and UI
Inter, 400 to 600
Do and do not
The short version: use the files as supplied, give them room, and do not redraw anything.
Please do
Give it room
Keep the clear space clear on all four sides.
Use the supplied files
Always start from the artwork in the pack, never a screenshot.
Keep it legible
Respect the minimum sizes. If in doubt, go bigger.
Pick the right ground
Reverse on dark, primary on light. Check the contrast.
Please do not
Do not stretch or squash
Scale it proportionally, always.
Do not recolour it
Use the supplied colourways only.
Do not rotate or tilt
The logo sits level.
Do not add effects
No shadows, glows, bevels, gradients or outlines.
Buy now
Do not crowd it
Nothing inside the clear space.
VOCPhone
Do not rebuild it
Never re-type the name or redraw the mark.
Do not swap the two blues
The chevron is always the lighter of the two shapes. Flipping them makes the mark read as an inverse of itself.