ვიზუალური იდენტიფიკაცია 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%, # 2EA60 100%)' - დოზირების გამოყენება.

3. 3 კონტრასტი და მდგომარეობა

Primary ღილაკი: von '# 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'.
აქცენტები ინარჩუნებს კონტრასტს (წინასწარი ანათებს 8-12% -ით).
გრაფიკა: ფონი 2 ნაბიჯით მსუბუქია, ვიდრე ფონი, გარუჯული ქსელი, ხელმოწერები კონტრასტულია.

9) წვდომა (A11y)

კონტრასტის AA/AAA; ფოკუსის სტილი არ უნდა ამოიღოთ.
ტექსტური ალტერნატივები ლოგოსა და მნიშვნელოვან სურათებზე.
დაწკაპუნების მინიმალური ზომაა 40-48 px.
პატივისცემა 'prefers-reduced-motion' - ანიმაციების შემცირება/გამორთვა.

10) ტონი და მიკროკოპირაიტი

მოკლედ, რა თქმა უნდა, ჟარგონის გარეშე.
შეცდომები განმარტავს, თუ რა უნდა გააკეთოს მომხმარებელმა.
ერთეულები და ფორმატები: მომხმარებლის იდაყვის თარიღები, ინტერფეისში - ISO შესვლისას, ვალუტა კოდით (EUR, აშშ დოლარი).
არ გამოიყენოთ „აზარტული“ მეტაფორები სასურსათო შეტყობინებებში.

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, heder 16 px, სხეული 16-24 px.

13) ანიმაცია და მოძრაობა

გადასვლები 120-200 ms, მრუდი 'ease-out'.
ანიმაციები - მხოლოდ „ტრანსფორმირება “/„ კომუნიკაცია“.
კრიტიკული სახელმწიფოებისთვის - ანიმაციის გარეშე (არ განადგურდეს).

14) სოციალური მედია, პრეზენტაციები, ელექტრონული ფოსტა

ავატარები/ხატები: ნიშანი primary-600 land- ზე, უკან დახევა 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'.
ჭეშმარიტების წყარო: ტოქსინების საცავი - შეკრება ვებ/iOS/Android.

20) ხარისხის კონტროლი და პროცესი

ბრენდის მიმოხილვა PR- ში: ნიშნების და კონტრასტის შემოწმება.
A/B საკამათო ფონის სურათებისთვის (კითხვა/კონვერტაცია).
ლინტერი: ტოქსინების მიღმა ყვავილების აკრძალვა, სურათების ალტ ტექსტის შემოწმება.
კვარტალური აუდიტი: პალიტრის/სტამბის/იკონპაკის თანმიმდევრულობა.

21) შაბლონები

Keynote/Slides: სათაური, განყოფილება, შინაარსი, „მონაცემები/გრაფიკი“, ფინალი.
სოციალური მედია: 1:1 ავატარი, 16:9 ბანერი, ისტორია 9:16.
ელ.ფოსტა: მისალმება, CTA, შეტყობინება, დაიჯესტი.
ლენდინგი: ჰერო ბლოკი, 3 უპირატესობა, ვიტრინა, CTA, სარდაფი.

22) ჩეკის სია

• ლოგო: სწორი ვარიანტი, დაცვის ზონა, კონტრასტი, ზომა.
• ფერები: მხოლოდ ნიშნები; კონტრასტის AA.
• შრიფტები: იერარქია, შუალედური, ტარგეტების ზომა.
• ხატები: ქსელი 24 × 24, ხაზის ერთი სისქე.
• სურათები: დასაშვები თემები, ტექსტის კითხვა ზემოთ.
• მუქი/ნათელი თემა: შემოწმებულია, არტეფაქტების გარეშე.
• ლოკალიზაცია/RTL: ხაზები არ „არღვევს“ განლაგებას.
• იურიდიული/სარეზერვო ნიშანი არის წარმოდგენილი.

23) განხორციელების გეგმა (3 გამეორება)

• ლოგოები, პალიტრა, სტამბა, ძირითადი ნიშნები, ხატების ნაკრები 24 × 24 (ძირითადი 40-60 ცალი), პრეზენტაციის შაბლონები და ელექტრონული ფოსტა.

• მუქი თემა, UI კომპონენტები ტოკენებზე (ღილაკები, ბარათები, ცხრილები), ჰაიდი გრაფიკებისთვის, სოციალური მედია-პაკეტი, ლანდშაფტის შაბლონი.

• გაფართოებული იკონპაკი, ილუსტრაციები, ბეჭდური მოდელები, ლინტერი/CI ტოქსინებისთვის, რეგულარული ბრენდის აუდიტი.

24) მინი-FAQ

შესაძლებელია ლოგოს გადაკეთება სპეციალური კამპანიისთვის?
მხოლოდ დამტკიცებულ სეზონური თემებში და კონტრასტის/უსაფრთხოების ზონის დარღვევის გარეშე.

რა არის პირველადი - ნიშნები ან განლაგება?
ნიშნები. განლაგება ვალდებულია გამოიყენოს სისტემის ცვლადი ფერები/განთავისუფლება/ტიპოგრაფია.

როგორ მოვიქცეთ სადავო სიტუაციებში?
გახსენით RFC აიდენტიკის საცავში, დაურთეთ მაგალითები, ჩაატარეთ ბრენდის მიმოხილვა.

შედეგი

აიდენტიკა Gamble Hub არ არის „სურათების ნაკრები“, არამედ სისტემა: ლოგო, პალიტრა, სტამბა, იკონპაკი, ნიშნები და ხარისხის კონტროლის პროცესები. დაიცავით კონტრასტის, ხელმისაწვდომობისა და თანმიმდევრულობის წესები, გამოიყენეთ ნიშნები და შაბლონები - და ბრენდი იქნება ცნობადი, თანამედროვე და ერთიანი ყველა პროდუქტსა და არხში.