Charte graphique

Documentation de référence visuelle et identitaire

Assets
Trois fichiers — logomark SVG inline, wordmark light, wordmark dark
Wordmark light
le-dashboard-bleu-light.svg
Fond clair
Wordmark dark
le-dashboard-bleu-dark.svg
Fond sombre
Logomark seul
Favicon, mock UI
Wordmark sur fond photo
Sur fond photographique
Toujours version dark
Règles d'usage
Quel asset, dans quel contexte, à quelle taille
Contexte Asset Taille Note
Header pages internesbleu-light / dark160px largeSwitch auto selon thème
Page d'accueil navbleu-light / dark140px largeSwitch auto selon thème
Pages auth (centré)bleu-light / dark180px largeAvec sous-titre monospace
Mock dashboardLogomark inline SVG22px carréZéro dépendance réseau
Favicon (toutes pages)mark-bleu-light.svgSVG natifPNG 32px en fallback
Zone d'exclusion
Espace minimum autour du logo — égal à la hauteur du logomark
← x →
x = hauteur du logomark
x
x
Le Dashboard Le Dashboard

Aucun autre élément (texte, image, bord de page) ne doit empiéter sur cette zone.

Interdits
Ce qu'il ne faut jamais faire avec le logo
Ne pas déformer
Ne jamais étirer ou compresser le logo horizontalement ou verticalement.
Ne pas pivoter
Le logo est toujours horizontal, jamais incliné ni retourné.
Ne pas utiliser hors couleurs brand
Le Dashboard
Le logomark n'existe qu'en bleu (#2563eb light / #3b82f6 dark) — ne jamais le décliner dans une autre couleur, sauf si la couleur provient de la palette.
Ne pas ajouter d'effets
Pas d'ombre portée, de lueur, de flou ou d'effet visuel sur le logo.
Ne pas isoler le logomark du texte
Dashboard
Ne pas combiner le logomark avec un texte différent du wordmark officiel.
Ne pas utiliser sur fond insuffisamment contrasté
Ne jamais poser le logo light sur un fond bleu — utiliser la version dark.
COULEURS
Palette
Cinq couleurs brand — chacune avec variante light et dark
Bleu
Couleur primaire — logo, CTA, liens actifs
light #2563eb
dark  #3b82f6
Vert
Performances positives, succès, PEA
light #1a9e6e
dark  #22c47f
Rouge
Performances négatives, erreurs, danger
light #d04a39
dark  #f06b5a
Ambre
Alertes, avertissements, crypto legacy
light #b87318
dark  #e8a030
Encre
Texte principal — fond sombre light, fond clair dark
light #181714
dark  #f0ede8
Hiérarchie d'usage
Comment combiner les couleurs — primaire, secondaires, neutres
Primaire — Bleu

Réservé aux éléments qui demandent l'action ou indiquent l'état actif : bouton CTA principal, lien actif, logo, accent du graphique. Ne pas utiliser pour décorer.

Secondaires — Vert · Rouge · Ambre

Strictement sémantiques : vert = positif/succès, rouge = négatif/erreur/danger, ambre = attention/avertissement. Ne jamais les utiliser à des fins décoratives ou d'un autre sens que leur sémantique.

Neutres — Surfaces · Textes · Bordures

Le fond de l'interface. Trois niveaux de surface (--bg, --surface, --surface2), trois niveaux de texte (--text, --text2, --text3). Toutes s'adaptent automatiquement au thème clair/sombre.

--bg
surface
surface2
surface3
--text
--text2
--text3
TYPOGRAPHIE
Polices brand
Archivo — logo uniquement, non chargée dans l'interface
Logotype
Le Dashboard
Archivo — utilisé dans le wordmark pour l'ensemble du texte
Graisses disponibles : 400 500 600
Google Fonts · Archivo
Rendu wordmark
Le Dashboard

Cette police n'est chargée nulle part dans l'interface — elle est figée dans les fichiers SVG du logo.

Polices interface
DM Sans + DM Mono — toutes les pages HTML
DM Sans — titres, corps, labels, boutons
22px / 600 — page-title
Titre de page
16px / 600 — h3, header
Sous-titre
14px / 400 — corps principal
Corps de texte principal
13px / 400 — corps secondaire
Corps secondaire, descriptions
11px / 400 — text3, métadonnées
Métadonnée, aide contextuelle
DM Mono — valeurs numériques, tickers, codes
20px / 600 — KPI principal
14 042,30 €
14px / 400 — cours, PRU
+2,34 % · 187,50 €
12px / 400 — emails, codes
vous@exemple.com
11px / 400 — badges, labels
Portefeuille boursier personnel
TON & VOIX
Registre
Comment Le Dashboard s'exprime
Direct

Pas de jargon financier inutile. Les informations importantes en premier.

Sobre

Pas d'exclamation, pas de superlatifs marketing, pas d'émojis dans l'interface.

Prudent

Les données fiscales sont "indicatives". Jamais de recommandation d'investissement.

Élégant

"Simple, privé, élégant." — les trois mots du positionnement. Les refléter dans chaque texte.

Précis

Les données sont chiffrées, pas arrondies. "2,34 %" pas "environ 2 %". "27 mai 2026" pas "récemment".

Discret

Pas de notifications intrusives ni de dark patterns. L'interface s'efface derrière les données.

Exemples
Formulations correctes et incorrectes tirées du projet
ContexteCorrectIncorrect
Tagline produit ✓Simple, privé, élégant.✓Portefeuille boursier personnel. ✗Le meilleur dashboard boursier !✗Révolutionnez votre investissement.
Message succès ✓Profil mis à jour.✓Compte créé avec succès. ✗Super ! Votre profil est à jour 🎉✗Félicitations, vous êtes inscrit !
Message erreur ✓Session expirée — veuillez vous reconnecter.✓Fichier invalide. Vérifiez qu'il s'agit d'un export JSON du dashboard. ✗Oups ! Quelque chose s'est mal passé.✗Erreur 404 :'(
Données fiscales ✓Les estimations fiscales sont indicatives.✓L'utilisateur prend ses décisions d'investissement sous sa seule responsabilité. ✗Economisez des impôts avec notre outil !✗Optimisez votre fiscalité automatiquement.
Confidentialité ✓Aucune publicité. Vos données restent chez vous. ✗Nous respectons votre vie privée à 100%.
APPLICATIONS
Header
Logo en situation — header pages internes et page d'accueil
Pages internes — thème clair
Le Dashboard
Pages internes — thème sombre
Le Dashboard
Pages auth
Logo centré avec sous-titre monospace — connexion, inscription, reset
Thème clair
Le Dashboard
Portefeuille boursier personnel
Thème sombre
Le Dashboard
Portefeuille boursier personnel
Favicon
Logomark inline SVG — rendu à différentes tailles
64×64
48×48
32×32
16×16
Le Dashboard
Onglet navigateur