Thématique

Branding & identité visuelle / Design Atlas

Un branding solide, ce n’est pas “un logo + une couleur”. C’est un système : typographies, couleurs, règles d’usage, ton, composants, cohérence multi-supports. Ici : une mini-charte, des exemples et des repères actionnables.

Mini-charte (exemple)

Brand system Logo Couleurs Typo Usage

Logo lockup

DESIGN
ATLAS
Exemple volontaire : Sans très forte + serif italique pour créer un contraste “éditorial”. Règle : le lockup ne change jamais (mêmes proportions, mêmes espaces).

Color tokens

INK
#0E0E0E
PAPER
#FAFAFA
ATLAS Ok, on passe en **mode frappe nucléaire**, mais en restant **compatible Gutenberg** (HTML personnalisé). Je te donne une page **Branding & Identité visuelle** ultra visuelle + mini-charte + “micro-interactions” (hover + accordéons `
`). ✅ Copie-colle **les blocs dans l’ordre** : **A → B → C → D → E**. *(Chaque bloc est autonome, donc si un bloc te saoule tu peux l’enlever sans casser la page.)* — ## ✅ BLOC A — HERO (lourd, visuel, “brand energy”) « `html

Thématique

Branding & identité visuelle / Design Atlas

Une identité visuelle solide est un système : règles, composants, ton, cohérence multi-supports. Ici, tu as un exemple de mini-charte (tokens, typographies, logo lockup) + des “guides” concis.

Typographies : 3 directions (exemples)

Direction A Strict Swiss Neutre, lisible, ultra pro.

Titres : Helvetica/Arial Bold
Texte : Helvetica/Arial Regular
Usage : portfolios, éditorial, sites de studio.

Direction B Editorial Contrast Classy, culture, “magazine”.

Titres : Serif italique (fallback Georgia)
Texte : Sans neutre (fallback Arial)
Usage : marques culturelles, mode, luxe sobre.

Direction C Mono Utility Tech, UI, tokens, précision.

Titres : Sans bold
Meta : Monospace
Usage : design systems, produits, dashboards.

Composants (UI / print) + guides rapides

Component — UI card

Primary card

Une carte = une règle : marges, contraste, hiérarchie stable.

Bouton primaire Secondaire Tag

Règle : une couleur d’action (primary), le reste neutre. Le branding se voit dans la répétition, pas dans l’effet.

Component — Print layout

Brochure / A4

Brand story

Un print propre = hiérarchie stable + blancs généreux + contraste lisible. Évite les fonds trop saturés.

Guide 1

Cohérence

Un système simple répété 100 fois bat un système compliqué utilisé 5 fois.

Guide 2

Contraste

Si on ne lit pas, ce n’est pas du branding : c’est du décor.

Guide 3

Règles d’usage

Définis ce qui est autorisé/interdit : tailles de logo, marges, couleurs, ton.

Brand kit / exemple complet

Charte graphique — “Atlas Studio”

Une charte doit être actionnable : couleurs (tokens), typographies (échelle), logo (zones de protection), composants (boutons, cartes), règles d’usage et exemples concrets.

Logo (SVG)

ATLAS STUDIO

Palette principale

tokens
INK
#0E0E0E
PAPER
#FAFAFA
STONE
#C9C9C9
ATLAS BLUE
#1F4FFF
GLOW CYAN
#00D1FF

Règle : ATLAS BLUE = action (liens, CTA, focus). GLOW = accent rare (tags premium, highlights). Les neutres font 80% du design. La cohérence vient de la proportion.

Exemples d’usage

contrast
CTA / PrimaryINK + BLUE

Call to action

Une action = une couleur.

Explorer En savoir plus
Surface / EditorialPAPER + INK

Editorial

Less effects, more structure.

GLOW uniquement pour souligner un mot ou un chiffre, jamais pour un paragraphe complet.

Système typographique

type scale
HeadlinesSans bold
H1 — Impact
H2 — Structure
H3 — Modules
Corps de texte : 15–16px, interlignage 1.6–1.75. Limiter la largeur à ~75 caractères.
Accent editorialSerif italic
“Un contraste typographique crée une signature.”

Usage : citations, titres éditoriaux, signatures. Jamais sur de longs paragraphes.

Règle : 2 familles max. Le style vient des graisses, de la taille, du rythme, pas du “catalogue de polices”.

Règles logo

usage
Zone de protectionclear space
ATLAS
STUDIO

Laisser au minimum une marge équivalente à la hauteur du “A” autour du logo.

Variantesmono / inversé
Noir / Blanc Couleur Outline

Règle : utiliser la version couleur uniquement sur fonds neutres. Sur photo : privilégier noir/blanc.

Composants UI

buttons / cards
Buttonsstates
Primary Secondary Disabled

Règle : Primary = action principale. Jamais deux “Primary” côte à côte.

Cardlayout

Feature

Grille stable

Toujours les mêmes marges, mêmes alignements. Le style vient de la répétition.

Bonus : en print, conserve la même logique (grille, marges, hiérarchie). Une identité “vit” quand elle reste cohérente partout.

Do / Don’t

rules

DO

1 couleur d’action, 2 polices max, grilles & marges cohérentes, contrastes lisibles, règles d’usage explicites.

DON’T

Multiplier les effets, changer la typographie à chaque page, surcharger en dégradés, utiliser l’accent partout.

Une charte parfaite est courte, claire, répétable. Si elle ne peut pas être appliquée par quelqu’un d’autre, ce n’est pas une charte : c’est un moodboard.