The identity Vivlab, at a glance
Logo, colors, type, line and tone of voice: everything that makes Vivlab look like Vivlab. Keep it close before you build a page, a visual or a message.
01 · Logo
The logo, handwritten and alive
The « vivlab » wordmark is drawn by hand. Two accents punctuate it: the blue dot on the first « i » and the pink comma at the end of the word. Don't redraw it: always use the files we provide.
Ink version · light backgrounds
White version · dark backgrounds- ✓Use the original SVG files, without altering them.
- ✓Keep the ink logo on light backgrounds, white on dark ones.
- ✓Respect the clear space and the minimum size.
- ✕Recolor, stretch or tilt the wordmark.
- ✕Add a shadow, outline or gradient to the logo.
- ✕Place it on a busy background that hurts legibility.
02 · Colors
A set of felt-tip colors
Five bold colors, each with a soft version for backgrounds and highlights. Use them in touches, never all at once: one lead color, one or two companions.
Need a palette from an image? Open the color generator
03 · Typography
Two typographic voices
An editorial serif for headings and a clean sans-serif for the interface and body text.
Turn your idea into a site that pops.
Buttons, menus, paragraphs, labels, anywhere clarity comes first.
04 · The line
Hand-drawn stroke
Vivlab's visual signature: slightly wobbly outlines and words highlighted in felt-tip. The content stays crisp, it's the frame that wiggles.
Wobbly outlines
Cards, buttons and fields carry an uneven ink border. We don't draw the distortion by hand: it's applied by filter, so it stays consistent everywhere.
Highlighted words
To stress a word, we highlight it with a rounded felt-tip stroke, yellow by default, or in a soft blue, pink or green.
A site you can be proud of, with no commission.
Background textures
05 · Symbols
A handful of symbols
Small drawn marks (stars and flowers) punctuate the interface: a menu icon, a list bullet or an accent near a heading. Always in touches, never in a block.
How to use them
- ✦In small touches: a menu icon, a bullet, an accent, no more.
- ✦In a palette color, matched to the block.
- ✦Decorative: they punctuate, they never carry the message on their own.
- ✦Never lined up in a block or blown up: they stay discreet.
In context
- ✺List bullet
- ❀Accent near a word
06 · Voice & tone
How Vivlab speaks
Warm, clear and encouraging. We talk to creators who are just getting started: we reassure them, get to the point, and stay proudly French.
Warm
We encourage more than we impress. The tone is close, never condescending.
Clear
Short sentences, simple words. Zero pointless technical jargon.
Direct
We say what matters first: the benefit, then the detail. Straight to the point.
Proudly French
Careful, lively French, with just the right dose of enthusiasm, « canon ».
- « Turn your idea into a site that pops. »
- « No commission: you keep every euro. »
- « Get started, we handle the rest. »
- « Responsive website-building SaaS solution. »
- « Business model with no transactional levy. »
- « Deploy your self-service instance. »
The brand kit, ready to use
Logos, palette and fonts gathered for your partners, your materials and your press. One rule only: keep the logo as is.