Neon/Accent Stil Gamble Hub

1) Konzept und Prinzipien

Neon/Accent ist eine visuelle Sprache, in der die Hauptoberfläche zurückhaltend bleibt (dark-first) und die Aufmerksamkeit des Benutzers durch kurze Neonblitze gelenkt wird: Akzentkonturen, Leuchten, Statusbeleuchtung und Mikrosignale. Das Ziel: schnelle Aktionserkennung (CTA, Fokus, Benachrichtigung) und hohe Lesbarkeit ohne Überlastung.

1. Der Akzent ist dosiert. 90/10: Bis zu 10% der Bildschirmfläche können „Licht“ haben.

2. Semantik ist wichtiger als die Marke. Neon ist eine Möglichkeit, Bedeutung hervorzuheben und nicht nur „Helligkeit“.

3. Der Kontrast ist primär. Jedes leuchtende Objekt verringert nicht die Lesbarkeit des Textes (Minimum AA).

4. Rhythmus und Pause. Die Animation ist kurz, vorhersehbar, mit Pausen und klarer Physik.

5. Leistung und Verfügbarkeit. Keine schweren Unschärfen/Schatten auf schwachen Geräten; Alle Effekte werden im HC-Modus getestet.

2) Farbe und Licht: Palette und Rollen

2. 1 Grundflächen (dark-first)

'bg/base' - Tiefgraphit mit leichtem Rauschen/Korn (reduziert „Bänder“ auf Gradienten).
'bg/elevated' - etwas leichter für Karten und Modaloks.
'fg/primary' ist fast weiß, aber nicht rein (# FFF → L≈0. 90 in OKLCH), um Blendung zu reduzieren.

2. 2 Akzentneons (OKLCH, Landmarken)

Cyber Blue: `oklch(0. 74 0. 16 250) 'ist der Hauptmarkenakzent.
Electric Purple: `oklch(0. 70 0. 17 310) 'für eine Sequenz oder Spielereignisse sekundär ist.
Toxic Lime: `oklch(0. 82 0. 14 140) 'ist ein seltenes Highlight (Jackpot, Sieg).
Alert Coral: `oklch(0. 72 0. 14 30)'- Warnungen/Fehler (zurückhaltendes „Neon“).

2. 3 Kontrastpaare

Text/Icons zum Hintergrund: ≥ 4. 5:1 (normal), ≥ 3:1 (groß/fett).
Text zur Neonfüllung: ≥ 4. 5:1. Wenn „C“ hoch ist, reduzieren Sie „C _ text“ auf 0. 01–0. 03.
Konturen/Icons-Indikatoren: ≥ 3:1 zur Umgebung.

3) Leuchteffekte (glow) ohne Beeinträchtigung der Lesbarkeit

3. 1 Formen des Leuchtens

Outer Glow (weiche Kontur): 1-2 Unschärfe Ringe, Radius 8-24 px je nach Maßstab.
Neon Stroke: dünne Linie von 1-2 px hoher Helligkeit + weicher äußerer Schatten.
Inset Glow: Die interne „Unterwelt“ für Inputs im Fokus.

3. 2 Begrenzer

Legen Sie niemals kleinen Text über ein intensives Glühen.
Glow ersetzt nicht den Zustand; es ergänzt das Formular/Icon/Unterstrich.
Auf großen Flächen (Banner/Kopf) - Reduzieren Sie die Deckkraft des Leuchtens auf 20-35%.

3. 3 Anpassung an Themen

Im Lichtthema ist Neon schwächer und im Radius kürzer, ansonsten ein „saurer“ Effekt.
In High-Contrast - Leuchten deaktiviert, bleibt eine klare Kontur/Rahmen.

4) Typografie und Hierarchie

Grundlegende Inhalte Kegel: 16-18 px; Überschriften mit klarem Maßstab (z. B. 12-Punkt-Skala).
Beschriftung: Ultra-Licht vermeiden; mindestens Regular/Medium.
Zeilenabstand 1. 45–1. 6.
Der Akzent im Text ist nicht Farbe, sondern Maßstab/Gewicht/Symbol; Farbe - nur als Zusatz.

5) Raster, Rhythmus, Hintergrund

Spalten: 12 (Desktop), 6 (Tablet), 4 (Mobile).
Horizontales Modul 8 px; vertikal - 8/12/16 px je nach Abschnitt.
Hintergrundgradient: Radial schwacher „Halo“ im Bereich des Schlüssel-CTA.
Das taktile Rauschen (grain) ist L = ± 0. 02 - für Tiefe ohne „Plastik“.

6) Komponenten (Muster)

6. 1 Tasten

Primary: Füllung 'brandNeon' + 'on-primary' Text ≥ 4. 5:1, glow Radius 12-16 px auf dem Hover.
Sekundär: transparent mit Neon-Kontur (1-2 px) und weichem äußeren Glanz beim Hover.
Tertiär: Text, kein Glühen, nur Unterstrich/Symbol.

• Hover: − Δ L Hintergrund (0. 02–0. 04) + leichtes Glow.
• Aktiv: dunklere Füllung, entfernt oder reduziert glow.
• Fokus: Kontrastring 2-3 px (keine Unschärfe), nicht nur Farbe.

6. 2 Eingabefelder

Standard: dünner Rahmen neutral 1 px.
Fokus: neon stroke + schwache inset glow innerhalb des Feldes; Platzhalter mit reduziertem Kontrast (aber ≥ 3:1).
Fehler/Erfolg: semantische Farbkontur + Piktogramm; glow minimal.

6. 3 Tabs/Navigation

Aktiver Taba-Indikator - Neon-Linie 2 px + weicher Blur 8 px.
Hovers ist eine leichte Unterblende unter dem Cursor (Schatten verteilt 4-6 px).

6. 4 Karten/Banner

Turnierkarten: Neon-Rahmen in den Ecken (kurze „Ecken“), damit nicht der ganze Rahmen glüht.
Banner - eine abgedunkelte Maske unter dem Text (Overlay 40-60%), damit der Neon-Hintergrund den Inhalt nicht „frisst“.

7) Mikrointeraktionen und Animation

Dauer: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (docks/modalcs).
Kurve: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) 'für die „materielle“ Empfindung.
Neon-Puls: ein Zyklus pro Hover, ohne endloses Blinken.
Systemereignisse (Sieg/Leistung): kurzer Lichtstoß 300-500 ms mit Dämpfung.

8) Verfügbarkeit und hohe Kontrastmodi

Alle Bedeutungen sind ohne Farbe und Glühen zugänglich: Form, Icon, Textlabel, Unterstrich.
Unterstützung für 'prefers-contrast', 'forced-colors'; beim Einschalten - deaktivieren Sie das Glühen, verstärken Sie die Rahmen und Füllungen, überprüfen Sie die Kontraste.
Für Farbenblindheit: Wir vermeiden das Paar „rot-grün“ als einziges Signal; Wir verwenden Piktogramme und Text.

9) Produktivität

Minimieren Sie Box-Shadow mit großem Blur und Filter: blur () auf vielen Elementen.
Bevorzugen Sie Schatten von Pseudo-Elementen und Ebenen-Komponisten (transform/opacity).
Auf Mobilgeräten - „leichte“ Voreinstellung von Animationen; Ausschalten von intensivem Glow bei niedrigem FPS.
Neon-Verläufe - Rendern Sie als Raster-Assets (WebP/AVIF) bei großen Größen.

10) Farben und Stile Token (Beispiel)

json
{
"color": {
"dark": {
"bg": { "base": "oklch(0. 16 0. 01 260)", "elevated": "oklch(0. 22 0. 01 260)" },
"fg": { "primary": "oklch(0. 90 0. 02 260)", "secondary": "oklch(0. 78 0. 02 260)" },
"neon": {
"brand":  { "500": "oklch(0. 74 0. 16 250)" },
"purple": { "500": "oklch(0. 70 0. 17 310)" },
"lime":  { "500": "oklch(0. 82 0. 14 140)" },
"coral":  { "500": "oklch(0. 72 0. 14 30)" }
}
}
},
"elevation": {
"glow": {
"sm": { "blur": 8, "spread": 2, "alpha": 0. 35 },
"md": { "blur": 12, "spread": 4, "alpha": 0. 30 },
"lg": { "blur": 20, "spread": 6, "alpha": 0. 25 }
}
}
}

CSS-Presets (Fragmente)

css
:root[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--fg-primary: oklch(0. 90 0. 02 260);
--neon-brand: oklch(0. 74 0. 16 250);
--glow-md: 0 0 12px rgba(0, 180, 255, 0. 30), 0 0 4px rgba(0, 180, 255, 0. 45);
}

.button--primary {
color: var(--on-primary);
background: var(--neon-brand);
box-shadow: none;
}
.button--primary:hover {
box-shadow: var(--glow-md);
transform: translateZ (0) ;/compositing/
}
:root[data-high-contrast].button--primary:hover {
box-shadow: none; outline: 2px solid var(--fg-primary);
}

11) Visualisierung der Daten

Seriendiagramme: Die Hauptreihe ist neutral, die hervorgehobene Reihe ist Neon mit erhöhter Dicke und Formmarkierungen.
Punkte/Spalten: ≥ 3:1 zum Hintergrund; Unterschrift: ≥ 4. 5:1.
Das Highlight der ausgewählten Serie ist ein weicher äußerer Glanz (sm), ohne ständiges Flimmern.

12) Inhaltsblöcke und Promo

Text auf Promo-Hintergrund Neons - immer auf Plaque/Overlay (40-60%), streng nach Kontrast.
„Glitch “/Scan-Linien - nur als seltener Akzent, nicht mehr als 2-3 Abschnitte pro Seite.

13) Icons und Illustrationen

Die Icons sind linear/duoton mit Neonstrich für aktive Zustände.
Illustrationen - „Neon entlang der Kontur“ mit minimaler Füllung; Vermeiden Sie kleine Lichter um den Text.

14) Marketing vs Produkt

Marketing-Banner können höhere Chrom 'C' und komplexe Leuchten verwenden.
Im Produkt (Formen, Tabellen, Balance) - reduziertes „C“, kurze Glow-Effekte und strenger Kontrast.

15) Textregeln für iGaming

Verantwortungsvolle Benachrichtigungen (18 +, Limits, KYC/AML, Risiken) - AAA im Kontrast, kein Glow.
In Koeffiziententabellen/Leaderboards - Wachstum/Rückgang nicht nur mit Farbe, sondern mit Pfeilen/Piktogrammen und Fettheit.

16) Lokalisierung und Anpassung

Kyrillisch/Lateinisch: Gleiche Metriken für Kegel und Buchstabenabstände.
Zweizeilige CTAs - Wir deaktivieren das Glow am Text, lassen es am Strich/Hintergrund.
RTL - spiegeln nur gerichtete Effekte (Ecken/Highlights).

17) Checkliste Revue (Gestaltung/Entwicklung)

Kontrast

• Text ≥ 4. 5:1; großes ≥ 3:1; Systembenachrichtigungen - AAA.

Glow

• Glow überschneidet sich nicht mit Text; Radius und Alpha innerhalb der Presets.

Zustände

• Hover/Active/Focus sind in Form und nicht nur in Farbe/Licht erkennbar.

Produktivität

• Ohne mehrere schwere blur; Es gibt ein „leichtes“ Preset für mobile Geräte.

Fassbarkeit

• Der High-Contrast-Modus ist korrekt (glow off, frames on).

Semantik

• Neon reflektiert die Bedeutung (Aktion/Fokus/Status) und nicht „für die Schönheit“.

18) Anti-Muster

Kontinuierliche Neonfüllungen großer Flächen → Augenermüdung.
Ständiges Flimmern/Pulsieren → Irritationen und Verfügbarkeitsprobleme.
Text über hellem Glow ohne Unterlage.
Das einzige Signal ist Farbe/Glühen (keine Form/Icon/Unterstrich).
Unkoordinierte Intensität glow in einem Bildschirm (visueller „Brei“).

19) A/B und Metriken

Testen Sie die Intensität von Glow (Alpha/Radius) auf CTR CTA-Tasten und Eingabefehler.
Nachverfolgung von Time-to-Action und Formularfehlern nach Eingabe des Neon-Fokus.
UX-Umfragen zum Sehkomfort (insbesondere in langen Sitzungen).

20) Dokumentation im Konstruktionssystem

Seite „Neon/Accent“: Paletten (Produkt/Marketing), Glow-Token, Beispielkomponenten, Video-Demo von Mikrointeraktionen.
„Kontrastmatrix“: die tatsächlichen Koeffizienten für 'fg × bg' und 'on-'.
Eine Reihe von Preset-Klassen und Snippets für das Frontend.

Kurze Zusammenfassung

Neon/Accent für Gamble Hub - Punkt, semantisch, produktiv. Licht lenkt den Blick zum Handeln, ohne Kontrast und Komfort zu stören. Engine - Token (OKLCH), „leichte“ Glow-Presets, strenge Zustände, abschaltbare Effekte im High-Contrast. Dies verleiht der Marke einen lebendigen Charakter, bleibt aber ein bequemes und schnelles Produkt.