Votre guide numérique.
01 — La marque
Depuis près de vingt ans, Oyé-Oyé accompagne les entreprises sur Internet. Mais le métier a changé : un site n'est plus une finalité, c'est un outil parmi d'autres. Nos clients ne cherchent plus quelqu'un qui parle plus fort — ils cherchent quelqu'un qui les guide.
Oyé-Oyé accompagne les entreprises dans leurs décisions numériques afin de leur permettre de grandir durablement.
Phrase de positionnementNous refusons le jargon. Un bon partenaire explique simplement un sujet complexe.
Nous préférons perdre une vente que faire une promesse irréaliste.
Nous ne suivons pas les tendances. Nous choisissons ce qui apporte une vraie valeur.
Performance, accessibilité, SEO, sécurité. Chaque détail compte.
Nous travaillons avec des humains, pas avec des numéros de dossier.
Conséquence directe sur l'identité : la mention « Agence web » disparaît de tous les supports. La seule baseline autorisée est la signature « Votre guide numérique. »
02 — Le logo
Une aiguille à deux pointes dans un cercle ouvert aux quatre points cardinaux. Le symbole le plus juste de « guider » : trouver son cap, son nord, sa direction. Les ouvertures allègent l'anneau et évitent qu'il ne se lise comme un cadran d'horloge. Le cercle fait aussi le « O » d'Oyé Oyé.
Logo principal
Version par défaut, sans baseline. À privilégier partout où l'espace le permet.
Signature
Pour l'accueil, les couvertures et la communication. La signature est la seule baseline autorisée.
Déclinaisons
Le logo tient en une seule couleur : c'est le test qui valide un symbole durable.
Tailles minimales
Icône seule : 16 px minimum. Lockup complet : 110 px de large minimum. Zone de protection : un vide égal au diamètre de la boussole tout autour.
Le nom légal reste « Oyé-Oyé » avec trait d'union : mentions légales, factures, contrats. Seul le wordmark du logo s'en passe.
03 — Les couleurs
Deux couleurs portent le logo, deux accents animent l'interface, six teintes secondaires structurent le reste. Le blanc domine : tout doit respirer.
Couleurs de marque
Couleurs secondaires
Règle d'équilibre : environ 70 % de blanc, 20 % d'anthracite et de gris, 8 % de teal, 2 % d'accents. Le corail ne sert qu'aux actions ; s'il devient décoratif, il perd tout pouvoir.
04 — La typographie
Sora pour la structure, Manrope pour la lecture. Toutes deux libres et disponibles sur Google Fonts.
Repli : 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif
Repli : 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif — Poppins est écartée (trop utilisée, sans personnalité).
05 — Le mouvement
L'aiguille tourne dans la boussole : le chargement devient un moment de marque. Huit mouvements, trois vitesses chacun. Animation en CSS dans le SVG, sans JavaScript, et coupée automatiquement pour les personnes sensibles au mouvement.
Régulière, neutre. Le loader universel.
.oye--continuL'aiguille dépasse puis se recale.
.oye--rechercheVa-et-vient doux autour du nord.
.oye--balancierHuit crans par tour, façon trotteuse.
.oye--saccadeLe cercle tourne à l'inverse de l'aiguille.
.oye--contreL'aiguille tourne, le cercle respire.
.oye--pulseDépart vif, arrivée souple avec rebond.
.oye--elastiqueUn demi-tour, une pause, un demi-tour.
.oye--deux-tempsQuand utiliser quoi : « rotation continue » à 1,4 s pour tous les usages courants — boutons, listes, petits formats. « Recherche du nord » à 1,9 s pour les moments de marque : écran de démarrage, première visite, page de chargement. Les mouvements lents demandent de l'espace : au-dessus de 48 px seulement.
06 — Les supports
Le logo appliqué sur les supports du quotidien. Rendus indicatifs pour juger l'échelle, les couleurs et le comportement des versions monochromes.
Conseil, sites, applications, automatisation. Un partenaire pour faire grandir votre entreprise, sur la durée.
Prendre rendez-vous07 — La signature e-mail
Point de contact le plus fréquent de la marque. Attention : les clients mail bloquent les SVG et les feuilles de style — le logo doit être un PNG hébergé, la mise en page en tableau, les styles en inline, et les polices restent Arial (Sora ne s'affichera pas chez le destinataire).
Modèle principal
Bonjour,
Je vous confirme notre rendez-vous de jeudi.
Léa
|
Léa Moreau
Conseillère numérique · Oyé Oyé
Votre guide numérique.
06 00 00 00 00 · lea@oye-oye.fr
oye-oye.fr |
Modèle de réponse
C'est noté, je m'en occupe.
|
Léa Moreau — Oyé Oyé 06 00 00 00 00 · oye-oye.fr |
Deux signatures à configurer : la principale pour le premier message, la courte pour les réponses — sinon les fils longs accumulent les logos.
alt obligatoire<style>Le HTML doit être fourni prérempli à chaque collaborateur — seuls le nom, la fonction et le téléphone changent. Sinon chacun improvise et la cohérence disparaît en trois semaines.
08 — Le ton
Elle compte autant que le logo. Nous écrivons comme un partenaire, jamais comme un vendeur. Nous préférons démontrer plutôt que promettre.
« Nous allons construire cela ensemble. »
Ce que nous disons« Notre solution révolutionnaire… »
Ce que nous ne dirons jamaisLe client doit se sentir plus serein après chaque échange. C'est le seul indicateur qui compte.
09 — Les fichiers
Tous les fichiers sources, prêts à l'emploi.