Identica visiva Gamble Hub

1) L'essenza del marchio e i principi

Immagine: tecnologica, onesta, affidabile, incentrata su dati e responsabilità.
Tono: discreto e competente; senza iperbole d'azzardo.
Principi: leggibilità> decorazione, disponibilità predefinita, consistenza tra prodotti.

2) Logo: struttura e utilizzo

2. 1 Opzioni

Principale (orizzontale) - Segno + parola Gamble Hub.
Compatto (segno): per favicone/avatar.
Verticale: per i siti stretti.

2. 2 Struttura e zona di sicurezza

Griglia 8px. Zona di sicurezza = altezza G maiuscola nel perimetro.
Dimensioni minime: stampa: 18 mm di larghezza; schermo - 120 px.
Non potete modificare le proporzioni, inclinare o aggiungere effetti/sfumature dalla tavolozza.

2. 3 Sullo sfondo

Su uno sfondo luminoso c'è un logo colorato.
In una foto complessa, un monocromo (bianco/nero) sulla piastra 8-12 px arrotondamento.
Sul buio, invertito.

3) Sistema di colori (token)

3. 1 Tavolozza 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 Sfumature (opzionale)

Brand Gradient: 'linear-gradiente (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - usato in modo dosato.

3. 3 Contrasto e stato

Pulsante primary: sfondo «# 2F6BFF», testo bianco, hover «# 1E54F0», disabled 40% alfa.
Contrasto del testo 4. 5:1 (AA). Per l'inversione, 3:1 per la grande.

4) Tipografia

titoli: Inter/SF Pro/sistema, grasso 600-700.
testo: Inter 14-16 px, line-height 1. 5.
Codice/mono: JetBrains Mono o mono di sistema.
Gerarchia: H1 32/40, H2 24/32, H3 20/28, Body 16/24, H2 12/16.
Non utilizzare caratteri decorativi per l'interfaccia.

5) Griglia, indentazione e raggi

Griglia: 8px; contenitori con max-width 1120-1280 px.
Schede: indennizzi interni 16-24 px e intercorretti 16 px.
Raggi: 8/12/16 px; per impostazione predefinita 12 px, per pulsanti 8 px.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Iconografia e illustrazioni

Griglia delle icone 24 x 24, linea 1. 75-2px, arrotondamenti coerenti.
La semantica è primaria, il colore è secondario (il colore cambia in base agli stati).
Le illustrazioni sono piatte, prive di simboli «casual» (schede/mappe - solo in contenuti neutri e in contesti moderati e non incoraggianti).

7) Immagini e foto

I temi sono tecnologia, dati, sicurezza, squadra.
Evitare il cliché jackpot/confetti.
Sopra la foto è una piastra sfumata/scura per il contrasto del testo (opacità minima del 60% nella parte oscura).

8) Temi scuri e luminosi

Scuro: sfondo «# 0E1116», testo «# E6E8EB», bordi «# 2A2F37».
Gli accenti mantengono il contrasto (primary è chiaro tra l' 8 e il 12%).
Grafici: sfondo su 2 passo più chiaro di sfondo, griglia attenuata, firme contrastate.

9) Disponibilità (A11y)

Contrasto AA/AAA; non eliminare gli stili di attivazione.
Alternative di testo al logo e alle immagini significative.
La dimensione minima del click è 40-48 px.
Rispetta «preferers-reduced-motion» - Riduce/disattiva le animazioni.

10) Tonalità e microcopirating

In breve, senza gergo.
Gli errori spiegano cosa fare all'utente.
Unità e formati: date in locale utente, interfaccia ISO quando immettete, valuta con codice (EUR, USD).
Non usare metafore «d'azzardo» nei messaggi alimentari.

11) Esempi di token (JSON e 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) Componenti e stati (esempi UI)

Il pulsante Primary è lo sfondo primary-600, il testo # FFF, hover primary-700, disabled 40% alfa.
Badge: success/warning/critical con testo leggibile e icone.
Scheda: sfondo BG Base, ombra sm, raggio md, heder 16 px, corpo 16-24 px.

13) Animazione e movimento

Transizioni 120-200 ms, curva ease-in-out.
Le animazioni sono solo 'transfer'/' opacity'.
Per gli stati critici, nessuna animazione (non distrazione).

14) Social, presentazioni, e-mail

Avatar/icone: segno sulla piastra primary-600, indentazione 12-16 px.
Diapositive: sfondo chiaro/scuro, griglia 8px, H1 40-48, contenuto 18-24.
E-mail: modello HTML 600-720 px larghezza, caratteri di sistema/Inter, pulsanti ≥ 44 px altezza, tema scuro preso in considerazione.

15) Stampa, merch e esterno

Il profilo di colore CMYK, gli equivalenti Pantone corrispondono alla tipografia.
Dimensioni minime del logo e raggio di conservazione.
Carta è matta, evitare i vernicioni che urlano; il tessuto è valido per il segno.

16) Etichette legali e gioco responsabile

Con il segno ®/ se necessario (yurd. paese).
Display e vincoli di età - nella zona inferiore dei layout leggibilità AA.
Non utilizzare l'identica nei contenuti che incoraggiano il comportamento eccessivo.

17) Localizzazione e RTL

Il segno/vocabolo del logo non si traduce.
Blocchi di testo - in risorse supporto RTL (mirroring frecce/icone).
Le lunghezze delle righe in tedesco/turco/arabo devono essere considerate nei layout.

18) Do / Don’t

• Mantenere il contrasto, le zone di protezione, la gerarchia dei caratteri, la griglia 8px.
• Verificare la visibilità in foto/video; Usa la piastra.
• Seguite i token, niente fiori casuali.

• Allunga/taglia il logo, applica le ombre/tracce «per la bellezza».
• Usa le immagini d'azzardo come sfondo nei prodotti.
• Mescola i caratteri non standard, rompe il contrasto o rimuove il trucco.

19) Assetti, Neuring e versioni

Nayming: '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/`.
Formati: SVG per loghi/icone; PNG/WebP per le lastre; PDF da stampare.
Versioning: SemVer per un pacchetto di token/icone; chainjog con'added/changed/deprecated/removed '.
L'origine della verità è un repository di token per l'assemblaggio.

20) Controllo qualità e processo

Brand Review in PR - Verifica dei token e del contrasto.
A/B per immagini controverse di sfondo (leggibilità/conversione).
Linter - Disattiva i colori esterni ai token, controlla il testo alt per le immagini.
Controllo trimestrale: consistenza della tavolozza/tipografia/iconpac.

21) Modelli

Keynote/Slides: titolo, sezione, contenuti, dati/grafici, finale.
Sociale: 1:1 avatar, 16:9 striscioni, storie 9:16.
E-mail saluto, CTA, notifica, digest.
Landing: hero-block, 3 vantaggi, vetrina, CTA, cantina.

22) Assegno-foglio di applicazione

• Logo: opzione corretta, zona di sicurezza, contrasto, dimensione.
• Colori: solo token; Contrasto AA.
• Caratteri: gerarchia, interstringa, dimensioni target.
• Icone: griglia 24 x 24, spessore unico della linea.
• Immagini: argomento valido, leggibilità del testo sopra.
• Tema scuro/chiaro: testato, senza artefatti.
• Localizzazione/RTL: le righe non rompono il layout.
• Etichette legali/Secondable Gaming sono disponibili.

23) Piano di implementazione (3 iterazioni)

• Logo, tavolozza, tipografia, token di base, insieme di icone 24 x 24 (base 40-60), modelli di presentazione e e-mail.

• Tema scuro, componenti UI su token (pulsanti, schede, tabelle), hyde per grafici, social park, endpoint.

• Iconpac esteso, illustrazioni, layout stampato, linter/CI per token, controllo di marca regolare.

24) Mini FAQ

È possibile ridipingere il logo come azione speciale?
Solo in argomenti stagionali approvati e senza violare il contrasto/zona di sicurezza.

Cosa c'è di primario, token o layout?
Token. Il layout deve utilizzare variabili colore/indentazione/tipografia di sistema.

Come si fa in caso di contenzioso?
Aprire RFC nel repository identic, allegare esempi, eseguire Brand Review.

Totale

L'identica Gamble Hub non è un insieme di immagini, ma un sistema: logo, tavolozza, tipografia, iconpac, token e processi di controllo qualità. Seguire le regole di contrasto, disponibilità e consistenza, utilizzare i token e i modelli e il marchio sarà riconoscibile, moderno e unito in tutti i prodotti e canali.