Farbsystem und Markenpaletten

1) Warum die Farbe formalisieren

• Markenbekanntheit und visuelle Konsistenz,
• Lesbarkeit und Zugänglichkeit (WCAG),
• Skalierung der Schnittstellen (Themen, Plattformen, Locales),
• vorhersehbare A/B-Experimente (Kontrast, CTR, Fehler).

2) Grundlagen des Systems: Modelle und Metriken

OKLCH (empfohlen): Wahrnehmungsgleich, bequeme Kontrolle der Helligkeit 'L' und Sättigung' C' unter Beibehaltung des Farbtons'H'.
Lab/LCH: auch geeignet; OKLCH ist in der Wahrnehmung stabiler.
sRGB: der endgültige Anzeigebereich; Die Endwerte werden immer in sRGB und nach WCAG validiert.
Kontrast (WCAG 2. 2): Basistext ≥ 4. 5:1, groß ≥ 3:1; kritische Benachrichtigungen - Ziel AAA (7:1), wo möglich.

3) Systemschichten: Von der Marke zur Semantik

1. Markenkern: 1-2 Markentöne (+ unterstützender Akzent).
2. Schnittstelle Semantik: Rollen ('primär', 'sekundär', 'Erfolg', 'Warnung', 'Gefahr', 'Info', 'neutral').
3. Tonskalen: Schritte nach Helligkeit (z.B. 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Zustände: 'default/hover/active/focus/disabled'.
6. Kontext: Flächen ('bg/base', 'bg/subtle', 'bg/elevated') und Text ('fg/primary', 'fg/secondary', 'fg/muted').
7. Datenvisualisierung: separate diskrete und kontinuierliche Paletten.

4) Markenkern: Auswahl und Einschränkungen

Wählen Sie den Hauptfarbton (Hue) und definieren Sie die Arbeitshelligkeit für die Marke in hellen und dunklen Themen (oft 'L≈0. 60–0. 70 'zum Füllen der Tasten in Licht und' L≈0. 70–0. 80 'für Text/Icons im Dunkeln).
Begrenzen Sie Chrom 'C': hohe' C' schön auf Bannern, aber brechen Lesbarkeit in UI - halten Sie 2 Versionen: „Marketing“ (gesättigt) und „Produkt“ (zurückhaltender).
Fixieren Sie die Varianten: Hauptstütze ('brand/primary'), Alternativstütze ('brand/alt') und Neutralstütze ('neutral').

5) Tonskalen (Tonskalen)

• Für OKLCH bewegen Sie die' L' -Schritte (z.B. 0. 98→0. 90→0. 80→…→0. 18), a'C 'leicht auf die Kanten der Skala reduzieren, um „Schmutz“ im Hellen und „Trübung“ im Dunklen zu vermeiden.
• Fixieren Sie die Kontrollpunkte: „50/100/300/500 (key )/700/900“.
• Überprüfen Sie bei jedem Schritt den Kontrast des Paares mit dem zugrunde liegenden Hintergrund und der erwarteten Textfarbe.

Beispiel einer Brand/Primary-Skala (OKLCH, angenähert)

brand.primary.50  = oklch(0.98 0.03 230)
brand.primary.100 = oklch(0.94 0.05 230)
brand.primary.300 = oklch(0.86 0.08 230)
brand.primary.500 = oklch(0.74 0.10 230) # ключевой тон brand.primary.700 = oklch(0.56 0.09 230)
brand.primary.900 = oklch(0.32 0.07 230)

6) Semantische Rollen und Mupping

Marke und Semantik trennen: „Erfolg“ muss nicht markengrün sein.

role.primary.bg    -> brand.primary.500 role.primary.text   -> fg.on-primary     # ≥ 4.5:1 к role.primary.bg role.success.bg    -> green.500 role.warning.bg    -> amber.500 role.danger.bg    -> red.500 role.info.bg     -> blue.500 role.neutral.bg    -> gray.200/700 (light/dark)

Die' on- 'Texte werden automatisch berechnet (siehe § 10).

7) Helle/dunkle Themen und Oberflächen

light:
bg/base   = oklch(0.98 0.01 260)
bg/subtle  = oklch(0.96 0.01 260)
bg/elevated = oklch(0.93 0.01 260)
fg/primary  = oklch(0.18 0.03 260) # ≈7:1 к bg/base fg/secondary = oklch(0.32 0.03 260) # ≥4.5:1 border    = oklch(0.80 0.02 260)

dark:
bg/base   = oklch(0.16 0.01 260)
bg/subtle  = oklch(0.20 0.01 260)
bg/elevated = oklch(0.24 0.01 260)
fg/primary  = oklch(0.90 0.02 260)
fg/secondary = oklch(0.78 0.02 260)
border    = oklch(0.34 0.02 260)

Halten Sie gleiche Kontrastziele in beiden Themen; Vermeiden Sie „blendende“ Weiße auf reinem Schwarz - heben Sie den 'L' -Hintergrund auf ~ 0. 16.

8) Zustände und Interaktivität

button/primary:
default.bg = brand.primary.500 hover.bg  = brand.primary.500 with +ΔC(0.01) -ΔL(0.02)
active.bg = brand.primary.700 focus.ring = brand.primary.300 # контраст кольца ≥ 3:1 к окружению disabled.bg= neutral.200 (light) / neutral.700 (dark)
text.on  = auto-contrast(default.bg)    # ≥ 4.5:1

9) Haftung und WCAG

Basistext und Symbole in den Steuerelementen - ≥ 4. 5:1.
Wichtige Systembenachrichtigungen (KYC/AML, 18 +, Zahlungsfehler) - Ziel ist AAA (7:1).
Die Zustände und Grenzen der Felder sind nicht niedriger als 3: 1.
Links unterscheiden sich nicht nur durch die Farbe (Unterstrich/Fokus-Stil).

10) Automatische Anpassung von Kontrasttext ('on-')

1. Durch OKLCH den Vorlag bestimmen. Text'L _ on', so dass'(L_text vs L_bg) ≥ 4. 5:1`.

2. Wenn Chrom hoch ist,'C _ text 'auf 0 reduzieren. 01–0. 03.

3. Für ein dunkles Thema, erhöhen Sie'L _ on 'auf 0 mehr. 02–0. 04 zum Ausgleich der Gleir.

fg.on(colorX) = auto(colorX, targetContrast=4.5)

11) Visualisierung der Daten

Kategorische Paletten: 8-12 Farben, resistent gegen Farbenblindheit (vermeiden Sie „rot-grüne“ Paare ohne alternative Anzeichen).
Kontinuierlich: von 'bg/elevated' zu Akzent mit der Kontrolle des Unterschriftenkontrasts.
Fügen Sie Muster/Marker für farblose Unterscheidbarkeit hinzu.

12) Internationaler Kontext (Kulturvereine)

Berücksichtigen Sie lokale Konnotationen (z. B. Rot - Gefahr/Aufmerksamkeit; Gold - Gewinn/Gewinn).
Für iGaming: Vermeiden Sie „Erfolg/Gefahr“ -Konflikte mit Markenakzenten in einem einzigen Bildschirm; Ikonographie und Signatur sind wichtiger als „Helligkeit“.

13) Integration in das Designsystem

13. 1 Benennung von Token

color.{theme}.{role    surface    brand}.{state    step}
примеры color.light.brand.primary.500 color.dark.role.success.bg color.light.surface.bg.base color.light.fg.on-primary

13. 2 Token (JSON/Style Dictionary)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0.98 0.01 260)"} },
"brand":  { "primary": { "500": "oklch(0.74 0.10 230)" } },
"role":  { "primary": { "bg": "{color.light.brand.primary.500}" },
"danger": { "bg": "oklch(0.62 0.12 25)" } },
"fg": { "primary": "oklch(0.18 0.03 260)",
"on-primary": "auto({color.light.role.primary.bg},4.5)" }
}
}
}

13. 3 CSS-Variablen (Themenebene)

css
:root[data-theme="light"] {
--bg-base: oklch(0.98 0.01 260);
--brand-primary-500: oklch(0.74 0.10 230);
--fg-primary: oklch(0.18 0.03 260);
--on-primary: color-contrast(var(--brand-primary-500)); / автоподбор /
}
[data-theme="dark"] {
--bg-base: oklch(0.16 0.01 260);
--brand-primary-500: oklch(0.74 0.10 230);
--fg-primary: oklch(0.90 0.02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 Figma/Dokumentation

Die Komponenten verwenden nur Token, direkte HEX/SRGB sind von Lintern verboten.
In der Bibliothek - die Seite „Kontrastmatrix“: die Tabelle' fg × bg 'mit den tatsächlichen Koeffizienten.

14) Qualitätskontrollprozesse

Im Design: Kontrasttest auf Artboards (beide Modi), separate Presets für Farbenblindheit.
Im Code: Einheiten-Helfer berechnen den Kontrast und fallen bei Verstößen; visuelle Schnappschüsse für kritische Bildschirme.
In CI/CD: Prüfung aller Tokenpaare und Zustände, Bericht mit Komponente, Betreff und Istwert.

15) Besonderheiten von iGaming

Promo und Turniere: Verwenden Sie das Overlay und die Beschränkung 'C' auf den Hintergründen, damit der Text nicht „sinkt“.
Verantwortungsvolle Benachrichtigungen (Limits, 18 +, Risiken) - aufrichtig AAA.
Metriken/Tabellen: Zahlen und Zeichen der Veränderung (↑/↓) unterscheiden zwischen Form und Kontrast, nicht nur Farbe.

16) Checkliste Umsetzung

• Markentöne und ihre tonalen Skalen (OKLCH) sind definiert.
• Rollen, Zustände und Flächen für die beiden Themen sind festgelegt.
• Autogenerierung von 'on-' mit Zielkontrast.
• Matrix' fg × bg 'und WCAG-Tests in CI.
• Separate Paletten für Datavisen (mit Unterstützung für Farbenblindheit).
• Linter Stile verbieten „rohe“ Farben.
• Seite „Ausnahmen und Gründe“ in der Haydline.

17) Anti-Muster

Mischen Sie den Markenakzent mit „Erfolg/Fehler“ in einem UX-Signal.
Verlassen Sie sich nur auf Sättigung für die Hierarchie.
Nicht synchronisieren Licht/dunkel (Kontrast „links“ in einem der Themen).
Hartes HEX ohne Token → unkontrolliertes Driften der Schnittstelle.

Kurze Zusammenfassung

Erstellen Sie eine Palette von oben nach unten: Markenkern → semantische Rollen → Tonleiter → Themen → Status. Arbeiten Sie in OKLCH, sichern Sie Token, automatisieren Sie' on- 'und WCAG-Prüfungen. Führen Sie die Paletten für die Datavisen separat. Dies führt zu Markenkonsistenz, Lesbarkeit und Skalierbarkeit des Produkts.