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 Қарама-қарсылық және жай-күй

Бастапқы түймешігі: фон '#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) Тон және микрокопирайтинг

Қысқа, дәл, жаргонсыз.
Қателер пайдаланушыға не істеу керектігін түсіндіреді.
Бірліктер мен форматтар: пайдаланушының жергілікті жеріндегі күндер, интерфейсте - кодты валюта (EUR, USD) енгізу кезінде ISO.
Азық-түлік хабарларында «құмар» метафораларды пайдаланбаңыз.

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: ені 600-720 px HTML үлгісі, жүйелік/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) Сапаны бақылау және процесс

PR Brand Review: токендер мен контрасты тексеру.
Даулы фондық бейнелер үшін 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 айдентикасы - бұл «суреттер жиынтығы» емес, жүйе: логотип, палитра, типография, иконпак, токендер және сапаны бақылау процестері. Контраст, қол жетімділік және тұрақтылық ережелерін ұстаныңыз, белгілер мен үлгілерді пайдаланыңыз - және бренд барлық өнімдер мен арналарда танымал, заманауи және бірыңғай болады.