Візуальна айдентика Gamble Hub

1) Суть бренду і принципи

Образ: технологічний, чесний, надійний, орієнтований на дані і відповідальність.
Тон: стриманий і компетентний; без «азартної» гіперболи.
Принципи: читаність> прикраси, доступність за замовчуванням, консистентність між продуктами.

2) Логотип: будова та використання

2. 1 Варіанти

Основний (горизонтальний): знак + слово Gamble Hub.
Компактний (знак): для фавікону/аватарів.
Вертикальний: для вузьких майданчиків.

2. 2 Конструкція і зона охорони

Сітка 8px. Зона охорони = висота заголовної G по периметру.
Мінімальний розмір: друк - 18 мм по ширині; екран - 120 px.
Не можна змінювати пропорції, нахиляти, додавати ефекти/градієнти не з панелі.

2. 3 На тлі

На світлому тлі - кольоровий логотип.
На складних/фото - монохром (білий/чорний) на плашці 8-12 px округлення.
На темному - інвертований.

3) Колірна система (токени)

3. 1 Базова палітра

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 Градієнти (за бажанням)

Brand Gradient: 'linear-gradient (135deg, #2F6BFF 0%, #1E54F0 50%, #2EAE60 100%)'- використовувати дозовано.

3. 3 Контраст і стани

Кнопка primary: фон'#2F6BFF', текст білий, hover'#1E54F0', disabled 40% альфа.
Контраст тексту ≥ 4. 5:1 (AA). Для інверсії - ≥ 3:1 для великого.

4) Типографіка

Заголовки: Inter/SF Pro/системні, жирність 600-700.
Текст: Inter 14–16 px, line-height 1. 5.
Код/моно: JetBrains Mono або системний моно.
Ієрархія: H1 32/40, H2 24/32, H3 20/28, Body 16/24, Caption 12/16.
Не використовувати декоративні шрифти для інтерфейсу.

5) Сітка, відступи і радіуси

Сітка: 8px; контейнери з max-width 1120-1280 px.
Картки: внутрішні відступи 16-24 px, міжкарткові - 16 px.
Радіуси: 8/12/16 px; за замовчуванням 12 px, для кнопок 8 px.
Тіні: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Іконографія та ілюстрації

Сітка іконок 24 × 24, лінія 1. 75-2px, округлення узгоджені.
Семантика первинна, колір вторинний (колір змінюється за станами).
Ілюстрації: плоскі, без «казуальної» символіки (фішки/карти - тільки в нейтральних інфо-матеріалах і в помірних, не заохочувальних контекстах).

7) Зображення та фотографії

Теми: технології, дані, безпека, команда.
Уникати кліше «джекпоти/конфетті».
Поверх фото - градієнтна/темна плашка для контрасту тексту (мінімум 60% непрозорість в темній частині).

8) Темна і світла теми

Темна: фон «#0E1116», текст «#E6E8EB», межі «#2A2F37».
Акценти зберігають контраст (primary світлішає на 8-12%).
Графіки: фон на 2 кроки світліше фону, сітка приглушена, підписи контрастні.

9) Доступність (A11y)

Контраст AA/AAA; фокус-стилі не прибирати.
Текстові альтернативи у логотипу і значущих зображень.
Мінімальний розмір кліка - 40-48 px.
Поважати'prefers-reduced-motion'- анімації знижувати/відключати.

10) Тон і мікрокопірайтинг

Коротко, точно, без жаргону.
Помилки пояснюють, що зробити користувачеві.
Одиниці та формати: дати в локалі користувача, в інтерфейсі - ISO при введенні, валюти з кодом (EUR, USD).
Не використовувати «азартні» метафори в продуктових повідомленнях.

11) Приклади токенів (JSON і 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) Компоненти та стани (UI-приклади)

Кнопка Primary: фон primary-600, текст #FFF, hover primary-700, disabled 40% альфа.
Бейджі: success/warning/critical з читаним текстом та іконкою.
Картка: фон BG Base, тінь sm, радіус md, хедер 16 px, тіло 16-24 px.

13) Анімація і рух

Переходи 120-200 мс, крива'ease-in-out'.
Анімації - тільки'transform '/' opacity'.
Для критичних станів - без анімацій (не відволікати).

14) Соцмедіа, презентації, e-mail

Аватари/іконки: знак на плашці primary-600, відступи 12-16 px.
Слайди: фон світлий/темний, сітка 8px, H1 40-48, контент 18-24.
E-mail: HTML-шаблон 600-720 px шириною, шрифти системні/Inter, кнопки ≥ 44 px висотою, темна тема враховується.

15) Друк, мерч і наружка

Колірний профіль CMYK, Pantone-еквіваленти узгодити з друкарнею.
Мінімальні розміри логотипу і радіуси зберігати.
Папір - матовий, уникати «кричущих» лаків; тиснення допустимо для знака.

16) Юридичні позначки та відповідальна гра

Лого зі знаком ®/™ при необхідності (юрд. країна).
Дисклеймери і вікові обмеження - в нижній зоні макетів; Читання AA.
Не використовувати айдентику в контентах, що заохочують надмірну поведінку.

17) Локалізація та RTL

Знак/словообраз логотипу не перекладається.
Текстові блоки - в ресурсах; підтримка RTL (дзеркалювання стрілок/іконок).
Довжини рядків в німецькому/турецькому/арабському враховуйте при макетах.

18) Do / Don’t

• Підтримуйте контраст, зони охорони, шрифтову ієрархію, сітку 8px.
• Перевіряйте видимість на фото/відео; Використовуйте плашку.
• Дотримуйтесь токенів - ніяких «випадкових» квітів.

• Розтягувати/косити логотип, застосовувати тіні/обведення «для краси».
• Використовувати «азартні» зображення як фон у продуктах.
• Змішувати нестандартні шрифти, ламати контраст або прибирати фокус.

19) Асети, неймінг і версії

Неймінг: `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/`.
Формати: SVG для логотипів/іконок; PNG/WebP для растрів; PDF для друку.
Версіонування: SemVer для пакету токенів/іконок; чейнджлог з'added/changed/deprecated/removed'.
Джерело істини: репозиторій токенів → збірки для web/iOS/Android.

20) Контроль якості і процес

Brand Review в PR: перевірка токенів і контрасту.
A/B для спірних фонових зображень (читаність/конверсія).
Лінтер: заборона кольорів поза токенами, перевірка alt-тексту для зображень.
Щоквартальний аудит: консистентність палітри/типографіки/іконпак.

21) Шаблони

Keynote/Slides: титульний, розділ, контент, «дані/графік», фінал.
Соцмедіа: 1:1 аватар, 16:9 банер, історії 9:16.
E-mail: привітання, CTA, повідомлення, дайджест.
Лендінг: херо-блок, 3 переваги, вітрина, CTA, підвал.

22) Чек-лист застосування

• Логотип: вірний варіант, зона охорони, контраст, розмір.
• Кольори: тільки токени; контраст AA.
• Шрифти: ієрархія, міжрядковий, розміри таргетів.
• Іконки: сітка 24 × 24, єдина товщина лінії.
• Зображення: допустима тематика, читаність тексту поверх.
• Темна/світла тема: перевірені, без артефактів.
• Локалізація/RTL: рядки не «ламають» макет.
• Юридичні/Responsible Gaming позначки присутні.

23) План впровадження (3 ітерації)

• Логотипи, палітра, типографіка, базові токени, набір іконок 24 × 24 (основні 40-60 шт.), шаблони презентацій та e-mail.

• Темна тема, UI-компоненти на токенах (кнопки, картки, таблиці), гайд для графіків, соцмедіа-пак, лендінг-шаблон.

• Іконпак розширений, ілюстрації, друковані макети, лінтер/CI для токенів, регулярні бренд-аудити.

24) Міні-FAQ

Чи можна перефарбовувати логотип під спец-акцію?
Тільки в затверджених сезонних темах і без порушення контрасту/зони охорони.

Що первинно - токени або макет?
Токени. Макет зобов'язаний використовувати системні змінні кольорів/відступів/типографіки.

Як діяти у спірних випадках?
Відкрити RFC в репозиторії айдентики, прикласти приклади, провести Brand Review.

Підсумок

Айдентика Gamble Hub - це не «набір картинок», а система: логотип, палітра, типографіка, іконпак, токени та процеси контролю якості. Дотримуйтесь правил контрасту, доступності і консистентності, використовуйте токени і шаблони - і бренд буде впізнаваним, сучасним і єдиним у всіх продуктах і каналах.