Gamble Hub Visual Identics

1) бренд маңызы жана принциптери

Image: технологиялык, чынчыл, ишенимдүү, маалымат жана жоопкерчилик багытталган.
Тон: токтоо жана компетенттүү; "кумар" гипербола жок.
Принциптер: окулуучулук> жасалгалар, демейки жеткиликтүүлүк, буюмдардын ортосундагы консистенттүүлүк.

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% alfa.
Тексттин карама-каршылыгы ≥ 4. 5:1 (AA). Инверсия үчүн - ≥ 3:1 үчүн чоң.

4) Типография

Аттары: Inter/SF Pro/системалуу, майлуулугу 600-700.
Текст: Inter 14-16 px, line-height 1. 5.
Code/Mono: JetBrains Mono же системалык 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; фокус-стилдерди алып салбайт.
Логотип жана маанилүү сүрөттөр үчүн тексттик альтернативалар.
Click минималдуу өлчөмү - 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-мисалдар)

Негизги баскычы: негизги-600, текст #FFF, негизги-700 hover, disabled 40% alfa.
Бейдждер: success/warning/critical окуу текст жана сөлөкөт менен.
Карта: фон BG Base, көлөкө sm, радиус md, хедер 16 px, дене 16-24 px.

13) Анимация жана кыймыл

Өтүү 120-200 мс, ийри 'ease-in-out'.
Анимациялар - 'transform '/' opacity' гана.
Оор абалдар үчүн - анимациясыз (алаксытпаңыз).

14) Социалдык медиа, презентациялар, e-mail

Аватарлар/иконалар: негизги-600 белги, 12-16 px чегинүүлөр.
Слайддар: фон жарык/караңгы, 8px тор, H1 40-48, мазмун 18-24.
E-mail: HTML шаблон 600-720 px туурасы, системалык/Inter ариптери, 44 px бийиктиги ≥ баскычтары, караңгы тема эске алынат.

15) Басып чыгаруу, соода жана тышкы

CMYK Color Profile, Pantone-барабар басып чыгаруу менен шайкеш келет.
Минималдуу логотип өлчөмдөрү жана радиустары сактоо.
Кагаз - булгаары, "кыйкырык" лактардан качуу; тамга белгиси үчүн жол берилет.

16) Юридикалык белгилер жана жоопкерчиликтүү оюн

Керек болсо ®/™ белгиси бар логотип (юридикалык. өлкө).
Дисклеймерлер жана курактык чектөөлөр - макеттердин төмөнкү зонасында; AA окууга жөндөмдүүлүгү.
Ашыкча жүрүм-турумга үндөгөн контенттерде айдентиканы колдонбоңуз.

17) Локализация жана RTL

логотип белгиси/сөз айкашы которулган эмес.
Тексттик блоктор - ресурстарда; колдоо RTL (күзгү жебе/сөлөкөт).
Немис/түрк/араб тилдериндеги саптардын узундугу макеттерде эске алынат.

18) Do / Don’t

• Контрастты, коргоо зоналарын, шрифт иерархиясын, 8px торчосун сактаңыз.
• Сүрөт/видеодо көрүнгөндүгүн текшерүү; плашканы колдонуңуз.
• Токендерди ээрчип - эч кандай "кокустук" түстөр.

• Логотип сунуп/чаап, "сулуулук үчүн" көлөкө/контурларды колдонуу.
• азыктарынын алкагында катары "кумар" сүрөттөрдү колдонуу.
• Өзгөчө ариптерди аралаштыруу, контрастты бузуу же фокусту алып салуу.

19) Assets, Нейминг жана нускасы

Neuming: '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 in PR: Токендерди жана контрастты текшерүү.
Талаштуу фон сүрөттөрү үчүн A/B (окулуучулук/конверсия).
Линтер: түстөрдү токендерден тышкары тыюу салуу, сүрөттөр үчүн alt текстти текшерүү.
Чейректик аудит: палитра/типография/иконпак консистенттүүлүгү.

21) Үлгүлөр

Keynote/Slides: титул, бөлүм, мазмун, "маалыматтар/график", акыркы.
Социалдык медиа: 1:1 аватар, 16:9 баннер, 9:16 окуялар.
E-mail: салам, CTA, билдирүү, дайджест.
Lending: херо-блок, 3 артыкчылыктары, витрина, CTA, жер төлө.

22) Колдонуу чек-тизмеси

• Логотип: туура тандоо, коргоо зонасы, карама-каршылык, көлөмү.
• Түстөр: токендер гана; контраст AA.
• Шрифттер: иерархия, саптар аралык, максаттуу өлчөмдөрү.
• иконалар: 24 × 24 тор, бир сызык туурасы.
• Сүрөттөр: алгылыктуу тема, текстти жогору окуу.
• Караңгы/жарык тема: текшерилген, экспонаттар жок.
• Локализация/RTL: саптар макетти "бузбайт".
• Юридикалык/Responsible Gaming белгилер бар.

23) Ишке ашыруу планы (3 итерация)

• Логотип, палитра, типографиялык, негизги токендер, 24 × 24 иконкаларынын топтому (негизги 40-60 даана), презентация шаблондору жана электрондук почта.

• Караңгы тема, UI компоненттери (баскычтар, карталар, таблицалар), графиктер үчүн колдонмо, социалдык медиа-пак, лендинг-шаблон.

• Iconpack Advanced, иллюстрациялар, басма макеттер, токендер үчүн линтер/CI, үзгүлтүксүз бренд аудиттери.

24) Mini-FAQ

Атайын акция үчүн логотипти кайра боёо мүмкүнбү?
Бекитилген сезондук темаларда гана жана контрастты/коргоо зонасын бузбастан.

Биринчи кезекте эмне - токендер же макет?
Токендер. Макет түс/чегинүү/типографиянын системалык өзгөрмөлөрүн колдонууга милдеттүү.

Талаштуу учурларда кантип иш алып баруу керек?
Открой RFC репозиторий айдентика, тиркөө мисалдар, өткөрүү Brand Review.

Жыйынтык

Identica Gamble Hub - бул "сүрөт топтому" эмес, система: логотип, палитра, типографиялык, иконпак, токендер жана сапатты көзөмөлдөө процесстери. Контрасттын, жеткиликтүүлүктүн жана консистенттүүлүктүн эрежелерин сактаңыз, токендерди жана шаблондорду колдонуңуз - жана бренд бардык продуктыларда жана каналдарда таанымал, заманбап жана бирдиктүү болот.