Σύστημα χρωμάτων και επώνυμες παλέτες

1) Γιατί να επισημοποιήσετε το χρώμα

• ευαισθητοποίηση σχετικά με το σήμα και οπτική συνοχή,
• αναγνωσιμότητα και διαθεσιμότητα (WCAG),
• διεπαφές κλιμάκωσης (θέματα, πλατφόρμες, τοποθεσίες),
• προβλέψιμα πειράματα Α/Β (αντίθεση, CTR, σφάλματα).

2) Θεμέλια του συστήματος: μοντέλα και μετρήσεις

OKLCH (συνιστάται): αντιληπτικά ομοιόμορφη, είναι βολικό να ελέγχεται η ελαφρότητα ' και κορεσμός' C 'ενώ διατηρείται η σκιά' H '.
Εργαστήριο/LCH: επίσης ταιριάζει. Το OKLCH είναι πιο σταθερό στην αντίληψη.
sRGB: πεπερασμένος χώρος απεικόνισης, τα σύνολα επικυρώνονται πάντοτε σε sRGB και WCAG.
Αντίθεση (WCAG 2. 2): βασικό κείμενο ≥ 4. 5:1, μεγάλες ≥ 3:1· κρίσιμες κοινοποιήσεις - στόχος για AAA (7:1), όπου είναι δυνατόν.

3) Στρώματα του συστήματος: από μάρκα σε σημασιολογία

1. Πυρήνας εμπορικού σήματος: 1-2 επώνυμες αποχρώσεις (+ υποστηρικτική προφορά).
2. Σημασιολογία διεπαφής: ρόλοι ('πρωτογενής', 'δευτερεύουσα', 'επιτυχία', 'προειδοποίηση', 'κίνδυνος', 'πληροφορία', 'ουδέτερη').
3. Κλίμακες τόνων: βήματα ελαφρότητας (π.χ. 25/50/100...900).
4. : 'ligh Темы/' dark' (+ high-contrast, AMOLED).
5. Δηλώνει: «εξ ορισμού/hover/active/focus/displayed».
6. Πλαίσιο: επιφάνειες ('bg/βάση', 'bg/λεπτή', 'bg/υπερυψωμένη') και κείμενο ('fg/πρωτογενής', 'fg/δευτερεύουσα', 'fg/μεταλλαγμένη').
7. Οπτικοποίηση δεδομένων: ξεχωριστές διακριτές και συνεχείς παλέτες.

4) Πυρήνας εμπορικού σήματος: επιλογές και περιορισμοί

Επιλέξτε την απόχρωση και καθορίστε την ελαφρότητα λειτουργίας της μάρκας σε φωτεινά και σκοτεινά θέματα (συχνά 'L≈0. 60–0. 70 'για τη συμπλήρωση κουμπιών στο φως και' L≈0. 70–0. 80 'για κείμενο/εικονίδια στο σκοτάδι).
Οριακό χρώμιο 'C': το υψηλό 'C' είναι όμορφο στα πανό, αλλά σπάει την αναγνωσιμότητα σε UI - διατηρεί 2 εκδόσεις: «μάρκετινγκ» (πλούσιο) και «παντοπωλείο» (πιο περιορισμένο).
Καθορίστε τις μεταβλητές: κύρια («brand/primary»), εναλλακτική («brand/alt») και ουδέτερη υποστήριξη («ουδέτερη»).

5) Κλίμακες τόνων

• Για OKLCH, μετακινήστε το ' steps (π.χ. 0. 98→0. 90→0. 80→…→0. 18), και το 'C' μειώνεται ελαφρώς στα άκρα της κλίμακας για να αποφευχθεί η «βρωμιά» στο φως και η «θολότητα» στο σκοτάδι.
• Ορίστε τα σημεία ελέγχου: '50/100/300/500 (κλειδί )/700/900'.
• Σε κάθε βήμα, ελέγξτε την αντίθεση του ζεύγους με το βασικό φόντο και με το αναμενόμενο χρώμα κειμένου.

Παράδειγμα σήματος/πρωτογενούς κλίμακας (OKLCH, κατά προσέγγιση)

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) Σημασιολογικοί ρόλοι και χαρτογράφηση

Ξεχωριστή μάρκα και σημασιολογία: η «επιτυχία» δεν χρειάζεται να είναι πράσινη.

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)

Τα κείμενα «on-» υπολογίζονται αυτόματα (βλέπε § 10).

7) Ελαφρά/σκοτεινά θέματα και επιφάνειες

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)

Διατήρηση ισότιμων στόχων αντίθεσης και στα δύο θέματα· Αποφύγετε το «τυφλό» λευκό σε καθαρό μαύρο - σηκώστε το ' background σε ~ 0. 16.

8) Κράτη και διαδραστικότητα

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) Ευθύνη και WCAG

Το βασικό κείμενο και τα εικονίδια των ελέγχων είναι ≥ 4. 5:1.
Οι βασικές κοινοποιήσεις συστημάτων (KYC/AML, 18 +, σφάλματα πληρωμών) - στοχεύουν στην AAA (7:1).
Καταστάσεις και όρια πεδίου - τουλάχιστον 3:1.
Διακρίνετε τους συνδέσμους όχι μόνο από το χρώμα (έμφαση/στυλ εστίασης).

10) Κείμενο αντίθεσης αυτόματης τοποθέτησης ('on-')

1. Σύμφωνα με την OKLCH, προσδιορίστε το προθάλαμο. Κείμενο 'L _ on' so that '(L_text vs L_bg) ≥ 4. 5:1`.

2. Αν το χρώμιο είναι υψηλό, κάτω 'C _ text' to 0. 01–0. 03.

3. Για ένα σκοτεινό θέμα, υψώστε το 'L _ on' άλλο ένα 0. 02–0. 04 για να αντισταθμίσει τη λάμψη.

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

11) Οπτικοποίηση δεδομένων

Κατηγορηματικές παλέτες: 8-12 χρώματα ανθεκτικά στην τύφλωση του χρώματος (αποφύγετε τα κόκκινα-πράσινα ζεύγη χωρίς εναλλακτικά σημεία).
Συνεχής: από 'bg/υψωμένη' σε προφορά με αντιπαραβολή ελέγχου των υπογραφών.
Προσθήκη προτύπων/δεικτών για την ευκρίνεια χωρίς χρώμα.

12) Διεθνές πλαίσιο (πολιτιστικές ενώσεις)

Εξέταση τοπικών εννοιών (π.χ. κόκκινο - κίνδυνος/προσοχή· χρυσός - νίκη/βραβείο).
Για iGaming: Αποφυγή συγκρούσεων επιτυχίας/κινδύνου με επώνυμες προφορές σε μία οθόνη. η εικονογραφία και η υπογραφή είναι σημαντικότερες από τη «φωτεινότητα».

13) Ενσωμάτωση στο σύστημα σχεδιασμού

13. Ονομάζοντας μάρκες

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 μάρκες (JSON/λεξικό στυλ)

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 (θεματικό επίπεδο)

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/τεκμηρίωση

Τα εξαρτήματα χρησιμοποιούν μόνο μάρκες, τα απευθείας HEX/SRGB απαγορεύονται από τα χιτώνια.
Στη βιβλιοθήκη - σελίδα «Πίνακας αντίθεσης»: πίνακας 'fg × bg' με πραγματικούς συντελεστές.

14) Διαδικασίες ελέγχου της ποιότητας

Στο σχεδιασμό: έλεγχος αντίθεσης σε πίνακες (και οι δύο τρόποι), ξεχωριστά προκαθορισμένα για τύφλωση χρωμάτων.
Κωδικός: οι βοηθοί μονάδων υπολογίζουν την αντίθεση και την πτώση των παραβιάσεων. οπτικά στιγμιότυπα για κρίσιμες οθόνες.
Σε CI/CD: έλεγχος όλων των ζευγαριών μαρκών και καταστάσεων, αναφορά με συνιστώσα, θέμα και πραγματική τιμή.

15) Οι ιδιαιτερότητες του iGaming

Promos και τουρνουά: Χρησιμοποιήστε την επικάλυψη και τον περιορισμό «C» στο φόντο για να αποτρέψετε το «βύθισμα» του κειμένου.
Υπεύθυνες κοινοποιήσεις (όρια, 18 +, κίνδυνοι) - ειλικρινά ΑΑΑ.
Μετρήσεις/πίνακες: Διάκριση μεταξύ αριθμών και σημείων αλλαγών (↑/↓) ανά σχήμα και αντίθεση, όχι μόνο χρώμα.

16) Κατάλογος ελέγχου εφαρμογής

• Ορίζονται οι αποχρώσεις και οι τονικές κλίμακες τους (OKLCH).
• Οι ρόλοι, οι καταστάσεις και οι επιφάνειες καθορίζονται για τα δύο θέματα.
• Auto-generation 'on-' with target contract.
• δοκιμές μήτρας «fg × bg» και WCAG σε CI.
• Ατομικές παλέτες για dataviz (με έγχρωμη υποστήριξη τύφλωσης).
• Τα στυλ Linter απαγορεύουν τα «ακατέργαστα» χρώματα.
• Εξαιρέσεις και αιτιολογική σελίδα στην κατευθυντήρια γραμμή.

17) Αντι-μοτίβα

Αναμείξτε την έμφαση της μάρκας με επιτυχία/σφάλμα σε ένα σήμα UX.
Βασιστείτε μόνο στον κορεσμό για την ιεραρχία.
Μη συγχρονίσετε φως/σκοτάδι (αντίθεση «αριστερά» σε ένα από τα θέματα).
Σκληρό HEX χωρίς μάρκες → ανεξέλεγκτη μετατόπιση διεπαφής.

Σύντομη περίληψη

Κατασκευή παλέτας από πάνω προς τα κάτω: πυρήνας μάρκας → σημασιολογικοί ρόλοι → κλίμακες τόνου → θέματα → κράτη. Εργασία σε ελέγχους OKLCH, pin mokens, automate 'on- και WCAG. Εισάγετε ξεχωριστά τις παλέτες για dataviz. Αυτό θα προσδώσει συνέπεια στο εμπορικό σήμα, αναγνωσιμότητα και επεκτασιμότητα του προϊόντος.