Charte graphique Yazene — v1.0.0

Évolution approuvée de l’identité Yazene, publiée en v1.0.0. La présentation montre les originaux, la version approuvée et les projections d’interface. Les exports approuvés sont distribués dans la médiathèque.

Identité et construction

Le dépôt contient huit PNG historiques dans apps/frontend/public/branding/. Les deux PNG de référence sont copiés dans sources/original/. Leur signe distinctif est un Y souple, accompagné d’une orbite allant du bleu au violet, d’une étoile à quatre pointes et d’un geste violet sous le Y. Le lettrage « Yazene » est épais et incliné. La version v1.0.0 conserve et retrace ces éléments ; il homogénéise le cadrage et fournit des contours SVG indépendants de toute police installée. La mention « Studio », présente dans l’original, est disponible en composition dédiée. Le logo principal porte seulement « Yazene ».

Le master de la géométrie est sources/master-paths.json. Le même dessin nourrit clair, sombre et monochrome. Pour une même composition, les tracés, proportions, épaisseurs, emplacement et viewBox sont identiques. Seuls les aplats changent : l’encre marine devient claire sur fond sombre ; le bleu #2163F6 et le violet #812DFF restent constants. Les bannières suivent la même règle par format. Les contours du nom ne sont pas coupés et aucune baseline n’est ajoutée.

Réserver à l’extérieur du cadre une zone libre de ¼ de la largeur du Y. Ne pas déplacer l’orbite ou l’étoile. on-light s’affiche sur un fond clair, on-dark sur un fond sombre. Les versions monochromes noire et blanche conviennent à une impression à une encre et aux cas où le contraste est vérifié sur le support. Sur une photographie ou un fond coloré, placer le signe sur une plaque opaque testée ; aucune texture ne doit traverser les lettres. Éviter étirement, rotation, recoloration partielle, lueurs, ombres, déformation du nom et réduction du signe complet à 16 px.

Couleurs et tokens

tokens.json est la source sémantique ; tokens.css est généré depuis elle. Les couleurs de marque bleu #2163F6, violet #812DFF, encre claire #0A1631 et encre sombre #F8F9FF sont distinctes des couleurs d’interface. Le bleu du logo n’est pas automatiquement un bouton ni un petit texte.

info, on-info et chart-1 à chart-5 figurent aussi dans les tokens. Texte courant ou secondaire : text/text-muted sur background, surface ou surface-raised. Bouton plein : utiliser obligatoirement le on-* de son fond, jamais du blanc implicite. Les états comprennent un mot et/ou une icône en plus de la couleur. Les graphiques utilisent une légende et des valeurs textuelles ; les cinq couleurs ne sont pas le seul moyen de distinguer les séries.

Contrastes mesurés

QA-REPORT.md fournit les 34 ratios calculés pour les aplats opaques de la version v1.0.0, avec seuil 4,5:1 pour texte et 3:1 pour contours/actions. Le calcul sRGB linéarisé est effectué sur chaque paire de tokens utilisée. Il ne couvre pas une image superposée, une opacité ou un composant futur : ces pixels devront être mesurés après intégration. Il ne certifie pas WCAG 2.2 AA pour les applications actuelles.

Typographie

Le logo garde le lettrage vectorisé d’origine. Les interfaces utilisent Inter, licence SIL OFL 1.1, avec system-ui, Segoe UI, Arial en repli. La police variable locale se trouve dans sources/fonts/. Données denses : police système monospace si l’alignement numérique le requiert. Le dessin du logo reste identique sans chargement de police.

Limiter les paragraphes à 60–75 caractères par ligne. Les labels sont persistants, jamais remplacés par un placeholder. Les nombres de tableau s’alignent selon la colonne et les tableaux défilent localement en mobile.

Interface et iconographie

Échelle d’espacement : 4, 8, 12, 16, 24, 32, 48, 64 px. Largeur de contenu : 1200 px maximum ; gouttière 24 px sur ordinateur et 14–16 px sur mobile. Rayons : contrôle 10 px, carte 18 px, panneau 24 px, pilule 999 px. Bordure utile 1 px border ; une ombre ne sert jamais de seule séparation. Une carte de jeu garde l’art du jeu et pose ses métadonnées/actions sur une surface stable. Les bannières ne reçoivent pas de texte fonctionnel dans le décor.

Les boutons principaux visent 44 × 44 px, les autres cibles au moins 24 × 24 px ou une exception documentée. hover renforce fond ou soulignement ; active apporte un déplacement discret ; focus affiche l’anneau de 3 px ; selected associe fond et repère structurel ; disabled garde un libellé et l’attribut natif ; loading garde un nom stable ; error associe message explicite, aria-invalid et aria-describedby. Noms accessibles pour les boutons à icône ; ordre DOM logique et focus non masqué. Les champs ont labels et aides visibles. Tester 200 % de zoom, clavier et largeur 320 px sur les écrans réels après intégration.

Réutiliser Lucide React, déjà présent dans les deux frontends, avec grille 24 px et trait uniforme 2 px : Gamepad2, UsersRound, LayoutDashboard, Settings2, Search, Bell, Pencil, Trash2. La licence Lucide est ISC. Ne pas mêler d’autres styles de pictogrammes ; le Y Yazene est l’icône propre à la marque.

Transitions courtes de 120–180 ms sans animation décorative permanente ; prefers-reduced-motion: reduce les supprime. Modes light, dark, system : conserver le choix explicite, appliquer le thème avant peinture et choisir le logo selon le fond rendu. La hiérarchie et les composants restent identiques en clair et sombre. La priorité compte > local > système reste définie par le standard social.

Formats et médiathèque

La vitrine Yazene Brand regroupe les 234 fichiers de la version v1.0.0 en 57 compositions filtrables par catégorie, fond et format. Les logos SVG et PNG préservent la transparence ; les JPEG 1024 px sont des dérivés opaques sur le fond clair ou sombre correspondant. Les bannières sont disponibles en SVG, PNG et JPEG, avec exactement la même composition pour un même thème et traitement. Le JPEG sert aux supports qui exigent une image opaque ; il ne remplace pas le master vectoriel. Les fichiers sont disponibles sous un préfixe de version stable.

Bannières et icônes

Web 1920 × 640, partage 1200 × 630, couverture 1500 × 500 ; chaque format a versions brand et background pour les deux thèmes. Composition et placement identiques à format égal. La zone sûre du logo couvre environ 10 % des côtés et 20 % en haut/bas ; les étoiles sont décoratives et peuvent être recadrées. Pour un ratio plus étroit, utiliser la bannière sans logo avec un logo HTML séparé plutôt que découper le master.

Le favicon 16–32 px utilise le Y compact ; les icônes tactiles et d’application utilisent le symbole complet sur fond opaque. Le maskable garde le symbole centré dans une zone de sécurité ; son rendu devra être revu sur les masques des plateformes cibles.

Portée des contrôles

SVG parsés et rasterisés, PNG/ICO ouverts, empreintes et dimensions vérifiées, contraste des tokens mesuré, géométrie light/dark comparée. Ces contrôles portent sur le pack de marque. Les applications qui l’utilisent ont leurs propres contrôles de qualité et d’accessibilité. La médiathèque utilise le même domaine que la vitrine.