Brand & Style Guide
Visual identity, type & color system.
A living reference for the typography, color tokens, and brand principles that keep every page consistent.
01 — Color
Color tokens
PRIMARY
Omnia Purple
#2F1073
SECONDARY
Deep Purple
#20075F
Light
rgb(247, 247, 247)
White
rgb(255, 255, 255)
Pink
rgb(236, 233, 242)
DarkB
rgb(0, 0, 0)
Transparent Background
rgba(255, 255, 255, 0.16)
Transparent Dark 2
rgba(35, 31, 32, 0.4)
02 — Type
Text styles
Heading 1 · h1
The art of clarity
Switzer · Light 300 · 86px · -0.06em · 0.9em
Heading 1b · h1
The art of clarity
Switzer · Extra Light 200 · 76→29px responsive
Heading 1c · h1
The art of clarity
Inter · Light 300 · 3→1.92rem responsive · -0.053em
Heading 1d · h1
The art of clarity
Switzer · Light 300 · 86→55px responsive · -0.06em
Heading 2 · h2
Designed with intent
Inter · Light 300 · 3rem · -0.053em · 1.2em
Heading 6b · h6
Supporting subheading
Switzer · Light 300 · 20px · -0.06em
Heading 2b · h2
Designed with intent
Switzer · Light 300 · 40→28px responsive · -0.06em
Heading 6 · h6
Section label / eyebrow
Roboto Condensed · 300 · 14px · 0.14em · Uppercase
Body · p
Body copy carries the bulk of the message. It stays comfortable to read at length, with relaxed line height and an even rhythm that supports longer paragraphs without fatigue.
Switzer · Light 300 · 1.31→0.84rem responsive · 1.3em
03 — Brand
Brand guidelines
Keep clear space around the wordmark equal to the height of the letter “O”. Use OMNIA in white on purple or dark imagery, and in Omnia Purple or black on light surfaces. Never stretch, recolor off-palette, rotate, or add effects to the mark.
Logo usage
Approved
White on purple
Purple on light
White on dark imagery
Misuse
Don’t crop the mark
Don’t rotate the mark
Don’t shrink below minimum
Don’t add shadows or effects
Don’t use busy backgrounds
Don’t place on low-contrast
Voice & tone
Confident, calm and precise. Lead with the idea, trim the filler, and let whitespace carry the weight. Speak plainly — clarity over cleverness.
Spacing & layout
Sections breathe with 100px vertical padding. Cards share a 16px radius and 1px hairline borders. Hold a single max content width and align everything to it.
Do
Use generous whitespace · Keep type weights light · Pair black with soft pink · Align to the grid
Don’t
Crowd the layout · Use heavy bold type · Introduce off-palette colors · Stretch or recolor the logo
04 — Icons
Iconography
A set of single-weight line icons drawn on a consistent grid. Keep strokes uniform, use Omnia Purple or black on light surfaces and white on dark, and avoid filling or recoloring them.
Localisation
Notification
Mobilité
Lac
Espace de travail
Commerce
Vidéo
Drone
International
Partage
Exporter
Fenêtre
Document
Cible
Marché
