Cette page définit les bases visuelles à respecter pour les bots, la documentation, les pages web et les visuels Avenir Motard.
Le but est de garder une identité cohérente, lisible et immédiatement reconnaissable.
Avenir Motard doit transmettre une image:
- moderne,
- communautaire,
- claire,
- dynamique,
- orientée moto, route et entraide.
Il faut éviter les interfaces trop chargées, trop sombres sans contraste, ou trop génériques.
- Hexa:
#00FF8C
- RGB:
rgb(0, 255, 140)
- Usage: couleur d'accent principale, boutons primaires, éléments importants, surlignage visuel.
- Hexa:
#007344
- RGB:
rgb(0, 115, 68)
- Usage: texte accentué, liens, états actifs, variantes plus sobres du vert principal.
¶ Couleurs d'interface recommandées
- Hexa:
#122018
- RGB:
rgb(18, 32, 24)
- Usage: texte principal, titres, icônes foncées.
- Hexa:
#405A4C
- RGB:
rgb(64, 90, 76)
- Usage: texte secondaire, descriptions, métadonnées.
- Hexa:
#F4F6EF
- RGB:
rgb(244, 246, 239)
- Usage: fond de page, surfaces claires, zones de respiration.
- Hexa:
#FFFFFF
- RGB:
rgb(255, 255, 255)
- Usage: cartes, panneaux, blocs de contenu.
- Hexa:
#D8E4D9
- RGB:
rgb(216, 228, 217)
- Usage: bordures, séparateurs, contours subtils.
Ces couleurs peuvent être utilisées lorsqu'un bot ou un mini-jeu a besoin d'une hiérarchie de rareté ou de statut.
- Hexa:
#B0B0B0
- RGB:
rgb(176, 176, 176)
- Hexa:
#2ECC71
- RGB:
rgb(46, 204, 113)
- Hexa:
#3498DB
- RGB:
rgb(52, 152, 219)
- Hexa:
#F1C40F
- RGB:
rgb(241, 196, 15)
- Le vert principal
#00FF8C doit rester la couleur signature.
- Ne pas multiplier les couleurs d'accent sur un même écran sans besoin fonctionnel.
- Garder un contraste suffisant entre fond et texte.
- Réserver les couleurs de rareté aux systèmes de jeu, d'objets, de progression ou de badges.
- Éviter les aplats criards sur de grandes surfaces.
- Famille recommandée:
Bricolage Grotesque
- Fallback:
Segoe UI, sans-serif
- Usage: titres principaux, slogans, headers, gros labels.
- Famille recommandée:
IBM Plex Sans
- Fallback:
Segoe UI, sans-serif
- Usage: paragraphes, descriptions, UI text, documentation visuelle, textes de boutons.
- Utiliser une hiérarchie nette entre titres, sous-titres et texte courant.
- Éviter de mélanger plusieurs familles de polices sans raison.
- Garder des textes courts et lisibles dans les interfaces bot/web.
- Préférer un interlignage aéré pour les contenus explicatifs.
- Bouton principal: fond
#00FF8C, texte foncé.
- Bouton secondaire: fond clair, bordure douce, texte foncé.
- Hover: légère variation de lumière ou ombre, sans animation agressive.
- Les CTA doivent rester sobres, lisibles et immédiats.
- Privilégier des blocs simples, bien espacés.
- Utiliser des cartes ou sections nettes plutôt que des interfaces trop denses.
- Garder un bon rendu mobile.
- Laisser de l'air entre les éléments.
- Les interfaces visuellement trop “IA”, génériques ou sans identité.
- Les dégradés excessifs sans utilité.
- Les polices fantaisie difficiles à lire.
- Les couleurs fluo en dehors du vert signature.
- Les visuels trop sombres où le texte perd en lisibilité.
La palette actuelle s'appuie notamment sur:
- le site web Avenir Motard,
- les couleurs de rareté configurées dans les bots,
- l'identité visuelle communautaire orientée vert, route et clarté.