La marque
Ce qui fait que Labelmate ressemble à Labelmate
Le logo, la mascotte, les couleurs, les polices, les pièces de l'interface, les photos et la façon d'écrire. Tout est ici, avec les règles qui vont avec, dans l'app comme sur le site.
Labelmatepar vvaultLe logo
Une mascotte et un mot
Le logo réunit la mascotte, un disque qui marche en casquette, et le mot « Labelmate » au-dessus de « par vvault », en Degular Display Medium. Les deux lignes ensemble ont la hauteur du personnage.
Sur une tuile lime aux coins arrondis, la mascotte devient l'icône de l'app et de chaque onglet. Il n'y a pas d'autre logo : la mascotte suffit.
Labelmatepar vvault
- « Labelmate » s'écrit avec un L majuscule, toujours.
- La mascotte est utilisée telle quelle : jamais recolorée, remplie ni redessinée.
- Là où elle ne dessine pas, c'est le lime qui apparaît.
- Sur le site comme dans l'app, la mascotte se place à gauche du mot.
Les couleurs
Une ancre, des neutres chauds, deux couleurs profondes
Comme chez Zapier, le système privilégie la concentration plutôt que la variété : une couleur d'ancre, des neutres qui la portent, deux couleurs profondes, et chaque texte lisible sur son fond.
Le lime est l'ancre
Il fait reconnaître la marque. Jamais du texte, jamais un trait fin sur un fond clair : c'est toujours l'encre qui se pose dessus.
Le violet est l'action
Chaque bouton et chaque lien de l'app. Le lime ne se lit pas sur un fond clair, l'action a donc sa propre couleur.
Les neutres portent la couleur
Du papier au lieu du blanc, de l'encre au lieu du noir, et des ombres d'encre, légères.
Chaque texte passe AA
Le texte courant passe même AAA. Flint et pebble servent aux traits, jamais au texte.
L'ancre et l'action
Le lime fait reconnaître Labelmate ; le violet est ce sur quoi l'on clique dans l'app.
- Lime
#ACF01A
RGB 172 240 26
L'ancre : l'icône, la ligne du haut, le bouton principal du site
- Lime Dark
#9CDC00
RGB 156 220 0
Le lime sous le pointeur
- Violet
#6D3BF5
RGB 109 59 245
Les boutons de l'app, l'action
- Violet Dark
#5B2FD6
RGB 91 47 214
Le texte des liens, les survols
- Violet Wash
#EEE9FF
RGB 238 233 255
Étiquettes, passages surlignés, sélection
Les neutres
Huit teintes chaudes qui penchent vers le lime. Rien n'est blanc pur, rien n'est noir pur.
- Paper
#FEFEFB
RGB 254 254 251
La page, les cartes, la barre latérale
- Linen
#F5F5F0
RGB 245 245 240
Une bande sur deux
- Chalk
#EBECE4
RGB 235 236 228
Sous le pointeur, un contrôle choisi
- Pebble
#DBDBD2
RGB 219 219 210
Les filets
- Flint
#B8B8AB
RGB 184 184 171
Bords des champs, traits appuyés
- Sage
#696B5E
RGB 105 107 94
Le texte discret : dates, aides
- Graphite
#525448
RGB 82 84 72
Le texte secondaire
- Ink
#101602
RGB 16 22 2
Le texte, les surfaces sombres
La profondeur
Deux couleurs profondes pour une bande sombre ou un moment de marque. Du papier ou du lime dessus.
- Forest
#29311E
RGB 41 49 30
La bande sombre
- Indigo
#241E4B
RGB 36 30 75
Une bande sombre, rarement
Les valeurs sont celles de l'app et du site.
L'accessibilité
Chaque texte lisible sur son fond
Les rapports sont calculés avec la formule WCAG 2.x. AA demande 4,5 pour 1 pour un texte courant, AAA en demande 7.
| Texte | Fond | Rapport | Niveau | |
|---|---|---|---|---|
| Relevé | Ink | Paper | 18.3:1 | AAA |
| Relevé | Ink | Lime | 13.4:1 | AAA |
| Relevé | Ink | Violet Wash | 15.6:1 | AAA |
| Relevé | Graphite | Paper | 7.6:1 | AAA |
| Relevé | Sage | Paper | 5.4:1 | AA |
| Relevé | Violet Dark | Paper | 7.4:1 | AAA |
| Relevé | Paper | Violet | 5.8:1 | AA |
| Relevé | Paper | Forest | 13.4:1 | AAA |
| Relevé | Lime | Forest | 9.8:1 | AAA |
| Relevé | Paper | Indigo | 15.3:1 | AAA |
Les polices
Une famille pour lire, une pour les titres
Inter pour tout ce qui se lit et se clique, Degular Display pour les titres et le mot « Labelmate ».
Degular Display Bold
Vos relevés de royalties
Les titres des pages et des sections
Un seul poids, réglé à 700 : le navigateur n'en invente jamais un autre.
Aa Bb Cc 0123456789 € %
Degular Display Medium
Labelmate
Le mot « Labelmate » et « par vvault »
Servie par le kit Adobe Fonts de l'équipe.
Aa Bb Cc 0123456789 € %
Inter
Chaque ligne d'un relevé renvoie aux lignes du rapport d'où elle vient.
Tout ce qui se lit et se clique
Regular 400 et Medium 500, tailles optiques activées.
Aa Bb Cc 0123456789 € %
- L'espacement des lettres n'est jamais réduit, dans aucune des deux familles.
- Dans l'app, le titre d'une page mesure 36 px, celui d'une section 22 px.
- L'app garde ses fichiers Inter sur l'ordinateur : elle n'a jamais besoin du réseau pour afficher du texte.
L'interface
Les pièces qui reviennent partout
Les boutons et les liens du site suivent Mailchimp, le mot surligné du titre suit Record Club.
- Des pilules au contour encre de 1,5 px : lime et encre pour l'action principale, transparentes pour l'autre. Sous le pointeur, elles se soulèvent de 3 px sur une arête encre.
- Un lien qui mène quelque part finit par un rond lime qui tient une flèche encre ; sous le pointeur, le rond devient une pilule sous les mots.
- Le mot qui change dans le titre est posé sur un coup de pinceau violet, net, sans ombre ni flou.
- Pas d'effet de verre, nulle part : pas de flou, pas de barre dépolie.
Les photos
Des images nettes, chaleureuses, sans marque
Les photos du site viennent de Pexels. Nous les choisissons nettes et chaleureuses, en lumière naturelle, et nous les servons depuis notre propre site.
Les images de l'app sont des captures de l'app elle-même, sur son label d'exemple, « Exemple Records ».
- Aucun logo, aucune pochette de disque, aucune marque reconnaissable.
- Les personnes photographiées ne sont jamais présentées comme des clients ou comme notre équipe.
- Chaque page nomme ses photographes.
L'écriture
Comment Labelmate parle
Des mots simples
Des phrases courtes, à la voix active. On dit « vous », et on explique un terme du métier la première fois.
Rien d'inventé
Chaque affirmation est vraie aujourd'hui, chaque chiffre a une source, et les exemples sont signalés comme tels.
Pas de tiret long
Ni tiret cadratin, ni demi-cadratin : des virgules, des deux-points ou des parenthèses à la place.
La typographie française
Une espace insécable avant les deux-points, les points-virgules, les points d'interrogation et d'exclamation, et dans les montants.