Identitate vizuală Gamble Hub

1) Esența și principiile mărcii

Imagine: Tehnologică, onestă, fiabilă, bazată pe date și responsabilă.
Ton: rezervat și competent; fără „jocuri de noroc” hiperbolă.
Principii: lizibilitate> decoratiuni, disponibilitate implicita, coerenta intre produse.

2) Logo: structură și utilizare

2. 1 Opțiuni

Principal (orizontal): semn + cuvânt Gamble Hub.
Compact (semn): pentru favicon/avatare.
Vertical: pentru zone înguste.

2. 2 Structura și zona de securitate

8px grilă. Zona de pază = înălțimea capitalei G în jurul perimetrului.
Dimensiune minimă: 18 mm lățime; ecran - 120 px.
Nu puteți schimba proporțiile, înclinați, adăugați efecte/degradeuri din afara paletei.

2. 3 Context

Pe un fundal luminos - un logo color.
Pe complex/fotografie - monocrom (alb/negru) pe o placă de 8-12 runde px.
Pe întuneric - inversat.

3) Sistem de culori (jetoane)

3. 1 Paletă de bază

Primar/Indigo 600: '# 2F6BFF'

Întuneric primar/Indigo 700: '# 1E54F0'

Succes/Verde 600: '# 2EAE60'

Avertizare/Orange 600: '# FF9F1A'

Critic/roșu 600: '# E53935'

FG primar: '# 11131A'

FG Muted: '# 656D76'

BG Base: '# FFFFF'

BG Subtile: '# F7F8FA'

BG Inverse: '# 0E1116'

3. 2 Gradienţi (opţional)

Brand Gradient: 'liniar-gradient (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - doza de utilizare.

3. 3 Contrast și stări

Buton primar: fundal '# 2F6BFF', text alb, hover '# 1E54F0', dezactivat 40% alfa.
Contrast text ≥ 4. 5:1 (AA). Pentru inversiune - ≥ 3:1 pentru mari.

4) Tipografie

Titluri: Inter/SF Pro/sistem, conținut de grăsime 600-700.
Text: Inter 14-16 px, inaltime linie 1. 5.
Cod/mono: JetBrains Mono sau mono sistem.
Ierarhie: H1 32/40, H2 24/32, H3 20/28, Corp 16/24, Legendă 12/16.
Nu utilizați fonturi decorative pentru interfața.

5) Grilă, liniuțe și raze

Grilă: 8px; containere cu lățime maximă 1120-1280 px.
Carduri: liniuțe interne 16-24 px, inter-carduri - 16 px.
Radii: 8/12/16 px; implicit 12 px, pentru 8 butoane px.
Тени: '0 1px 2px rgba (0,0,0, .08)' (sm), '0 4px 12px rgba (0,0,0, .10)' (md).

6) Iconografie și ilustrații

Grila de icoane 24 × 24, linia 1. 75-2px, runde potrivite.
Semantica este primară, culoarea este secundară (modificările de culoare peste stări).
Ilustrații: plat, fără simboluri „casual” (jetoane/cărți - numai în materiale informative neutre și în contexte moderate, non-stimulative).

7) Imagini și fotografii

Subiecte: tehnologie, date, securitate, echipa.
Evitați clișeele jackpot/confetti.
Deasupra fotografiei este un degrade/placă întunecată pentru contrastul textului (cel puțin 60% opacitate în partea întunecată).

8) Teme întunecate și ușoare

Întuneric: fundal '# 0E1116', text '# E6E8EB', frontiere '# 2A2F37'.
Accentele păstrează contrastul (luminează primar cu 8-12%).
Grafică: fundalul este cu 2 pași mai ușor decât fundalul, grila este înăbușită, subtitrările contrastează.

9) Disponibilitate (A11y)

Contrast AA/AAA; stilurile de focalizare nu pot fi eliminate.
Alternative de text la logo-ul și imagini semnificative.
Dimensiunea minimă a clicului este de 40-48 px.
Respect 'prefers-redused-motion' - reduceți/dezactivați animațiile.

10) Ton și micro-copywriting

Scurt, exact, fără jargon.
Erorile explică ce să facă utilizatorului.
Unități și formate: date în locația utilizatorului, în interfața - ISO la intrare, valute cu un cod (EUR, USD).
Nu utilizați metafore „jocuri de noroc” în mesajele alimentare.

11) Exemple de simboluri (JSON și 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) Componente și stări (exemple UI)

Buton primar: fundal primar-600, text # FFF, hover primar-700, dezactivat 40% alfa.
Insigne: succes/avertizare/critică cu text lizibil și o pictogramă.
Card: fundal BG Base, umbra sm, raza md, antet 16 px, corp 16-24 px.

13) Animație și mișcare

Tranziții 120-200 ms, curba „ușurință în ieșire”.
Animații - numai „transformă ”/„ opacitate”.
Pentru stările critice - fără animații (nu distrage atenția).

14) Social media, prezentări, e-mail

Avatare/icoane: semn pe primar-600 mor, liniuțe 12-16 px.
Diapozitive: fundal deschis/întunecat, grilă 8px, H1 40-48, conținut 18-24.
E-mail: șablon HTML 600-720 px lățime, fonturi de sistem/Inter, butoane ≥ 44 px înălțime, temă întunecată este luată în considerare.

15) Imprimare, merch și exterior

Profilul de culoare CMYK, echivalentele Pantone sunt de acord cu tipografia.
Păstrați dimensiunea minimă a logo-ului și a razelor.
Hârtie - mată, evitați lacurile „țipătoare”; relief este acceptabil pentru marca.

16) Marcaje legale și joc responsabil

Logo-ul cu semnul ®/™, dacă este necesar (urd. țară).
Declinări și restricții de vârstă - în zona inferioară a machetelor; readability AA.
Nu folosiți identitatea în conținut care încurajează comportamentul excesiv.

17) Localizare și RTL

Logo simbol/cuvânt nu este tradus.
Blocuri de text - în resurse; Suport RTL (oglindire săgeată/pictogramă).
Luați în considerare lungimile de linie în germană/turcă/arabă pentru machete.

18) Do/Don' t

• Mențineți contrastul, zonele de pază, ierarhia fontului, grila 8px.
• Verificați vizibilitatea în fotografii/videoclipuri; utilizați un mor.
• Urmăriți jetoanele - fără culori „aleatorii”.

• Întindeți/cosiți logo-ul, aplicați umbre/contururi „pentru frumusețe”.
• Utilizați imaginile „jocuri de noroc” ca fundal în produse.
• Amestecați fonturile non-standard, rupeți contrastul sau eliminați focalizarea.

19) Active, denumire și versiuni

Denumire: 'gh-logo-hz-color. svg ',' gh-logo-vt-mono-alb. svg ',' gh-icon-24-alertă. svg '.
Пакеты: '/brand/logos/', '/brand/icons/24/', '/brand/templates/', '/brand/fonts/'.
Formate: SVG pentru logo-uri/pictograme; PNG/WebP pentru ecrane; PDF pentru imprimare.
Versioning: SemVer pentru token/icon pack; changelog cu 'adăugat/schimbat/depreciat/eliminat'.
Sursa adevărului: → construi token depozit pentru web/iOS/Android.

20) Controlul calității și procesul

Brand Review în PR: Verificarea jetoanelor și contrastul.
A/B pentru imagini de fundal controversate (lizibilitate/conversie).
Linter: interzicerea culorilor în afara jetoanelor, verificarea alt-text pentru imagini.
Audit trimestrial: consistența paletei/tipografiei/pachetului de pictograme.

21) Șabloane

Keynote/Slides: titlu, secțiune, conținut, „date/diagramă”, final.
Social media: 1:1 avatar, 16:9 banner, povești 9:16.
E-mail: salut, CTA, notificare, digest.

Aterizare: bloc erou, 3 avantaje, vitrină, CTA, subsol

22) Lista de verificare a aplicației

• Logo: opțiune corectă, zonă de securitate, contrast, dimensiune.
• Culori: numai jetoane; AA contrast.
• Fonturi: ierarhie, linie cu linie, dimensiuni țintă.
• Icoane: grilă 24 × 24, grosime linie uniformă.
• Imagini: teme valide, lizibilitate text pe partea de sus.
• Dark/Light Theme: Verificat, fără artefacte.
• Localizare/RTL: Liniile nu „sparg” aspectul.
• Sunt prezente marcajele Legal/Responsible Gaming.

23) Planul de implementare (3 iterații)

• Logo-uri, paleta, tipografie, jetoane de bază, un set de icoane 24 × 24 (principalele 40-60 buc.) , Șabloane de prezentare și e-mail.

• Temă întunecată, componente UI pe jetoane (butoane, carduri, tabele), ghid pentru grafice, pachetul social media, pagina de destinație.

• Pachet de pictograme extins, ilustrații, machete imprimate, linter/CI pentru jetoane, audituri de marcă regulate.

24) Mini-Întrebări frecvente

Este posibil să revopsiți logo-ul pentru o acțiune specială?
Numai în temele sezoniere aprobate și fără încălcarea zonei de contrast/securitate.

Ce este primar - jetoane sau aspect?
Jetoane. Aspectul trebuie să utilizeze variabile de culoare/indentare/tipografie de sistem.

Cum să acționați în cazuri controversate?
Deschideți RFC în depozitul de identitate, atașați exemple, efectuați o revizuire a mărcii.

Total

Identitatea Gamble Hub nu este un „set de imagini”, ci un sistem: logo, paletă, tipografie, pachet de pictograme, token-uri și procese de control al calității. Respectați regulile de contrast, disponibilitate și consecvență, utilizați jetoane și șabloane - iar marca va fi recunoscută, modernă și unificată în toate produsele și canalele.