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

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) # keytone 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 to the 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 # ring contrast ≥ 3:1 to the disabled environment. 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 examples. 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)) ;/auto-fit/
}
[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. Αυτό θα προσδώσει συνέπεια στο εμπορικό σήμα, αναγνωσιμότητα και επεκτασιμότητα του προϊόντος.