Horizontal — couleur (fond clair)
Variante principale. Leaf brand-primary, texte ink. À utiliser partout sur fond clair.
Brand kit
Charte graphique
Logos, couleurs, typographies. Cette page sert de référence pour l’équipe Chargekeeper et de kit de marque pour nos partenaires qui intègrent nos visuels chez eux.
Une question sur l’usage de la marque ? Contactez-nous.
Logos
Variantes principales
Utiliser la variante adaptée au contraste du fond. Toujours préserver une zone de protection autour du logo équivalente à la hauteur de la feuille.
Horizontal — signature (fond foncé)
Variante ADN. Leaf vert signature, texte blanc. À réserver aux fonds foncés et moments à fort impact.
Variante signature — feuille en #38E54D (vert ADN). Réservée aux fonds foncés.
Horizontal — monochrome blanc
Tout blanc. Pour fonds foncés très chargés (photos sombres) ou supports monochromes.
Vertical — signature (fond foncé)
Variante verticale ADN. Utilisée dans le footer du site.
Variante signature — feuille en #38E54D (vert ADN). Réservée aux fonds foncés.
Vertical — noir (monochrome)
Vertical monochrome noir. Impression, fax, supports n&b.
Usage du logo
À faire & à éviter
À faire
- Préserver une zone de respiration autour du logo (≥ hauteur de la feuille).
- Utiliser la variante adaptée au contraste du fond.
- Garder les proportions originales (pas de stretch).
- Privilégier le SVG pour le web et l’impression.
À éviter
- Ne pas modifier les couleurs hors de la palette officielle.
- Ne pas ajouter d’effets (ombres, contours, dégradés).
- Ne pas faire pivoter ou déformer le logo.
- Ne pas poser le logo sur un fond peu contrasté.
Mascotte
Keeper
Personnage de marque utilisé pour les illustrations conviviales, les pages d’erreur et la communication interne.
Keeper est notre mascotte. Il apparaît principalement sur des contextes ludiques (page 404, supports internes, événements). À utiliser avec parcimonie sur les communications commerciales — préférer le logo dans les contextes formels.
Couleurs
Palette
Trois rôles distincts : un vert universel pour l’usage courant, un vert signature pour l’ADN sur fond foncé, et un accent lime pour les surlignages typo. Tokens CSS définis dans global.css — toujours référencer le token, jamais le hex en dur.
Sur fond clair — couleurs de travail
#27a273
Brand primary
--color-brand-primary Universel. Boutons, liens, accents UI, leaf du logo « jour ». Tous fonds, tous contextes.
#1a8a5e
Brand primary dark
--color-brand-primary-dark Hover / pressed du brand primary.
#e1ffa0
Accent lime
--color-accent-lime Surlignage typo sur fond clair uniquement (effet « surligneur jaune » sur mots-clés). Pas une couleur de marque.
Sur fond foncé — ADN signature
#38E54D
Vert signature
--color-signature ADN historique. Réservée aux fonds foncés et aux moments à fort impact : logo « nuit », badges live, sessions en cours, accents hero dark. Jamais sur fond clair (lisibilité).
Échelle verte
#c8fbe7
green-50
--color-green-50 Fonds très clairs, dégradés héro.
#a8eccc
green-100
--color-green-100 Surfaces secondaires teintées.
#5fc99c
green-300
--color-green-300 Illustrations et states intermédiaires.
#27a273
green-500
--color-green-500 Identique au brand primary.
#32735f
green-600
--color-green-600 Texte sur fond clair, accents sobres.
#1a3e39
green-700
--color-green-700 Surfaces sombres tertiaires.
#164038
green-800
--color-green-800 Surfaces sombres secondaires.
#143109
green-900
--color-green-900 Surfaces sombres profondes, sections premium.
#071412
green-950
--color-green-950 Footer, fonds sombres signature, hero dark.
Neutres
#071412
ink
--color-ink Texte principal. Identique à green-950.
#ffffff
paper
--color-paper Fond principal, surfaces.
#fafafa
paper-soft
--color-paper-soft Sections alternées, cartes.
#e6e6e6
paper-mute
--color-paper-mute Bordures, séparateurs, désactivé.
Typographie
Polices
Deux polices principales — une display pour les titres, une sans-serif pour le texte courant. Pile mono pour le code.
Averta Std
Display — titres
--font-display Supervision EV pensée pour les pros
Geometric sans, character premium. Réservée aux H1–H6.
Fallback: General Sans, Inter, system-ui.
General Sans
Texte — corps & UI
--font-sans La solution de supervision complète, interopérable et évolutive.
Sans-serif neutre, excellente lisibilité écran. Utilisée pour tout le texte courant et l’UI.
Fallback: Inter, system-ui, Segoe UI, sans-serif.
ui-monospace
Code, tokens
--font-mono OCPP 2.0.1 · API_KEY=ck_…
Pile système : SFMono-Regular, Menlo, Monaco, Consolas, monospace.
Aucune police custom — performance et cohérence OS.
Échelle typographique
H1 — Display 6xl
H2 — Display 5xl
H3 — Display 4xl
H4 — Display 2xl
Paragraphe d’intro — lg/xl, text-ink/80.
Paragraphe courant — base, text-ink/70.
Note / caption — sm, text-ink/60.
Eyebrow — xs, uppercase, tracking large, brand-primary
Vous êtes partenaire ?
Téléchargez les logos directement depuis cette page. Pour des formats supplémentaires (AI, EPS, vectoriel haute résolution) ou des co-brandings spécifiques, contactez-nous.