Le brand book 24 Energy.
Logos, couleurs et typographie pour toute communication sur 24 Energy ou toute utilisation de notre identité. Chaque fichier de cette page est la version officielle en vigueur.
Une promesse dans chaque version du logo.
Le 24 est la promesse de continuité : une alimentation qui tient 24h/24, même quand le réseau ne tient pas.
Placée sous le logotype et en ouverture des présentations.
Dimensionnés pour les charges réelles, bâtis pour le climat et le réseau locaux.
Chaque système part de l'étude du site, jamais du catalogue.
Le bleu nuit pour la structure, l'or pour le signal.
Couleur principale. Titres, fonds de hero, éléments sombres du logo.
Panneaux et surfaces secondaires sur fond nuit.
Le signal. Un seul accent par vue : eyebrows, chiffres clés, CTA.
État survol des éléments or.
Fond de page par défaut.
Bandes de section alternées, cartes surélevées.
Filets et bordures de cartes.
Valeurs issues des définitions sources d'app/globals.css (OKLCH), présentées ici en hexadécimal.
Space Grotesk pour la voix. DM Sans pour la lecture.
Driven by efficiency.
Space Grotesk, graisse 700, interlettrage -0.04em.
24 Energy conçoit des systèmes solaire, batterie et secours avec une approche d'ingénierie qui priorise la production, la continuité et une exécution propre.
DM Sans, graisse 400–500, interligne aéré.
Les titres sont toujours en Space Grotesk avec un interlettrage négatif serré. Le texte courant est toujours en DM Sans. Aucune troisième typographie.
Chaque version du logo, et où l'utiliser.
Version couleur pour fonds clairs. Choix par défaut.
24energy-logo-primary.svg— Télécharger
Export couleur d'origine. Impression et grand format.
24energy-logo-primary-master.svg— Télécharger
Export blanc d'origine pour la production sur fond sombre.
24energy-logo-white-master.svg— Télécharger
Repli PNG pour les icônes d'app et les plateformes sans support SVG.
favicon-512.png— Télécharger
Asset carré préparé pour les écrans d'accueil iOS.
apple-touch-icon.png— Télécharger
Ce qui garde l'identité intacte.
- Utiliser le logo principal sur fonds clairs et le logo blanc sur fond nuit.
- Garder autour du logo un espace libre au moins égal à la hauteur du 24.
- Utiliser l'or une fois par vue, sur l'élément le plus important.
- Utiliser les fichiers SVG pour l'écran et les PNG seulement sans support SVG.
- Étirer, faire pivoter ou recolorer le logo en dehors de cette palette.
- Ajouter dégradés, ombres ou contours au logo.
- Reconstituer le logo à partir du texte au lieu d'utiliser ces fichiers.
- Placer le logo blanc sur fond clair ou le logo couleur sur une photo chargée.