Визуальная айдентика 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 — это не «набор картинок», а система: логотип, палитра, типографика, иконпак, токены и процессы контроля качества. Следуйте правилам контраста, доступности и консистентности, используйте токены и шаблоны — и бренд будет узнаваемым, современным и единым во всех продуктах и каналах.