Görsel kimlik Gamble Hub

1) Marka özü ve ilkeleri

Görüntü: Teknolojik, dürüst, güvenilir, veri odaklı ve sorumlu.
Ton: çekingen ve yetkin; "Kumar" abartısı olmadan.
İlkeler: okunabilirlik> süslemeler, varsayılan kullanılabilirlik, ürünler arasında tutarlılık.

2) Logo: yapı ve kullanım

2. 1 Seçenekler

Main (yatay): sign + word Gamble Hub.
Kompakt (işaret): favicon/avatarlar için.
Dikey: dar alanlar için.

2. 2 Yapı ve güvenlik alanı

8px ızgara. Koruma alanı = çevredeki büyük G'nin yüksekliği.
Minimum boyut: 18 mm genişliğinde; Ekran - 120 px.
Paletin dışından oranları değiştiremez, eğriltemez, efektler/degradeler ekleyemezsiniz.

2. 3 Arka plan

Açık bir arka plan üzerinde - renkli bir logo.
Karmaşık/fotoğraf üzerinde - bir plaka üzerinde tek renkli (beyaz/siyah) 8-12 piksel mermi.
Karanlıkta - ters.

3) Renk sistemi (belirteçler)

3. 1 Temel Palet

Birincil/Indigo 600: '# 2F6BFF'

Birincil Karanlık/İndigo 700: '# 1E54F'

Başarı/Yeşil 600: '# 2EAE60'

Uyarı/Turuncu 600: '# FF9F1A'

Kritik/Kırmızı 600: '# E53935'

FG Birincil: '# 11131A'

FG Sessiz: '# 656D76'

BG Base: '# FFFFFF'

BG İnce: '# F7F8FA'

BG Ters: '# 0E1116'

3. 2 Degradeler (isteğe bağlı)

Marka Gradyanı: 'Doğrusal gradyan (135deg, # 2F6BFF 0 %, # 1E54F0 50 %, # 2EAE60 100 %)' - dozlanmış kullanın.

3. 3 Kontrast ve durumlar

Birincil düğme: arka plan '# 2F6BFF', beyaz metin, hover '# 1E54F0', devre dışı 40 % alfa.
Metin kontrastı ≥ 4. 5:1 (AA). Ters çevirme için - ≥ 3:1 büyük için.

4) Tipografi

Başlıklar: Inter/SF Pro/sistem, yağ içeriği 600-700.
Metin: Inter 14-16 piksel, satır yüksekliği 1. 5.
Kod/mono: JetBrains Mono veya sistem mono.
Hiyerarşi: H1 32/40, H2 24/32, H3 20/28, Gövde 16/24, Altyazı 12/16.
Arabirim için dekoratif fontlar kullanmayın.

5) Izgara, girintiler ve yarıçaplar

Izgara: 8px; Maksimum genişliğe sahip kaplar 1120-1280 piksel.
Kartlar: Dahili girintiler 16-24 px, kartlar arası - 16 px.
Yarıçap: 8/12/16 px; Varsayılan 12 px, 8 px düğmeleri için.
Тени: '0 1px 2px rgba (0,0,0, .08)' (sm), '0 4px 12px rgba (0,0,0, .10)' (md).

6) İkonografi ve illüstrasyonlar

Simgelerin ızgarası 24 × 24, satır 1. 75-2px, mermiler eşleşti.
Semantik birincil, renk ikincildir (durumlar üzerinde renk değişiklikleri).
Çizimler: düz, "gündelik" semboller olmadan (cips/kartlar - sadece nötr bilgi materyallerinde ve ılımlı, teşvik edici olmayan bağlamlarda).

7) Resimler ve fotoğraflar

Konular: teknoloji, veri, güvenlik, takım.
Jackpot/konfeti klişelerinden kaçının.
Fotoğrafın üstünde metin kontrastı için bir degrade/koyu plaka (karanlık kısımda en az %60 opaklık) bulunur.

8) Karanlık ve açık temalar

Koyu: arka plan '# 0E1116', metin '# E6E8EB', kenarlıklar '# 2A2F37'.
Aksanlar kontrastı korur (birincil parlaklık %8-12 oranında artar).
Grafikler: arka plan arka plandan 2 adım daha hafiftir, ızgara boğuk, başlıklar kontrastlıdır.

9) Kullanılabilirlik (A11y)

AA/AAA kontrastı; Odak stilleri kaldırılamaz.
Logodaki metin alternatifleri ve önemli görüntüler.
Minimum tıklama boyutu 40-48 piksel.
'Prefers-reduced-motion'a saygı gösterin - animasyonları azaltın/devre dışı bırakın.

10) Ton ve mikro metin yazarlığı

Kısa, kesinlikle, jargon olmadan.
Hatalar kullanıcıya ne yapılması gerektiğini açıklar.
Birimler ve biçimler: Kullanıcı yerelindeki tarihler, arayüzde - girerken ISO, kodu olan para birimleri (EUR, USD).
Market mesajlarında "kumar" metaforlarını kullanmayın.

11) Belirteç örnekleri (JSON ve 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) Bileşenler ve durumlar (UI örnekleri)

Birincil düğme: birincil-600 arka plan, metin # FFF, hover birincil-700, %40 alfa devre dışı.
Rozetler: okunabilir metin ve bir simge ile başarı/uyarı/kritik.
Kart: BG Taban arka plan, sm gölge, md yarıçapı, 16 px başlık, 16-24 px gövde.

13) Animasyon ve hareket

Geçişler 120-200 ms, 'giriş-çıkış' eğrisi.
Animasyonlar - sadece 'transform'/' opacity'.
Kritik durumlar için - animasyonlar olmadan (dikkatini dağıtma).

14) Sosyal medya, sunumlar, e-posta

Avatarlar/simgeler: birincil-600 kalıp üzerinde işaret, girintiler 12-16 px.
Slaytlar: açık/koyu arka plan, 8px ızgara, H1 40-48, içerik 18-24.
E-posta: HTML şablonu 600-720 piksel genişlik, sistem yazı tipleri/Inter, düğmeler ≥ 44 piksel yükseklik, koyu tema dikkate alınır.

15) Baskı, ürün ve dış

CMYK renk profili, Pantone eşdeğerleri baskı evi ile aynı fikirdedir.
Logo ve yarıçapların minimum boyutunu koruyun.
Kağıt - mat, "çığlık" verniklerden kaçının; Kabartma işareti için kabul edilebilir.

16) Yasal İşaretlemeler ve Sorumlu Oyun

Gerekirse ®/™ işaretli logo (urd. Ülke).
Feragatnameler ve yaş kısıtlamaları - düzenlerin alt bölgesinde; okunabilirlik AA.
Aşırı davranışları teşvik eden içeriklerde kimlik kullanmayın.

17) Yerelleştirme ve RTL

Logo sembolü/kelimesi çevrilmez.
Metin blokları - kaynaklarda; RTL desteği (ok/simge yansıtma).
Mizanpajlar için Almanca/Türkçe/Arapça çizgi uzunluklarını göz önünde bulundurun.

18) Yap/Yapma

• Kontrastı koruyun, koruma bölgeleri, yazı tipi hiyerarşisi, 8px ızgara.
• Fotoğraflarda/videolarda görünürlüğü kontrol edin; kalıp kullan.
• Belirteçleri takip edin - "rastgele" renkler yok.

• Logoyu gerin/biçin, "güzellik için" gölgeler/vuruşlar uygulayın.
• "Kumar" görüntülerini ürünlerde arka plan olarak kullanın.
• Standart olmayan fontları karıştırın, kontrastı kırın veya odağı kaldırın.

19) Varlıklar, adlandırma ve sürümler

Adlandırma: 'gh-logo-hz-renk. svg ', gh-logo-vt-mono-beyaz. svg ', gh-icon-24-alert. svg '.
Пакеты:'/brand/logos/','/brand/icons/24/','/brand/templates/','/brand/fonts/'.
Biçimler: Logolar/simgeler için SVG; Ekranlar için PNG/WebP; Yazdırma için PDF.
Sürüm oluşturma: Belirteç/simge paketi için SemVer; 'eklenmiş/değiştirilmiş/kullanımdan kaldırılmış/kaldırılmış'ile changelog.
Gerçeğin kaynağı: Web/iOS/Android için token deposu oluşturun.

20) Kalite kontrol ve süreç

PR'de Marka İncelemesi: Belirteçleri ve kontrastı kontrol etme.
Tartışmalı arka plan görüntüleri için A/B (okunabilirlik/dönüştürme).
Linter: belirteçlerin dışındaki renkleri yasaklama, görüntüler için alt metni denetleme.
Üç aylık denetim: palet/tipografi/simge paketi tutarlılığı.

21) Şablonlar

Keynote/Slaytlar: başlık, bölüm, içerik, "veri/grafik", final.
Sosyal medya: 1:1 avatar, 16:9 afiş, hikayeler 9:16.
E-posta: selamlama, CTA, bildirim, özet.

İniş: kahraman bloğu, 3 avantaj, vitrin, CTA, bodrum

22) Uygulama kontrol listesi

• Logo: doğru seçenek, güvenlik bölgesi, kontrast, boyut.
• Renkler: yalnızca belirteçler; AA kontrastı.
• Yazı tipleri: hiyerarşi, satır satır, hedef boyutları.
• Simgeler: ızgara 24 × 24, düzgün çizgi kalınlığı.
• Görüntüler: geçerli temalar, üstte metin okunabilirliği.
• Karanlık/Işık Teması: Doğrulandı, eser yok.
• Yerelleştirme/RTL: Çizgiler düzeni "bozmaz".
• Yasal/Sorumlu Oyun işaretlemeleri mevcuttur.

23) Uygulama planı (3 yineleme)

• Logolar, palet, tipografi, temel belirteçler, bir dizi simge 24 × 24 (ana 40-60 adet.) , Sunum şablonları ve e-posta.

• Koyu tema, belirteçlerdeki UI bileşenleri (düğmeler, kartlar, tablolar), grafikler için kılavuz, sosyal medya paketi, açılış sayfası.

• Genişletilmiş simge paketi, resimler, basılı düzenler, belirteçler için linter/CI, düzenli marka denetimleri.

24) Mini-SSS

Özel bir eylem için logoyu yeniden boyamak mümkün mü?
Sadece onaylanmış mevsimsel temalarda ve kontrast/güvenlik bölgesi ihlali olmadan.

Birincil nedir - belirteçler veya düzen?
Jetonlar. Düzen, sistem rengi/girinti/tipografi değişkenlerini kullanmalıdır.

Tartışmalı durumlarda nasıl davranılır?
Kimlik deposunda RFC'yi açın, örnekler ekleyin, bir Marka İncelemesi yapın.

Toplam

Gamble Hub kimliği bir "resim kümesi'değil, bir sistemdir: logo, palet, tipografi, simge paketi, belirteçler ve kalite kontrol süreçleri. Kontrast, kullanılabilirlik ve tutarlılık kurallarına uyun, belirteçleri ve şablonları kullanın - marka tüm ürünlerde ve kanallarda tanınabilir, modern ve birleşik olacaktır.