Wizualna tożsamość Gamble Hub

1) Istota marki i zasady

Obraz: Technologiczny, uczciwy, niezawodny, oparty na danych i odpowiedzialny.
Ton: zarezerwowany i kompetentny; bez „hazardu” hiperbole.
Zasady: czytelność> dekoracje, domyślna dostępność, spójność między produktami.

2) Logo: struktura i zastosowanie

2. 1 Opcje

Główny (poziomy): znak + słowo Gamble Hub.
Kompaktowe (znak): dla favicon/avatars.
Pionowe: dla wąskich obszarów.

2. 2 Struktura i strefa bezpieczeństwa

Siatka 8px. Obszar straży = wysokość stolicy G wokół obwodu.
Minimalny rozmiar: 18 mm szerokości; ekran - 120 px.
Nie można zmienić proporcji, skew, dodać efekty/gradienty z zewnątrz palety.

2. 3 Kontekst

Na tle światła - logo koloru.
Na kompleksie/zdjęciu - monochromatyczny (biały/czarny) na płycie 8-12 px rundy.
Na odwróconej ciemności.

3) System kolorów (żetony)

3. 1 Paleta podstawowa

Primary/Indigo 600: '# 2F6BFF'

Pierwszorzędowe 700 Dark/Indigo: '# 1E54F'

Sukces/Zielony 600: '# 2EAE60'

Ostrzeżenie/pomarańcza 600: '# FF9F1A'

Krytyczny/czerwony 600: '# E53935'

FG Primary: '# 11131A'

FG Muted: '# 656D76'

Baza BG: „# FFFFFF”

BG Subtelne: '# F7F8FA'

Odwrotność BG: '# 0E1116'

3. 2 Gradienty (opcjonalnie)

Gradient marki: 'gradient liniowy (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - użyj dawkowanego.

3. 3 Kontrast i stwierdzenia

Przycisk podstawowy: tło '# 2F6BFF', biały tekst, hover '# 1E54F0', wyłączony 40% alfa.
Kontrast tekstu ≥ 4. 5:1 (AA). Dla inwersji - ≥ 3:1 dla dużych.

4) Typografia

Tytuły: Inter/SF Pro/system, zawartość tłuszczu 600-700.
Tekst: Inter 14-16 px, wysokość linii 1. 5.
Kod/mono: JetBrains Mono lub system mono.
Hierarchia: H1 32/40, H2 24/32, H3 20/28, Body 16/24, podpis 12/16.
Nie używaj czcionek dekoracyjnych do interfejsu.

5) Siatka, tiret i promienie

Siatka: 8px; pojemniki o maksymalnej szerokości 1120-1280 px.
Karty: wewnętrzne tiret 16-24 px, międzypartie - 16 px.
Promień: 8/12/16 px; domyślnie 12 px, dla 8 px przycisków.
Тена: '0 1px 2px rgba (0,0,0, .08)' (sm), '0 4px 12px rgba (0,0,0, .10)' (md).

6) Ikonografia i ilustracje

Siatka ikon 24 × 24, linia 1. 75-2px, rundy dopasowane.
Semantyka jest podstawowa, kolor jest drugorzędny (zmiany kolorów nad stanami).
Ilustracje: płaskie, bez symboli „dorywczych” (żetony/karty - tylko w neutralnych materiałach informacyjnych i w umiarkowanych, nie-motywacyjnych kontekstach).

7) Zdjęcia i zdjęcia

Tematy: technologia, dane, bezpieczeństwo, zespół.
Unikaj jackpot/confetti clichés.
Powyżej zdjęcia znajduje się gradient/ciemna płytka dla kontrastu tekstu (co najmniej 60% nieprzezroczystości w ciemnej części).

8) Ciemne i lekkie tematy

Ciemność: tło '# 0E1116', tekst '# E6E8EB', granice '# 2A2F37'.
Akcenty zachowują kontrast (pierwotne rozjaśnia o 8-12%).
Grafika: tło jest 2 kroki lżejsze od tła, siatka jest stłumiona, podpisy kontrastują.

9) Dostępność (A11y)

kontrast AA/AAA; nie można usunąć stylów ostrości.
Alternatywy tekstowe w logo i znaczące obrazy.
Minimalny rozmiar kliknięcia to 40-48 px.
Respect 'prefers-reduced-motion' - redukcja/wyłączenie animacji.

10) Ton i mikro-copywriting

Krótki, dokładnie, bez żargonu.
Błędy wyjaśniają, co zrobić z użytkownikiem.
Jednostki i formaty: daty w lokalizacji użytkownika, w interfejsie - ISO podczas wprowadzania, waluty z kodem (EUR, USD).
Nie używaj metafor „hazardowych” w wiadomościach spożywczych.

11) Przykłady tokenów (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) Komponenty i stany (przykłady UI)

Główny przycisk: podstawowe-600 tło, tekst # FFF, hover primary-700, wyłączony 40% alfa.
Odznaki: sukces/ostrzeżenie/krytyczne z czytelnym tekstem i ikoną.
Karta: BG Base tło, sm cień, md promień, 16 px nagłówek, 16-24 px ciała.

13) Animacja i ruch

Przejścia 120-200 ms, krzywa „łatwość w wyjściu”.
Animacje - tylko „przekształcić ”/„ zmętnienie”.
Dla stanów krytycznych - bez animacji (nie odwracaj uwagi).

14) Media społecznościowe, prezentacje, e-mail

Avatary/ikony: znak na podstawowej-600 die, tiret 12-16 px.
Zjeżdżalnie: jasne/ciemne tło, siatka 8px, H1 40-48, zawartość 18-24.
E-mail: szablon HTML 600-720 px szerokość, czcionki systemowe/Inter, przyciski ≥ 44 px wysokość, ciemny motyw jest brany pod uwagę.

15) Druk, merch i zewnątrz

Profil kolorów CMYK, równoważniki Pantone zgadzają się z drukarnią.
Zachowaj minimalny rozmiar logo i promień.
Papier - matowy, unikaj lakierów „krzyczących”; wytłaczanie jest dopuszczalne dla znaku.

16) Znaki prawne i odpowiedzialna gra

Logo ze znakiem ®/™ w razie potrzeby (urd. kraj).
Zastrzeżenia i ograniczenia wiekowe - w dolnej strefie układów; czytelność AA.
Nie używaj tożsamości w treści, która zachęca do nadmiernego zachowania.

17) Lokalizacja i RTL

Symbol logo/słowo nie jest tłumaczone.
Bloki tekstowe - w zasobach; Obsługa RTL (lusterko strzałek/ikon).
Rozważmy długość linii w języku niemieckim/tureckim/arabskim do układów.

18) Czy/Nie

• Utrzymuj kontrast, strefy ochronne, hierarchię czcionek, siatkę 8px.
• Sprawdź widoczność na zdjęciach/filmach; Użyj śmierci.
• Śledź żetony - brak „losowych” kolorów.

• Rozciągnij/kosz logo, zastosuj cienie/pociągnięcia „dla piękna”.
• Użyj obrazów „hazardu” jako tła w produktach.
• Wymieszać niestandardowe czcionki, złamać kontrast lub usunąć ostrość.

19) Aktywa, nazwy i wersje

Nazwa: '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/'.
Formaty: SVG dla logo/ikon; PNG/WebP dla ekranów; PDF do druku.
Wersioning: SemVer dla tokena/opakowania ikon; changelog z „dodaną/zmienioną/zdepreckowaną/usuniętą”.
Źródło prawdy: → zbuduj repozytorium tokenów dla web/iOS/Android.

20) Kontrola jakości i proces

Przegląd marki w PR: Sprawdzanie żetonów i kontrastu.
A/B dla kontrowersyjnych obrazów tła (czytelność/konwersja).
Linter: zabrania kolorów na zewnątrz żetonów, sprawdzanie alt-tekstu dla obrazów.
Kontrola kwartalna: paleta/typografia/konsystencja pakietu ikon.

21) Szablony

Klawisze/slajdy: tytuł, sekcja, treść, „dane/wykres”, wersja ostateczna.
Media społecznościowe: 1:1 avatar, 16:9 baner, historie 9:16.
E-mail: powitanie, CTA, powiadomienie, trawienie.

Lądowanie: blok bohatera, 3 zalety, prezentacja, CTA, piwnica

22) Lista kontrolna wniosku

• Logo: poprawna opcja, strefa bezpieczeństwa, kontrast, rozmiar.
• Kolory: tylko żetony; Kontrast AA.
• Czcionki: hierarchia, linia po linii, rozmiary docelowe.
• Ikony: siatka 24 × 24, jednolita grubość linii.
• Obrazy: ważne tematy, czytelność tekstu na górze.
• Dark/Light Theme: Zweryfikowany, brak artefaktów.
• Lokalizacja/RTL: Linie nie „łamią” układu.
• Obecne są prawne/odpowiedzialne markupy do gier.

23) Plan realizacji (3 iteracje)

• Logo, paleta, typografia, podstawowe żetony, zestaw ikon 24 × 24 (główne 40-60 szt.) , szablony prezentacji i e-mail.

• Ciemny motyw, elementy interfejsu użytkownika na żetonach (przyciski, karty, tabele), przewodnik dla wykresów, social media pack, strona lądowania.

• Rozszerzony pakiet ikon, ilustracje, drukowane układy, linter/CI dla żetonów, regularne audyty marki.

24) Mini-FAQ

Czy można przemalować logo na specjalne działanie?
Tylko w zatwierdzonych tematach sezonowych i bez naruszenia kontrastu/strefy bezpieczeństwa.

Co to jest podstawowe - żetony lub układ?
Żetony. Układ musi używać zmiennych kolorystycznych/indentacyjnych/typograficznych.

Jak działać w kontrowersyjnych przypadkach?
Otwórz RFC w repozytorium tożsamości, dołączaj przykłady, przeprowadzaj przegląd marki.

Razem

Identyfikacja Hub Gamble to nie „zestaw obrazków”, ale system: logo, paleta, typografia, pakiet ikon, żetony i procesy kontroli jakości. Przestrzegaj zasad kontrastu, dostępności i spójności, używaj żetonów i szablonów - a marka będzie rozpoznawalna, nowoczesna i ujednolicona we wszystkich produktach i kanałach.