Νέο/στυλ προφοράς Gamble Hub

1) Έννοια και αρχές

Το Neon/Accent είναι μια οπτική γλώσσα όπου η κύρια επιφάνεια παραμένει διακριτική (σκοτεινή πρώτη), και η προσοχή του χρήστη κατευθύνεται από σύντομες αναλαμπές νέον: περίγραμμα προφοράς, λάμψεις, φωτισμός κατάστασης και μικρο-σήματα. Σκοπός: Ταχεία ανίχνευση δράσης (CTA, εστίαση, κοινοποίηση) και υψηλή αναγνωσιμότητα χωρίς υπερφόρτωση.

1. Προφορά - δόση. 90/10: έως 10% της οθόνης μπορεί να έχει «φως».

2. Η σημασιολογία είναι πιο σημαντική από τη μάρκα. Ο Νέον είναι ένας τρόπος να τονιστεί το νόημα, όχι μόνο η «φωτεινότητα».

3. Η αντίθεση είναι πρωταρχική. Οποιοδήποτε φωτεινό αντικείμενο δεν μειώνει την αναγνωσιμότητα του κειμένου (ελάχιστο AA).

4. Ρυθμός και παύση. Η εικονογράφηση είναι σύντομη, προβλέψιμη, με παύσεις και καθαρή φυσική.

5. Επιδόσεις και διαθεσιμότητα. Δεν υπάρχουν βαριές θολώσεις/σκιές σε αδύναμες συσκευές. όλες οι επιδράσεις ελέγχονται σε κατάσταση HC.

2) Χρώμα και φως: παλέτα και ρόλοι

2. 1 σκούρο πρώτο

«bg/base» - βαθύς γραφίτης με ελαφρύ θόρυβο/κόκκους (μειώνει τις «ρίγες» στις κλίσεις).
'bg/υψωμένο' - λίγο ελαφρύτερο για κάρτες και μοντέλα.
'fg/πρωτογενές' - σχεδόν λευκό, αλλά όχι καθαρό (# FFF → L≈0. 90 σε OKLCH) για τη μείωση της λάμψης.

2. 2 Νέον προφοράς (OKLCH, ορόσημα)

Cyber Blue: 'oklch (0. 74 0. 16.250) "είναι η κύρια προφορά της μάρκας.
Ηλεκτρικό μωβ: 'oklch (0. 70 0. 17 310) "- δευτερεύουσα, για εκδηλώσεις ακολουθίας ή παιχνιδιού.
Τοξικό ασβέστιο: 'oklch (0. 82 0. 14.140) "είναι ένα σπάνιο highlight (τζάκποτ, νίκη).
Συναγερμός Coral: 'oklch (0. 72 0. 14 30) "- προειδοποιήσεις/σφάλματα (συγκρατημένα" νέον ").

2. 3 Ζεύγη αντιθέσεων

Κείμενο/εικονίδια στο φόντο: ≥ 4. 5:1 (κανονικό), ≥ 3:1 (μεγάλο/λιπαρό).
Νέο Κείμενο συμπλήρωσης: ≥ 4. 5:1. Στο high 'C', κάτω 'C _ text' στο 0. 01–0. 03.
Περιγράμματα/εικονίδια δεικτών: ≥ 3:1 για το περιβάλλον.

3) Επιδράσεις λάμψης χωρίς βλάβη στην αναγνωσιμότητα

3. 1 Μορφές λάμψης

Εξωτερική λάμψη: 1-2 θολοί δακτύλιοι, ακτίνα 8-24 px ανάλογα με την κλίμακα.
Neon Stroke: λεπτή γραμμή 1-2 px υψηλή φωτεινότητα + απαλή εξωτερική σκιά.
Inset Glow: εσωτερικός «φωτισμός» για inpoots στην εστίαση.

3. 2 Περιοριστές

Ποτέ μην τοποθετείτε μικρό κείμενο πάνω από έντονη λάμψη.
Η λάμψη δεν αντικαθιστά την κατάσταση. συμπληρώνει το σχήμα/εικόνα/έμφαση.
Σε μεγάλες περιοχές (πανό/κεφαλίδα) - μείωση της αδιαφάνειας της λάμψης σε 20-35%.

3. 3 Προσαρμογή στα θέματα

Στο θέμα του φωτός, το νέον είναι πιο αδύναμο και μικρότερο σε ακτίνα, διαφορετικά έχει «οξύ» αποτέλεσμα.
Σε μεγάλη αντίθεση - τα φώτα σβήνουν, παραμένει ένα σαφές περίγραμμα/πλαίσιο.

4) Τυπογραφία και ιεραρχία

Μέγεθος βασικού περιεχομένου: 16-18 px. σαφείς κεφαλίδες κλίμακας (π.χ. κλίμακα 12 σημείων).
Στυλ: αποφυγή υπερφωτισμού. Τακτικό/Μεσαίο ελάχιστο.
Απόσταση γραμμής 1. 45–1. 6.
Η έμφαση στο κείμενο δεν είναι στο χρώμα, αλλά στην κλίμακα/βάρος/εικονίδιο. χρώμα - μόνο ως πρόσθετο.

5) Δίκτυα, ρυθμός, φόντο

Στήλες: 12 (επιφάνεια εργασίας), 6 (δισκίο), 4 (κινητό).
Οριζόντια ενότητα 8 px. κατακόρυφα - 8/12/16 px ανάλογα με το τμήμα.
Βαθμίδα υποβάθρου: ακτινωτή ασθενής «φωτοστέφανο» στη βασική ζώνη CTA.
Θόρυβος αφής (κόκκοι) L = ± 0. 02 - για το βάθος χωρίς «πλαστικό».

6) Συστατικά μέρη (μοτίβα)

6. 1 Κουμπιά

Πρωτογενής: πλήρωση κειμένου 'brandNeon' + 'on-primary' ≥ 4. 5:1, ακτίνα λάμψης 12-16 px σε hover.
Δευτερεύουσα: διαφανής με περίγραμμα νέον (1-2 px) και απαλή εξωτερική λάμψη κατά την αιώρηση.
Τριτογενής: κείμενο, χωρίς λάμψη, μόνο έμφαση/εικονίδιο.

• Hover: − Δ L φόντο (0. 02–0. 04) + ελαφρά λάμψη.
• Ενεργό: πιο σκούρο γέμισμα, αφαίρεση ή μειωμένη λάμψη.
• Εστίαση: αντίθετος δακτύλιος 2-3 px (χωρίς θολό), όχι μόνο χρώμα.

6. 2 Πεδία εισόδου

Προκαθορισμένο: ουδέτερο 1 px λεπτό πλαίσιο.
Εστίαση: νέον εγκεφαλικό επεισόδιο + ασθενής εντομοκτόνος λάμψη εντός του πεδίου. μειωμένη θέση αντίθεσης (αλλά ≥ 3:1).
Σφάλμα/Επιτυχία: σημασιολογικό περίγραμμα χρωμάτων + εικονίδιο; λάμψη ελάχιστη.

6. 3 Πίνακες/πλοήγηση

Ενεργός δείκτης καρτέλας - γραμμή neon 2 px + μαλακό θολό 8 px.
Αιωρείται - φωτισμός κάτω από τον δρομέα (σκιώδης εξάπλωση 4-6 px).

6. 4 Κάρτες/πανό

Κάρτες τουρνουά: πλαίσιο-νέον στις γωνίες (κοντές «γωνίες») έτσι ώστε ολόκληρο το πλαίσιο να μην λάμπει.
Πανό - μια σκοτεινή μάσκα κάτω από το κείμενο (επικάλυψη 40-60%) έτσι ώστε το νέον φόντο να μην «φάει» το περιεχόμενο.

7) Μικρο-αλληλεπιδράσεις και εμψύχωση

Διάρκεια: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (docks/modals).
Καμπύλη: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) "για" υλική "αίσθηση.
Παλμός νέον: ένας κύκλος ανά αιώρηση, χωρίς ατελείωτη αναβοσβήνει.
Γεγονότα συστήματος (win/achieve): μια σύντομη έκρηξη 300-500 ms οπίσθιου φωτός με εξασθένιση.

8) Διαθεσιμότητα και τρόποι υψηλής αντίθεσης

Όλες οι έννοιες είναι διαθέσιμες χωρίς χρώμα και λάμψη: σχήμα, εικονίδιο, ετικέτα κειμένου, υπογραμμίστε.
Υποστήριξη των «προτιμώμενων αντιθέσεων», των «αναγκαστικών χρωμάτων». όταν ενεργοποιείται - σβήνει η λάμψη, ενισχύει τα πλαίσια και γεμίζει, ελέγχει τις αντιθέσεις.
Για τύφλωση χρώματος: αποφύγετε το κόκκινο-πράσινο ζεύγος ως το μοναδικό σήμα. χρήση εικονογραμμάτων και κειμένου.

9) Επιδόσεις

Ελαχιστοποίηση της σκιάς-κουτιού με ένα μεγάλο θολό και φίλτρο: θολό () σε πολλαπλά στοιχεία.
Προτιμήστε σκιές ψευδοελεγχόμενων στοιχείων και συνθέσεις στρώσεων (μετασχηματισμός/αδιαφάνεια).
Στο κινητό - μια «ελαφριά» προεπιλογή κινουμένων σχεδίων. απενεργοποίηση έντονης λάμψης σε χαμηλή FPS.
Βαθμίδες νέον - καθιστούν τα περιουσιακά στοιχεία ράστερ (WebP/AVIF) σε μεγάλα μεγέθη.

10) Χρώματα και μάρκες στυλ (παράδειγμα)

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 (θραύσματα)

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) Οπτικοποίηση δεδομένων

Σειριακά γραφήματα: η κύρια σειρά είναι ουδέτερη, η τονισμένη σειρά είναι νέον με αυξημένο πάχος και δείκτες σχήματος.
Σημεία/στήλες: ≥ 3:1 στο φόντο. υπογραφές - ≥ 4. 5:1.
Ο φωτισμός της επιλεγμένης σειράς είναι απαλή εξωτερική λάμψη (sm), χωρίς σταθερό τρέμουλο.

12) Μπλοκ περιεχομένου και promos

Κείμενο σε promo νέον φόντου - πάντα σε πλάκα/επικάλυψη (40-60%), αυστηρά σε αντίθεση.
«Δυσλειτουργία «/γραμμές σάρωσης - μόνο ως σπάνια προφορά, όχι περισσότερο από 2-3 τμήματα ανά σελίδα.

13) Εικονίδια και εικονογραφήσεις

Εικονίδια - γραμμικό/duoton με νέον εγκεφαλικό επεισόδιο για ενεργές καταστάσεις.
Εικονογραφήσεις - «νέον κατά μήκος του περιγράμματος» με ελάχιστη πλήρωση. αποφύγετε μια μικρή λάμψη γύρω από το κείμενο.

14) Εμπορία κατά προϊόντος

Τα διαφημιστικά πανό μπορούν να χρησιμοποιούν υψηλότερο χρώμιο «C» και πολύπλοκες λάμψεις.
Στο προϊόν (μορφές, πίνακες, ισοζύγιο) - μειωμένο «C», φαινόμενα σύντομης λάμψης και αυστηρή αντίθεση.

15) Κανόνες κειμένου για το iGaming

Κρίσιμες κοινοποιήσεις (18 +, όρια, KYC/AML, κίνδυνοι) - AAA αντίθετα, καμία λάμψη.
Στους πίνακες/πίνακες συντελεστών - να αναφερθεί η ανάπτυξη/πτώση όχι μόνο με το χρώμα, αλλά με βέλη/εικονίδια και περιεκτικότητα σε λίπος.

16) Εντοπισμός και προσαρμογή

Κυριλλικά/λατινικά: Μετρήσεις αποστάσεων ακίδων και γραμμάτων.
Δύο γραμμές CTA - απενεργοποίηση λάμψης για κείμενο, αφήστε το στο εγκεφαλικό επεισόδιο/φόντο.
RTL - μόνο κατευθυντικές επιδράσεις κατόπτρων (γωνίες/ανταύγειες).

17) Κατάλογος ελέγχου (σχεδιασμός/ανάπτυξη)

Αντίθεση

• Κείμενο ≥ 4. 5:1; μεγάλες ≥ 3:1· κοινοποιήσεις συστημάτων - AAA.

Λάμψη

• Η λάμψη δεν επικαλύπτεται με το κείμενο. ακτίνα και άλφα εντός προκαθορισμένων ορίων.

Κράτη

• Hover/Active/Focus διακρίνονται από το σχήμα, όχι μόνο το χρώμα/το φως.

Επιδόσεις

• Χωρίς πολλαπλές βαριές θολώσεις. υπάρχει ένα «ελαφρύ» προκαθορισμένο για κινητά.

Διαθεσιμότητα

• Η λειτουργία υψηλής αντίθεσης είναι σωστή (λάμψη, καρέ).

Σημασιολογία

• Το νέον αντανακλά το νόημα (δράση/εστίαση/κατάσταση), όχι «για την ομορφιά».

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

Συμπαγές νέον γεμίζει μεγάλες περιοχές → κόπωση των ματιών.
Συνεχής τρεμοπαίζει/κυματίζει θέματα ερεθισμού και προσβασιμότητας.
Κείμενο πάνω από φωτεινή λάμψη χωρίς εσώρουχα.
Το μόνο σήμα είναι χρώμα/λάμψη (χωρίς σχήμα/εικονίδιο/έμφαση).
Ασυνεπείς εντάσεις λάμψης σε μία οθόνη (οπτικό «χυλό»).

19) A/B και μετρήσεις

Δοκιμή της έντασης λάμψης (α/ακτίνα) για κουμπιά CTR CTA και σφάλματα εισόδου.
Παρακολούθηση χρόνου προς δράση και δημιουργία σφαλμάτων μετά την εστίαση νέον.
Έρευνες UX σχετικά με την οπτική άνεση (ειδικά σε μεγάλες συνεδρίες).

20) Τεκμηρίωση στο σύστημα σχεδιασμού

Σελίδα «Neon/Accent»: παλέτες (προϊόν/μάρκετινγκ), λαμπερές μάρκες, παραδείγματα συστατικών, βίντεο επίδειξη μικρο-αλληλεπιδράσεων.
«Πίνακας αντίθεσης»: πραγματικοί συντελεστές για «fg × bg» και «on-».
Σύνολο προκαθορισμένων κατηγοριών και snippets για το frontend.

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

Νέον/Προφορά για Gamble Hub - σημείο, σημασιολογικό, παραγωγικό. Το φως κατευθύνει το βλέμμα σε δράση χωρίς να ενοχλεί την αντίθεση και την άνεση. Κινητήρας - μάρκες (OKLCH), προεπιλογές «φωτεινής» λάμψης, αυστηρές καταστάσεις, απενεργοποιημένα αποτελέσματα σε υψηλή αντίθεση. Αυτό δίνει το λαμπρό χαρακτήρα της μάρκας, αλλά παραμένει ένα βολικό και γρήγορο προϊόν.