BRAND GUIDELINES
The Vivlab identity, at a glance
Logo, colors, typography, stroke and way of speaking: everything that makes Vivlab look like Vivlab. Keep it at hand before creating a page, a visual or a message.
01 · LOGO
The logo, handwritten and alive
The word-symbol « vivlab » is hand-drawn. Two accents punctuate it: the blue dot on the first « i » and the pink comma at the end of the word. Do not redraw it: always use the supplied files.
Ink version · light backgrounds
White version · dark backgrounds
Blue dot · #483AFF
Pink comma · #F970B4
✓ To do
✓ Use the original SVG files, without modifying them.
✓ Keep the ink logo on light backgrounds, white on dark backgrounds.
✓ Respect the protection zone and the minimum size.
✕ To avoid
✕ Recoloring, stretching or slanting the word-symbol.
✕ Adding shadow, outline or gradient to the logo.
✕ Placing it on a busy background that hurts legibility.
02 · COLORS
A palette of markers
Five bold colors, each with its soft version for backgrounds and highlights. Use them sparingly, never all at once: one dominant color, one or two companions.
Blue
#483AFF · #DFE0FF
Main accent · links
Pink
#F970B4 · #FFE0F0
Energy · highlights
Green
#57C64A · #D6F3CF
Success · availability
Yellow
#FFE14D · #FFF4BF
Highlight · warning
Orange
#F5793B · #FFE0CF
Warmth · secondary accent
Ink
#1C1C1E · text & lines
Paper
#FBFBF9 · background, subtle grid
03 · TYPOGRAPHY
Two typographic voices
An editorial serif for titles and a clean sans-serif for the interface and body text.
TITLES
Ag
Alegreya
Turn your idea into a great website.
Regular · Medium · Bold · italics OK
INTERFACE & TEXT
Ag
Inter
Buttons, menus, paragraphs, labels, wherever clarity comes first.
400 · 500 · 700
A great website
Display · 62px
Everything you need to succeed online
Title · 40px
No code, no commission
Subtitle · 25px
Body · 18px
Body text is set in Inter, to stay readable on every screen.
04 · THE LINE
Freehand drawing
Vivlab's visual signature: slightly wobbly outlines and words highlighted with a marker. The content stays sharp; it's the frame that vibrates.
Wobbly outlines
Cards, buttons and fields carry an irregular ink border. The distortion is not drawn by hand: it is applied by filter, to stay consistent everywhere.
Highlighted words
To stress a word, highlight it with a rounded marker stroke, yellow by default, or in a soft version: blue, pink, green.
A website you can be proud of, without commission.
BACKGROUND TEXTURES
Grid
.tex-grid
Confetti
.confetti-bg
Dots
.tex-dots
Sparkles
.tex-sparkle
Crosses
.tex-cross
Rings
.tex-rings
05 · SYMBOLS
A handful of symbols
Small drawn shapes (stars and flowers) punctuate the interface: menu icon, list bullet or accent near a title. Always sparingly, never as a block.
✦
Star
✺
Rosette
✶
Burst
✷
Celestial
❀
Flower
How to use them
✦ In small touches: a menu icon, a bullet, an accent, no more.
✦ In a color from the palette, matched to the block.
✦ Decorative: they punctuate, they never carry information on their own.
✦ Never lined up as a block or enlarged: they stay discreet.
In context
✦ Menu icon
✺ List bullet
❀ Accent near a word
06 · VOICE & TONE
How Vivlab speaks
Warm, clear and encouraging. We address creators who are just getting started: we reassure them, we get straight to the point, and we stay proudly French.
🤗
Warm
We encourage more than we impress. The tone is friendly, never condescending.
💬
Clear
Short sentences, simple words. Zero unnecessary technical jargon.
⚡
Direct
We say the essential first: the benefit, then the detail. We get to the point.
🇫🇷
Proudly French
Polished, lively French, with just the right amount of enthusiasm, « canon ».
✓ We say
« Turn your idea into a great website. »
« No commission: you keep every euro. »
« Go for it, we'll take care of the rest. »
✕ We avoid
« Responsive website creation SaaS solution. »
« Business model with no transaction fees. »
« Deploy your instance in self-service. »
The brand kit, ready to use
✦ Ink & white logos
SVG · PNG
✺ Full color chart
HEX
Logos, palette and fonts gathered for your partners, your materials and the press. One rule: keep the logo as it is.
❀ Fonts & links
Google Fonts
Request the kit