Enter
Scaling in, opening. Content arriving into view.
Brand Guidelines
NatureSaaS B2B de mesure et de reporting ESG
LanguesEN, FR, ES, DE
Crée2017
Introduction
Colibris est la plateforme SaaS B2B de mesure et de publication de la performance ESG, conçue pour les directions RSE et financières.
Un seul enregistrement, clôturé chaque mois. Chaque chiffre porte sa source, son facteur d’émission, sa période et sa base de référence.
La marque parle en mesure, pas en promesse. Elle publie des chiffres traçables jusqu’à la facture.
Lockup couleur, cyan et marine, sur fonds clairs
Le colibri : quatre ailes elliptiques effilées, rx20 ry54, pivotées de plus ou moins 45 degrés et mises en miroir, formant un oiseau en vol. Précision, vitesse, et le croisement des données économiques et environnementales. Marque en cyan #009999, mot en marine #112C3B, vectorisé. La tuile d’application se télécharge dans la section Ressources : rayon d’angle 24,3 pour cent, marque encastrée à 57 pour cent du pavé, deux valeurs qui ne se modifient jamais.
Lockup cyan et blanc, sur marine
Mark seule, fond sombre
Variants mono
Light
Dark
Couleur
Le cyan Colibris est la couleur socle : marque graphique, actions produit, liens, focus. L’encre bleu marine, partagée avec le groupe, porte les titres et les coques sombres.
Cyan 500 pour les surfaces et les actions, cyan 700 pour les liens et le texte sur fond clair, où il atteint le contraste AA.
L’encre bleu marine #112C3B et les couleurs communes viennent de Leasetic Group. Elles rattachent visuellement Colibris à l’écosystème.
Les accents chauds, corail, rose poudré et sable, servent aux catégories, aux mises en avant et aux visuels de carte. Jamais derrière du texte courant.
Les séries de graphique suivent l’ordre du groupe visualisation. En séquentiel, la rampe cyan seule. En divergent, corail pour le retard, sable pour la cible, émeraude pour l’avance.
Sur fond cyan ou marine, le texte secondaire passe en sauge #C8E2C8.
Typographie
Inter est la seule fonte. Elle porte les titres en SemiBold 600, les héros en Bold 700, et tout le corps de texte en Regular et Medium.
Inter
Inter en display. SemiBold 600 par défaut, Bold 700 pour les énoncés héros. Interlettrage -0,02em au-dessus de 28 px.
Inter en texte. Regular 400 pour le corps, Medium 500 pour les libellés, badges et métadonnées.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@€£$&*})({§?
display-2xl · 72pxUn enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
display-xl · 56pxUn enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
display-lg · 44pxUn enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
display-md · 36pxUn enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
display-sm · 28pxUn enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
heading-lg · 22px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
heading-md · 18px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
body-lg · 18px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
body-md · 16px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
body-sm · 14px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
body-xs · 13px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
caption · 12px
Un enregistrement unique, clôturé chaque mois, traçable jusqu’à la facture.
Une seule famille sur toute la marque. Le contraste vient du grammage et de la taille, pas d’une seconde fonte.
Interlettrage -0,02em à partir de 36 px, -0,012em entre 22 et 28 px, neutre en dessous.
Casse phrase pour les titres, les boutons et la navigation.
Les chiffres clés se composent en display-sm 28 px SemiBold, avec leur unité et leur période en body-sm juste en dessous.
Le style 12 px reste réservé au mobilier d’interface, jamais au texte de lecture.
Mouvement
Précis et retenu. Fondus et glissements courts, rien de plus.
In motion
Move
Reordering, shuffling. The system responding to a gesture.
Glide
The view moves between fixed points. Near shapes sweep, far ones barely shift.
Push
The view travels forward. What was far behind ends up in front of you.
Pan
One long sideways move. The curve decides how it starts and how it stops.
In real use
Exchange
Carousel
Toggle
Reveal
Accordion
Tabs
Modal
Toast
The curve
Enter
Move
Trois durées : 120 ms pour le rapide, 200 ms pour la base, 360 ms pour le lent. Trois courbes : ease-standard cubic-bezier(0.4, 0, 0.2, 1) pour les changements d’état, ease-out cubic-bezier(0, 0, 0.2, 1) pour les entrées, ease-in cubic-bezier(0.4, 0, 1, 1) pour les sorties. Aucun rebond, aucune élasticité, aucune boucle décorative infinie. Une plateforme de mesure n’a pas besoin d’effets.
Les graphiques s’animent à la première apparition seulement, jamais à chaque rafraîchissement de données. Une valeur qui bouge doit signifier que la valeur a changé. Plat par défaut. Le contraste entre les cartes blanches et les coques #F5F8F9 assure la séparation : ni bordure, ni ombre de carte par défaut. L’ombre, teintée de bleu encre, reste aux surcouches, au soulèvement au survol et aux images flottantes. Anneau de focus : 3 px de cyan à 32 pour cent d’opacité, visible sur toutes les surfaces.
Voix
Analytique et claire. Nous parlons en nous, le lecteur est vous. Guidée par la donnée, obsédée de clarté, faisant autorité sur l’ESG. Précise, responsable, systémique.
Chaque périmètre, un enregistrement auditable.
−18 % par rapport à l’exercice 2023. 42 tCO₂e. 3 périmètres.
Une performance mesurée, prête à publier.
450 tonnes de CO₂ évitées par an sur notre base clients.
Entité de Leasetic Group. Colibris fonctionne parfaitement seul, et mieux encore quand la boucle derrière les chiffres se visite.
Titres et boutons
Do
Casse phrase, verbe précis
Don't
Casse Titre, MAJUSCULES ou point d’exclamation
Appels à l’action
Do
Voir la méthodologie, Ouvrir le rapport, Demander une démonstration, Explorer le tableau de bord
Don't
Commencer gratuitement, Essayer maintenant
Chiffres
Do
Valeur, unité, période et base de référence
Don't
Un pourcentage sans périmètre, sans date ni dénominateur
Accroche
Do
Chaque périmètre, un enregistrement auditable
Don't
Toutes vos données au même endroit
Promesse
Do
Une performance mesurée, prête à publier
Don't
Des analyses ESG puissantes
Allégations environnementales
Do
Émissions évitées, durée de vie mesurée, volumes réemployés
Don't
Neutre en carbone, vert, écoresponsable sans preuve
Emoji
Do
Aucun, nulle part
Don't
Emoji dans un titre, un tableau de bord ou une publication
Graphiques
Do
Ordre de séries fixe, axe à zéro, légende explicite
Don't
Couleurs choisies au cas par cas ou échelle tronquée
Visionboard
Applications
La marque en situation. Cartes blanches sur coques encaissées, contrôles en pilule, cyan pour les actions, encre pour les titres.
Colibris
Tohello@colibris.app
SubjectL'efficience est éco-responsable
Best,
ColibrisBrand Guidelinescolibris.app·@colibris
Edit profileColibris@colibris
Colibris est un outil de mesure et d'amélioration de la performance économique et environnementale de vos contrats fournisseurs.
412 Following12.8K Followers
colibris2hL'efficience est éco-responsable
Réserver une démonstration
Ressources
Les fichiers de marque, au format SVG, prêts à l’emploi.
Le logo ne se recolore pas, ne se déforme pas et ne se recompose pas. Taille minimale de la marque seule : 24 px. Sur un fond cyan ou marine, utiliser la version fonds sombres.
Logo files
Every mark variant in this guideline, straight from the brand tokens.
Typefaces
The faces this brand sets in. Files or foundry links.
Inter
Get at Google FontsBrand colors
The palette as working files, generated from the tokens.
