هویت بصری گمبل هاب

1) جوهر و اصول نام تجاری

تصویر: تکنولوژیکی، صادقانه، قابل اعتماد، مبتنی بر داده ها و مسئول.
تن: محفوظ و صالح ؛ بدون «قمار» اغراق.
اصول: خوانایی> دکوراسیون، در دسترس بودن پیش فرض، سازگاری بین محصولات.

2) لوگو: ساختار و استفاده

2. 1 گزینه ها

اصلی (افقی): علامت + کلمه قمار توپی.
فشرده (علامت): برای favicon/آواتار.
عمودی: برای مناطق باریک.

2. 2 ساختار و منطقه امنیتی

شبکه 8px منطقه گارد = ارتفاع پایتخت G در اطراف محیط.
حداقل اندازه: عرض 18 میلیمتر ؛ صفحه نمایش - 120 پیکسل.
شما نمی توانید نسبت ها را تغییر دهید، از بین بردن، اضافه کردن اثرات/شیب از خارج از پالت.

2. 3 پس زمینه

در یک پس زمینه نور - یک آرم رنگی.
پیچیده/عکس - تک رنگ (سفید/سیاه و سفید) در یک صفحه 8-12 پیکسل دور.
در تاریکی - وارونه.

3) سیستم رنگ (نشانه)

3. 1 پالت پایه

اولیه/Indigo 600: «#2F6BFF»

اولیه تاریک/Indigo 700: '#1E54F0'

موفقیت/سبز 600: «#2EAE60»

هشدار/نارنجی 600: «#FF9F1A»

بحرانی/قرمز 600: «#E53935»

FG اصلی: «#11131A»

FG خاموش: «#656D76»

پایگاه BG: «#FFFFFF»

BG ظریف: «#F7F8FA»

BG معکوس: «#0E1116»

3. 2 شیب (اختیاری)

گرادیان نام تجاری: «خطی گرادیان (135deg، # 2F6BFF 0٪، # 1E54F0 50٪، # 2EAE60 100٪)» - استفاده از دوز.

3. ۳ تضاد و حالات

دکمه اصلی: پس زمینه «# 2F6BFF»، متن سفید، شناور «# 1E54F0»، غیرفعال 40٪ آلفا.
≥ کنتراست متن 4. 5:1 (AA) برای معکوس - ≥ 3:1 برای بزرگ.

4) تایپوگرافی

عناوین: اینتر/SF نرم افزار/سیستم، محتوای چربی 600-700.
متن: بین 14-16 پیکسل، ارتفاع خط 1. 5.
کد/مونو: JetBrains مونو یا سیستم مونو.
سلسله مراتب: H1 32/40، H2 24/32، H3 20/28، بدن 16/24، عنوان 12/16.
از فونت های تزئینی برای رابط کاربری استفاده نکنید.

5) شبکه، تورفتگی و شعاع

شبکه: 8px ؛ ظروف با حداکثر عرض 1120-1280 پیکسل.
کارت ها: داخلی داخلی 16-24 پیکسل، بین کارت - 16 پیکسل.
شعاع: 8/12/16 پیکسل ؛ به طور پیش فرض 12 پیکسل، برای دکمه های 8 پیکسل.
Тени: '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) تصاویر و عکس ها

موضوعات: تکنولوژی، داده ها، امنیت، تیم.
اجتناب از کلیشه های برنده تمام پولها/confetti.
در بالای عکس یک صفحه شیب/تیره برای کنتراست متن (حداقل 60٪ کدورت در قسمت تاریک) وجود دارد.

8) تم های تاریک و نور

تیره: پس زمینه «# 0E1116»، متن «# E6E8EB»، مرزهای «# 2A2F37».
لهجه ها کنتراست را حفظ می کنند (اولیه 8-12٪ روشن می شود).
گرافیک: پس زمینه 2 مرحله سبک تر از پس زمینه است، شبکه خفه شده است، زیرنویس ها متضاد هستند.

9) در دسترس بودن (A11y)

کنتراست AA/AAA ؛ سبک های تمرکز را نمی توان حذف کرد.
گزینه های متن در لوگو و تصاویر قابل توجه.
حداقل اندازه کلیک 40-48 پیکسل است.
احترام 'prefers کاهش حرکت' - کاهش/غیر فعال کردن انیمیشن.

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، غیر فعال 40٪ آلفا.
مدالها: موفقیت/هشدار/بحرانی با متن قابل خواندن و یک آیکون.
کارت: BG پس زمینه پایه، سایه SM، شعاع MD، هدر 16 پیکسل، بدن 16-24 پیکسل.

13) انیمیشن و حرکت

انتقال 120-200 میلی ثانیه، منحنی «سهولت در خارج».
انیمیشن ها - فقط «تبدیل »/« کدورت».
برای حالات بحرانی - بدون انیمیشن (حواس پرت نکنید).

14) رسانه های اجتماعی، سخنرانی ها، ایمیل

آواتار/آیکون: ثبت نام در قالب اولیه 600، تورفتگی 12-16 پیکسل.
اسلاید: نور پس زمینه/تاریک، شبکه 8px، H1 40-48، محتوای 18-24.
ایمیل: قالب HTML 600-720 پیکسل عرض، فونت سیستم/اینتر، دکمه ها ≥ 44 پیکسل ارتفاع، تم تاریک در نظر گرفته شده است.

15) چاپ، مرچ و بیرونی

مشخصات رنگ CMYK، معادل Pantone با چاپخانه موافق است.
حداقل اندازه لوگو و شعاع را نگه دارید.
کاغذ - مات، اجتناب از «فریاد» varnishes ؛ منبت کاری برای علامت قابل قبول است.

16) نشانه های قانونی و بازی مسئولانه

لوگو با علامت ®/™ در صورت لزوم (urd. کشور).

سلب مسئولیت و محدودیت های سنی - در منطقه پایین تر از طرح بندی ؛ قابلیت خواندن AA

از هویت در محتوایی که رفتار بیش از حد را تشویق می کند استفاده نکنید.

17) محلی سازی و RTL

نماد لوگو/کلمه ترجمه نشده است.
بلوک های متن - در منابع ؛ پشتیبانی از RTL (فلش/آیکون معکوس).
طول خطوط را در آلمانی/ترکی/عربی برای طرح بندی در نظر بگیرید.

18) انجام دهید/انجام ندهید

• حفظ کنتراست، مناطق گارد، سلسله مراتب فونت، شبکه 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 برای بسته نشانه/آیکون ؛ changelog با 'added/changed/deprecated/removed'.
منبع حقیقت: → ساخت مخزن نشانه برای وب/iOS/آندروید.

20) کنترل کیفیت و فرآیند

بررسی برند در روابط عمومی: بررسی نشانه ها و کنتراست.
A/B برای تصاویر پس زمینه بحث برانگیز (خوانایی/تبدیل).
Linter: ممنوعیت رنگ های خارج از نشانه ها، چک کردن متن برای تصاویر.
ممیزی سه ماهه: پالت/تایپوگرافی/آیکون بسته سازگاری.

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) مینی سوالات متداول

آیا امکان رنگ آمیزی مجدد لوگو برای یک اقدام خاص وجود دارد ؟

فقط در تم های فصلی تایید شده و بدون نقض منطقه کنتراست/امنیت.

اولیه - نشانه یا طرح چیست ؟

نشانه ها طرح باید از متغیرهای رنگ/تورفتگی/تایپوگرافی سیستم استفاده کند.

چگونه در موارد بحث برانگیز عمل کنیم ؟

RFC را در مخزن هویت باز کنید، مثالها را پیوست کنید، یک بررسی برند انجام دهید.

مجموع

هویت Gamble Hub یک «مجموعه تصویر» نیست، بلکه یک سیستم است: لوگو، پالت، تایپوگرافی، بسته آیکون، نشانه ها و فرآیندهای کنترل کیفیت. پیروی از قوانین کنتراست، در دسترس بودن و سازگاری، استفاده از نشانه ها و قالب ها - و نام تجاری قابل تشخیص، مدرن و یکپارچه در تمام محصولات و کانال ها خواهد بود.