Visuel Aidentic Gamble Hub

1) L'essence de la marque et les principes

Image : technologique, honnête, fiable, axée sur les données et la responsabilité.
Ton : Discret et compétent ; sans hyperbole « de jeu ».
Principes : lisibilité> décorations, disponibilité par défaut, consistance entre les produits.

2) Logo : Construction et utilisation

2. 1 Options

Principal (horizontal) : signe + mot Gamble Hub.
Compact (signe) : pour favicon/avatars.
Vertical : pour les zones étroites.

2. 2 Construction et zone de protection

Grille 8px. Zone de sécurité = hauteur G majuscule autour du périmètre.
Taille minimale : 18 mm de largeur ; l'écran est de 120 px.
Vous ne pouvez pas modifier les proportions, incliner, ajouter des effets/dégradés à partir d'une palette.

2. 3 Sur fond

Sur un fond clair, un logo coloré.
Sur le complexe/photo - monochrome (blanc/noir) sur le réservoir 8-12 px arrondi.
Sur le noir, inversé.

3) Système de couleur (jetons)

3. 1 Palette de base

Primary / Indigo 600: `#2F6BFF`

Primary Dark / Indigo 700: `#1E54F0`

Success / Green 600: `#2EAE60`

Warning / Orange 600: `#FF9F1A`

Critical / Red 600: `#E53935`

FG Primary: `#11131A`

FG Muted: `#656D76`

BG Base: `#FFFFFF`

BG Subtle: `#F7F8FA`

BG Inverse: `#0E1116`

3. 2 Gradients (au choix)

Brand Gradient : 'linear-gradient (135deg, # 2F6BFF 0 %, # 1E54F0 50 %, # 2EAE60 100 %)' - utiliser dosé.

3. 3 Contraste et états

Bouton primary : fond '# 2F6BFF', texte blanc, hover '# 1E54F0', disabled 40 % alpha.
Contraste du texte ≥ 4. 5:1 (AA). Pour l'inversion - ≥ 3:1 pour le grand.

4) Imprimerie

Titres : Inter/SF Pro/système, gras 600-700.
Texte : Inter 14-16 px, line-height 1. 5.
Code/mono : JetBrains Mono ou mono système.
Hiérarchie : H1 32/40, H2 24/32, H3 20/28, Body 16/24, Caption 12/16.
Ne pas utiliser de polices décoratives pour l'interface.

5) Grille, indentations et rayons

Grille : 8px ; conteneurs avec max-width 1120-1280 px.
Cartes : retraits internes 16-24 px, inter-cartes 16 px.
Rayons : 8/12/16 px ; par défaut 12 px, pour les boutons 8 px.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Iconographie et illustrations

Grille des icônes 24 × 24, ligne 1. 75-2px, arrondis cohérents.
La sémantique est primaire, la couleur est secondaire (la couleur change selon les états).
Illustrations : plat, sans symbolisme « casual » (jetons/cartes - seulement dans les matériaux d'information neutres et dans les contextes modérés, non encourageants).

7) Images et photos

Thèmes : technologie, données, sécurité, équipe.
Éviter les clichés « jackpots/confettis ».
Au-dessus de la photo, il y a un placard dégradé/sombre pour le contraste du texte (au moins 60 % d'opacité dans la partie noire).

8) Thèmes sombres et lumineux

Sombre : fond '# 0E1116', texte '# E6E8EB', bordure '# 2A2F37'.
Les accents conservent le contraste (la lumière primaire est de 8 à 12 %).
Graphiques : Arrière-plan en 2 étapes plus clair que l'arrière-plan, grille atténuée, signatures contrastées.

9) Accessibilité (A11y)

Contraste AA/AAA ; ne pas supprimer les styles de focus.
Alternatives textuelles au logo et aux images significatives.
La taille minimale d'un clic est de 40-48 px.
Respecter 'prefers-reduced-motion' - réduire/désactiver les animations.

10) Ton et microcrédit

Pas de jargon.
Les erreurs expliquent quoi faire à l'utilisateur.
Unités et formats : dates dans les localités de l'utilisateur, dans l'interface - ISO à la saisie, devises avec code (EUR, USD).
Ne pas utiliser de métaphores « de jeu » dans les messages alimentaires.

11) Exemples de tokens (JSON et CSS)

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) Composants et états (exemples UI)

Bouton Primary : fond primary-600, texte # FFF, hover primary-700, disabled 40 % alpha.
Badji : success/warning/critical avec texte lisible et icône.
Carte : fond BG Base, ombre sm, rayon md, tête 16 px, corps 16-24 px.

13) Animation et mouvement

Transitions 120-200 ms, courbe "ease-in-out'.
Les interpolations ne sont que « bou »/« opacity ».
Pour les états critiques - pas d'animations (ne pas distraire).

14) Médias sociaux, présentations, e-mail

Avatars/icônes : signe sur le placard primary-600, tirets 12-16 px.
Diapositives : fond clair/sombre, grille 8px, H1 40-48, contenu 18-24.
E-mail : modèle HTML 600-720 px de largeur, polices système/Inter, boutons ≥ 44 px de hauteur, thème sombre pris en compte.

15) Impression, merche et extérieur

Profil de couleur CMJN, Pantone-équivalents sont alignés avec la typographie.
Conserver les dimensions minimales du logo et les rayons.
Le papier est mat, éviter les vernis « flashy » ; le gaufrage est admissible pour la marque.

16) Marques légales et jeu responsable

Un mot avec un signe de ®/™ si nécessaire (yurd. pays).
Disclaymer et limites d'âge - dans la zone inférieure des maquettes ; lisibilité AA.
Ne pas utiliser l'aidentique dans les contenus qui encouragent le comportement excessif.

17) Localisation et RTL

Le signe/mot du logo n'est pas traduit.
Blocs de texte - dans les ressources ; support RTL (mise en miroir des flèches/icônes).
Les longueurs des lignes en allemand/turc/arabe sont prises en compte dans les maquettes.

18) Do / Don’t

• Maintenez le contraste, les zones de sécurité, la hiérarchie des polices, la grille 8px.
• Vérifiez la visibilité sur la photo/vidéo ; utilisez le réservoir.
• Suivez les tokens - pas de couleurs « aléatoires ».

• Étirer/tondre le logo, appliquer des ombres/contours « pour la beauté ».
• Utilisez les images « de jeu » comme fond dans les produits.
• Mélanger des polices non standard, casser le contraste ou supprimer le focus.

19) Assets, neuming et versions

Neuming : 'gh-logo-hz-color. svg`, `gh-logo-vt-mono-white. svg`, `gh-icon-24-alert. svg`.
Пакеты: `/brand/logos/`, `/brand/icons/24/`, `/brand/templates/`, `/brand/fonts/`.
Formats : SVG pour logos/icônes ; PNG/WebP pour les raster ; PDF à imprimer.
Versioning : BouVer pour un paquet de tokens/icônes ; chainjlog avec 'added/changed/deprecated/removed'.
Source de vérité : dépôt de tokens → assemblage pour web/iOS/Android.

20) Contrôle de qualité et processus

Brand Review en PR : vérification des tokens et du contraste.
A/B pour les images de fond controversées (lisibilité/conversion).
Linter : interdire les couleurs en dehors des tokens, vérifier le texte alt pour les images.
Audit trimestriel : cohérence de la palette/typographie/iconpac.

21) Modèles

Keynote/Slides : titre, section, contenu, « données/graphiques », finale.
Médias sociaux : 1:1 avatar, bannière 16:9, histoires 9:16.
E-mail : accueil, CTA, avis, résumé.
Landing : bloc hero, 3 avantages, vitrine, CTA, sous-sol.

22) Chèque d'application

• Logo : version correcte, zone de sécurité, contraste, taille.
• Couleurs : seulement les tokens ; contraste AA.
• Polices : hiérarchie, interligne, tailles de ciblage.
• Icônes : grille 24 × 24, épaisseur de ligne unique.
• Images : sujet valide, lisibilité du texte en haut.
• Thème sombre/léger : vérifié, pas d'artefacts.
• Localisation/RTL : les lignes ne « cassent » pas la mise en page.
• Les marques légales/Responsible Gaming sont présentes.

23) Plan de mise en oeuvre (3 itérations)

• Logos, palette, imprimerie, jetons de base, jeu d'icônes 24 × 24 (base 40-60 pc), modèles de présentation et e-mail.

• Thème sombre, composants UI sur les tokens (boutons, cartes, tables), hyde pour les graphiques, médias sociaux, modèle de landing.

• Iconpack étendu, illustrations, maquettes imprimées, linter/CI pour tokens, audits de marque réguliers.

24) Mini-FAQ

Puis-je repeindre le logo pour une action spéciale ?
Seulement dans les thèmes saisonniers approuvés et sans perturber le contraste/zone de protection.

Qu'est-ce qui est primaire - tokens ou mise en page ?
Jetons. La mise en page doit utiliser les variables système couleurs/indentations/typographies.

Comment procéder dans les cas controversés ?
Ouvrez RFC dans le référentiel aidentitique, joignez des exemples, exécutez Brand Review.

Résultat

Aidentica Gamble Hub n'est pas un « jeu d'images », mais un système : logo, palette, typographie, icône, tokens et processus de contrôle de la qualité. Suivez les règles de contraste, de disponibilité et de cohérence, utilisez des jetons et des modèles - et la marque sera reconnaissable, moderne et unifiée dans tous les produits et canaux.