Tazury vend un autocollant. Alors la marque en est un.
Papier crème, traits à l’encre, ombres plates décalées, couleurs de fruits. Rien de dégradé, rien de flou, rien qui ressemble à un tableau de bord d’entreprise. Si un élément ne pourrait pas être découpé et collé sur une vitrine, il n’a rien à faire ici.
Le logo
Quatre idées différentes, pas quatre habillages de la même. Cliquez pour voir chacune en situation.
Sur papier, sur encre, et en favicon 64 / 40 / 24 px.
La retenue: La Plaque. C’est la seule des quatre qui montre les deux choses à la fois: un QR, donc on comprend le produit en une seconde, et un autocollant dont le coin se décolle, donc on comprend qu’il est physique. Le jaune est aussi la couleur d’action du site, la marque et le bouton parlent la même langue. Pour changer, modifiez ACTIVE_LOGO dans components/brand/logo.tsx .
Un bol de fruits sur du papier.
L’encre et la crème portent 80 % de la page. Les fruits servent à distinguer, jamais à décorer au hasard: chaque type de plaque garde sa couleur partout.
Encre
#16161ATexte, contours, fond des bandeaux
bg-inkCrème
#FFF6E9Le papier. Fond de tout le site
bg-creamCrème foncée
#FFEDD6Sections alternées, cartes calmes
bg-cream-deepMyrtille
#2F6BFFAvis Google, graphiques, liens
bg-blueberryMandarine
#FF6B2CMenus, étiquettes de section
bg-mandarineChewing-gum
#FF3D71Instagram, alertes, erreurs
bg-bubblegumMenthe
#00C08BConfirmations, site web, chiffres qui montent
bg-mintBanane
#FFCB3DLa couleur d’action: boutons, surlignage, faisceau de scan
bg-bananaRaisin
#8A5CF6Wi-Fi, jeux et nouveautés
bg-grapeDeux voix, jamais trois.
Bricolage Grotesque parle fort dans les titres. Geist explique calmement en dessous. Geist Mono ne sert qu’aux codes de plaque, parce qu’un code se lit caractère par caractère au téléphone.
Bricolage Grotesque
Titres, chiffres, logo
Collez-la une fois
Geist
Corps de texte, boutons, interface
Une plaque Tazury pointe vers Tazury, pas vers votre lien. Vous changez la destination en deux clics.
Geist Mono
Codes de plaque et URL uniquement
7K3M9P2X · t.tazury.app/r/7K3M9P2X
Le kit autocollant
Contour d’encre à 2,5 px, coins ronds généreux, ombre plate décalée de 4 px. Au survol l’élément se soulève, au clic il s’écrase sur son ombre. C’est toute la règle.
Étiquettes
Cartes
Une carte
Elle se soulève quand on la survole.
Une carte
Elle se soulève quand on la survole.
Une carte
Elle se soulève quand on la survole.
Des ressorts, pas des courbes.
Tout ce qui bouge sur Tazury est un objet physique, et un objet physique dépasse un peu avant de se poser. Aucune animation ne dure plus d’une seconde, et tout s’arrête si le visiteur a demandé moins de mouvement.
Monte de 26 px, sort du flou, se pose. Le même geste que le tableau de bord quand les données remplacent le squelette.
Se soulève de 6 px, l’ombre s’allonge, l’objet se redresse. Au clic il retombe sur son ombre.
Dans une liste, chaque élément part 90 ms après le précédent. Jamais plus, sinon on attend.
On parle comme un commerçant à un commerçant.
Oui
- Parler comme au comptoir, pas comme dans un contrat
- Des phrases courtes, une idée par phrase
- Dire le prix, dire ce qui n’est pas inclus
- Le tutoiement jamais, le vouvoiement toujours
Non
- « solution innovante », « écosystème », « disruptif »
- Des promesses de chiffres qu’on ne peut pas tenir
- Des anglicismes quand le mot français existe
- Les tirets cadratins
La phrase de marque
La plaque qui change d’avis.
Double sens assumé: la plaque change de destination, et l’avis Google est justement ce qu’elle va chercher.