Compaytence
Les bases de la marque
Ce dont vous avez besoin pour créer une page d’atterrissage qui ressemble à la nôtre : un accent, un fond, deux polices. Cliquez sur une couleur pour la copier. Lorsque cette fiche ne couvre pas une décision, choisissez l’option la plus sobre.
Un bleu, quatre usages
Compaytence utilise une seule couleur d’accent. C’est le bleu du logotype, et tout le reste de la page est neutre.
Le bleu existe en quatre intensités, et celle à utiliser dépend de son rôle, non de vos préférences. La raison est le contraste : le bleu de la marque est vif, il fonctionne très bien pour un bouton rempli et mal pour une ligne de texte.
N’utilisez pas #33A9FF pour du texte sur un fond clair. Son contraste y est de 2.42:1, bien inférieur au minimum de 4.5:1, et c’est de loin l’erreur la plus fréquente que nous voyons sur les pages de partenaires. Sur fond clair, ce bleu est un aplat : arrière-plans de boutons, formes d’icônes, logo. Lorsqu’un mot doit être bleu, utilisez #0077BD. Sur le fond sombre, ce même bleu convient au texte, car son contraste y est de 7.51:1.
La gamme complète figure ci-dessous si vous avez besoin d’une teinte pour un état de survol ou un arrière-plan discret. Chaque nuance a la même teinte avec une luminosité différente, ce qui explique qu’elles ne jurent jamais. N’ajoutez jamais une seconde couleur d’accent : ni violet, ni sarcelle, ni ambre. Si un élément doit se distinguer, modifiez son poids ou sa taille, pas sa teinte.
Un fond chaud
Nos gris ne sont pas gris. Ils contiennent une légère chaleur, ce qui permet au bleu de paraître froid à côté d’eux.
Utilisez-les exactement ainsi. Un gris standard, une page en #FFFFFF pur ou un titre noir pur donneront l’impression d’une autre marque posée à côté de notre site, même si la différence ne tient qu’à quelques points de saturation.
Pour les bordures et séparateurs, n’utilisez pas un gris. Utilisez la couleur d’encre avec une faible opacité, afin que les bords restent de la même famille que le texte placé au-dessus : rgba(31, 27, 22, 0.12) sur fond clair, rgba(233, 230, 225, 0.12) sur fond sombre. Les ombres suivent la même logique et sont chaudes, jamais noir neutre.
Deux polices, rôles fixes
Instrument Serif pour l’affichage et chaque chiffre. Archivo pour tout ce qui se lit. Les deux sont gratuites sur Google Fonts.
Les chiffres méritent une attention particulière, car ils constituent l’élément le plus reconnaissable de notre travail. Chaque chiffre utilise la police serif, le bleu et des chiffres tabulaires pour aligner les colonnes :
Définissez-les avec font-variant-numeric: tabular-nums lining-nums. Dans le texte courant, un chiffre tel que 2.4x est légèrement plus grand que les mots qui l’entourent, afin d’attirer l’œil sans passer en gras.
Chargez-les ainsi :
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
- Texte courant autour de 17px, avec une hauteur de ligne généreuse.
- Titres en serif, avec une graisse de 400.
- Serif italique sur une ligne entière, jamais un seul mot dans un titre.
- Inter, Geist, Roboto, Arial ou une pile de polices système.
- Une police mono pour les surtitres, libellés ou titres.
- Un dégradé remplissant un élément typographique.
Le logotype
Deux variantes, une pour chaque fond. Elles ne sont pas interchangeables.
- Conservez autour de la marque un espace libre d’au moins la hauteur du C, de chaque côté.
- Hauteur minimale de 24px à l’écran. En dessous, le logotype cesse d’être lisible.
- Ne le recolorez pas, ne le contournez pas, n’ajoutez pas d’ombre, ne le faites pas pivoter et ne le placez pas sur une photographie chargée.
- Ne le recréez pas en texte dynamique et ne modifiez pas l’approche ou ne le condensez pas pour l’adapter à un espace.
Envoyez un e-mail à trevor@compaytence.com pour obtenir les fichiers SVG et PNG en pleine résolution. Les deux images ci-dessus sont intégrées à ce fichier ; vous pouvez donc faire un clic droit et enregistrer l’une ou l’autre pour une maquette rapide, mais utilisez les vrais fichiers pour tout élément livré.
Forme, espace et mouvement
Deux rayons d’angle, un rythme d’espacement et de la retenue dans le mouvement.
- 14px pour les conteneurs : cartes, panneaux, images, fenêtres modales.
- 8px pour les contrôles : boutons, champs, étiquettes, petites pastilles.
- Rien d’autre. Pas de formes pilule, pas d’angles droits, pas de troisième valeur.
- Une bordure fine au repos, sans ombre.
- Élévation et ombre au survol uniquement.
- Tout n’est pas une carte. Une page composée uniquement de cartes ressemble à du bruit.
L’espacement repose sur une ligne de base de 30px. Utilisez des pas entiers entre les blocs et les plus petits pas à l’intérieur d’un composant. Tout ce qui ne suit pas cette échelle paraîtra légèrement décalé à côté de nos pages, d’une manière difficile à nommer mais facile à voir.
Pour le mouvement : fondus et courtes montées lorsqu’une section apparaît, environ une demi-seconde, et rien d’autre. Pas de parallaxe, pas de compteurs qui s’animent, pas de carrousel se déplaçant seul. Respectez prefers-reduced-motion et ne faites jamais dépendre le contenu d’une animation : si le script échoue, tout doit tout de même figurer sur la page.
Avant de nous l’envoyer
- Le texte courant atteint un contraste de 4.5:1 avec son arrière-plan, dans les deux thèmes si vous avez créé les deux.
- Aucun texte en #33A9FF sur fond clair.
- Chaque chiffre est en Instrument Serif, bleu et tabulaire.
- Une couleur d’accent sur la page. Comptez-les.
- La variante du logotype correspond à son fond, fait 24px ou plus et dispose d’un espace libre.
- Le focus clavier est visible sur chaque lien, bouton et champ.
- Les cibles tactiles font au moins 44px.
- Elle tient à 375px de large sans défilement horizontal.
Envoyez un lien de préproduction plutôt que des captures d’écran. Nous le regarderons sur les deux fonds et à la largeur d’un téléphone, puis vous répondrons dans la journée.