Visuelle Identität Gamble Hub

1) Die Essenz der Marke und die Prinzipien

Image: technologisch fortschrittlich, ehrlich, zuverlässig, daten- und verantwortungsorientiert.
Ton: diskret und kompetent; ohne „Glücksspiel“ -Hyperbel.
Prinzipien: Lesbarkeit> Dekoration, Standardverfügbarkeit, Konsistenz zwischen den Produkten.

2) Logo: Aufbau und Verwendung

2. 1 Optionen

Main (horizontal): Zeichen + Wort Gamble Hub.
Kompakt (Zeichen): für Favicon/Avatare.
Vertikal: für schmale Bereiche.

2. 2 Aufbau und Schutzbereich

Raster 8px. Schutzzone = Höhe des großen G entlang des Umfangs.
Mindestgröße: Druck - 18 mm Breite; Bildschirm - 120 px.
Sie können die Proportionen nicht ändern, kippen, Effekte/Verläufe nicht aus der Palette hinzufügen.

2. 3 Im Hintergrund

Auf dem hellen Hintergrund ist ein farbiges Logo.
Auf Komplex/Foto - Monochrom (weiß/schwarz) auf der Platte 8-12 px Rundungen.
Auf dunkel - invertiert.

3) Farbsystem (Token)

3. 1 Basispalette

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 Gradienten (optional)

Brand Gradient: 'linear-gradient (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - dosiert verwenden.

3. 3 Kontrast und Zustände

Primärer Button: Hintergrund'# 2F6BFF', Text weiß, hover'# 1E54F0', disabled 40% alpha.
Textkontrast ≥ 4. 5:1 (AA). Für die Umkehrung - ≥ 3:1 für groß.

4) Typografie

Überschriften: Inter/SF Pro/systemisch, Fettgehalt 600-700.
Text: Inter 14-16 px, Linie-Höhe 1. 5.
Code/Mono: JetBrains Mono oder System Mono.
Hierarchie: H1 32/40, H2 24/32, H3 20/28, Körper 16/24, Bildunterschrift 12/16.
Verwenden Sie keine dekorativen Schriftarten für die Benutzeroberfläche.

5) Raster, Einzüge und Radien

Gitter: 8px; Behälter mit max-width 1120-1280 px.
Karten: interne Einrückungen 16-24 px, Intercards - 16 px.
Radien: 8/12/16 px; Standard 12 px, für Tasten 8 px.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Ikonographie und Illustrationen

Raster der Symbole 24 × 24, Linie 1. 75-2px, Rundungen vereinbart.
Semantik ist primär, Farbe ist sekundär (Farbe ändert sich durch Zustände).
Illustrationen: flach, ohne „lässige“ Symbolik (Chips/Karten - nur in neutralen Infomaterialien und in moderaten, nicht fördernden Kontexten).

7) Bilder und Fotos

Themen: Technik, Daten, Sicherheit, Team.
Vermeiden Sie das Klischee „Jackpots/Konfetti“.
Über dem Foto befindet sich ein Farbverlauf/dunkler Stempel für den Kontrast des Textes (mindestens 60% Deckkraft im dunklen Teil).

8) Dunkle und helle Themen

Dunkel: Hintergrund'# 0E1116', Text'# E6E8EB', Grenzen'# 2A2F37'.
Die Akzente behalten den Kontrast bei (primary hellt sich um 8-12% auf).
Grafiken: Der Hintergrund ist 2 Schritte heller als der Hintergrund, das Raster ist gedämpft, die Beschriftungen sind kontrastreich.

9) Verfügbarkeit (A11y)

Kontrast AA/AAA; Fokusstile lassen sich nicht entfernen.
Textalternativen zu Logo und aussagekräftigen Bildern.
Die minimale Klickgröße beträgt 40-48 px.
Respektieren Sie' prefers-reduced-motion'- Animationen reduzieren/deaktivieren.

10) Ton und Microcopywriting

Kurz, präzise, ohne Jargon.
Fehler erklären, was der Benutzer tun soll.
Einheiten und Formate: Daten in der Locale des Benutzers, in der Benutzeroberfläche - ISO bei der Eingabe, Währungen mit Code (EUR, USD).
Verwenden Sie keine „Glücksspiel“ -Metaphern in der Produktkommunikation.

11) Beispiele für Token (JSON und 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) Komponenten und Zustände (UI-Beispiele)

Primärer Button: Hintergrund primary-600, Text # FFF, hover primary-700, disabled 40% alpha.
Abzeichen: Erfolg/Warnung/kritisch mit lesbarem Text und Icon.
Karte: Hintergrund BG Base, shadow sm, radius md, header 16 px, body 16-24 px.

13) Animation und Bewegung

Übergänge 120-200 ms, Ease-in-out-Kurve.
Animationen sind nur 'transform '/' opacity'.
Für kritische Zustände - keine Animationen (nicht ablenken).

14) Soziale Medien, Präsentationen, E-Mail

Avatare/Icons: Zeichen auf Plakette primary-600, Einzüge 12-16 px.
Folien: Hintergrund hell/dunkel, Raster 8px, H1 40-48, Inhalt 18-24.
E-Mail: HTML-Vorlage 600-720 px breit, System-/Inter-Schriften, Buttons ≥ 44 px hoch, dunkles Thema berücksichtigt.

15) Drucken, Merch und außen

Farbprofil CMYK, Pantone-Äquivalente mit der Druckerei abstimmen.
Minimale Logogrößen und Radien beibehalten.
Papier - matt, vermeiden Sie „schreiende“ Lacke; Prägung ist für das Zeichen zulässig.

16) Rechtliche Hinweise und verantwortungsvolles Spielen

Das Logo mit dem Zeichen ®/™ bei Bedarf (Jurd. Land).
Disclaimer und Altersbeschränkungen - im unteren Bereich der Layouts; Lesbarkeit AA.
Verwenden Sie keine Identitäten in Inhalten, die übermäßiges Verhalten fördern.

17) Lokalisierung und RTL

Das Zeichen/Wortbild des Logos wird nicht übersetzt.
Textblöcke - in Ressourcen; RTL-Unterstützung (Pfeile/Icon-Spiegelung).
Zeilenlängen in Deutsch/Türkisch/Arabisch bei Layouts berücksichtigen.

18) Do / Don’t

• Halten Sie Kontrast, Schutzzonen, Schrifthierarchie, 8px Raster.
• Überprüfen Sie die Sichtbarkeit auf dem Foto/Video; Verwenden Sie einen Stempel.
• Folgen Sie den Token - keine „zufälligen“ Farben.

• Dehnen/mähen Sie das Logo, wenden Sie Schatten/Striche „für die Schönheit“ an.
• Verwenden Sie „Glücksspiel“ Bilder als Hintergrund in Produkten.
• Mischen Sie nicht standardmäßige Schriftarten, brechen Sie den Kontrast oder entfernen Sie den Fokus.

19) Assets, Namensgebung und Versionen

Naming: '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/`.
Formate: SVG für Logos/Icons; PNG/WebP für Bildschirme; PDF zum Ausdrucken.
Versionierung: SemVer für Token/Icon-Paket; Changelog mit 'hinzugefügt/geändert/gelöscht/entfernt'.
Die Quelle der Wahrheit: Ein Repository von Token → Builds für Web/iOS/Android.

20) Qualitätskontrolle und Prozess

Brand Review in PR: Überprüfung von Token und Kontrast.
A/B für umstrittene Hintergrundbilder (Lesbarkeit/Conversion).
Linter: Farben außerhalb von Token verbieten, Alt-Text für Bilder überprüfen.
Vierteljährliches Audit: Konsistenz von Palette/Typografie/Ikonpack.

21) Vorlagen

Keynote/Slides: Titel, Abschnitt, Inhalt, „Daten/Grafik“, Finale.
Social Media: 1:1 Avatar, 16:9 Banner, 9:16 Geschichten.
E-Mail: Begrüßung, CTA, Benachrichtigung, Digest.
Landing: Hero-Block, 3 Vorteile, Schaufenster, CTA, Keller.

22) Antragsliste

• Logo: richtige Option, Sicherheitsbereich, Kontrast, Größe.
• Farben: nur Token; Kontrast AA.
• Schriftarten: Hierarchie, Zeilenabstand, Zielgrößen.
• Icons: Raster 24 × 24, einheitliche Linienstärke.
• Bilder: zulässige Themen, Lesbarkeit des Textes oben.
• Dunkles/helles Thema: getestet, keine Artefakte.
• Lokalisierung/RTL: Strings „brechen“ das Layout nicht.
• Rechtliche/Responsible Gaming Markierungen vorhanden sind.

23) Implementierungsplan (3 Iterationen)

• Logos, Palette, Typografie, Basis-Token, eine Reihe von Symbolen 24 × 24 (die wichtigsten 40-60 Stück), Präsentationsvorlagen und E-Mail.

• Dunkles Thema, UI-Komponenten auf Token (Buttons, Karten, Tabellen), Hyde für Charts, Social Media Pack, Landing Template.

• Iconpack erweitert, Illustrationen, gedruckte Layouts, Linter/CI für Token, regelmäßige Markenaudits.

24) Mini-FAQ

Kann das Logo für die Sonderaktion neu gestrichen werden?
Nur in zugelassenen Saisonthemen und ohne Beeinträchtigung des Kontrastes/Schutzbereichs.

Was ist primär - Token oder Layout?
Token. Das Layout ist verpflichtet, die Systemvariablen Farben/Einzüge/Typografie zu verwenden.

Wie geht man in strittigen Fällen vor?
Öffnen Sie den RFC im Identica-Repository, fügen Sie Beispiele hinzu, führen Sie eine Brand Review durch.

Summe

Aidentica Gamble Hub ist kein „Bilderset“, sondern ein System: Logo, Palette, Typografie, Iconpack, Token und Qualitätskontrollprozesse. Befolgen Sie die Regeln von Kontrast, Verfügbarkeit und Konsistenz, verwenden Sie Token und Vorlagen - und die Marke wird in allen Produkten und Kanälen erkennbar, modern und einheitlich sein.