Οπτική ταυτότητα Gamble Hub

1) Ουσία του εμπορικού σήματος και αρχές

Εικόνα: Τεχνολογική, ειλικρινής, αξιόπιστη, βασισμένη σε δεδομένα και υπεύθυνη.
Τόνος: δεσμευμένος και ικανός· χωρίς υπερβολή «τυχερών παιχνιδιών».
Αρχές: αναγνωσιμότητα> διακοσμήσεις, προεπιλεγμένη διαθεσιμότητα, συνοχή μεταξύ προϊόντων.

2) Λογότυπο: δομή και χρήση

2. 1 Επιλογές

Κύρια (οριζόντια): υπογραφή + λέξη Gamble Hub.
Συμπαγές (σημείο): για το favicon/avatars.
Κατακόρυφη: για στενές περιοχές.

2. 2 Δομή και χώρος ασφαλείας

πλέγμα 8px. Επιφάνεια φύλαξης = ύψος του κεφαλαίου G γύρω από την περίμετρο.
Ελάχιστο μέγεθος: πλάτος 18 mm. οθόνη - 120 px.
Δεν μπορείτε να αλλάξετε αναλογίες, να στριφογυρίσετε, να προσθέσετε επιδράσεις/κλίσεις έξω από την παλέτα.

2. 3 Ιστορικό

Σε ελαφρύ φόντο - ένα λογότυπο χρώματος.
Σε σύνθετο/φωτογραφία - μονόχρωμο (λευκό/μαύρο) σε πλάκα 8-12 px γύρους.
Στο σκοτάδι - ανεστραμμένο.

3) Σύστημα χρωμάτων (μάρκες)

3. 1 Βασική παλέτα

Πρωτογενής/Indigo 600: '# 2F6BFF

Dark/Indigo 700: '# 1E54F0'

Επιτυχία/Πράσινο 600: '# 2EAE60'

Προειδοποίηση/Πορτοκαλί 600: '# FF9F1A'

Critical/Red 600: '# E53935'

FG Πρωτοβάθμια: '# 11131A'

FG Muted: '# 656D76'

Βάση BG: '# FFFFFF'

BG Διακριτικό: '# F7F8FA'

Αντιστρόφως: '# 0E1116'

3. 2 Κλίσεις (προαιρετικά)

Βαθμίδα μάρκας: 'γραμμική κλίση (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - χρήση σε δόση.

3. 3 Αντιθέσεις και κράτη

Κύριο κουμπί: φόντο '# 2F6BFF', λευκό κείμενο, hover '# 1E54F0', απενεργοποιημένο 40% άλφα.
Αντιγραφή κειμένου ≥ 4. 5:1 (ΑΑ). Για αντιστροφή - ≥ 3:1 για μεγάλη έκταση.

4) Τυπογραφία

Τίτλοι: Inter/SF Pro/σύστημα, περιεκτικότητα σε λιπαρές ουσίες 600-700.
Κείμενο: Inter 14-16 px, ύψος γραμμής 1. 5.
Κωδικός/μονός: JetBrains Mono ή σύστημα μονο.
Ιεραρχία: H1 32/40, H2 24/32, H3 20/28, Σώμα 16/24, Λεζάντα 12/16.
Μη χρησιμοποιείτε διακοσμητικές γραμματοσειρές για τη διεπαφή.

5) Πλέγμα, περιπτώσεις και ακτίνες

Πλέγμα: 8px. εμπορευματοκιβώτια μέγιστου πλάτους 1120-1280 px.
Φύλλα: εσωτερικές περιπτώσεις 16-24 px, inter-cards - 16 px.
Radii: 8/12/16 px; εξ ορισμού 12 px, για κουμπιά 8 px.
: '0 1px 2px rgba (0,0,0, .08)' (sm), '0 4px 12px rgba (0,0,0, .10)' (md).

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

Πλέγμα εικονιδίων 24 × 24, γραμμή 1. 75-2px, οι γύροι ταίριαζαν.
Η σημασιολογία είναι πρωταρχική, το χρώμα είναι δευτερεύον (αλλαγές χρώματος σε καταστάσεις).
Εικόνες: επίπεδα, χωρίς «casual» σύμβολα (τσιπ/κάρτες - μόνο σε ουδέτερα πληροφοριακά υλικά και σε μέτρια, μη κίνητρα πλαίσια).

7) Εικόνες και φωτογραφίες

Θέματα: τεχνολογία, δεδομένα, ασφάλεια, ομάδα.
Αποφυγή κλισέ τζάκποτ/κομφετί.
Πάνω από τη φωτογραφία βρίσκεται μια βαθμιδωτή/σκοτεινή πλάκα για αντίθεση κειμένου (τουλάχιστον 60% αδιαφάνεια στο σκοτεινό μέρος).

8) Σκοτεινά και ελαφρά θέματα

Σκοτεινό: φόντο '# 0E1116', κείμενο '# E6E8EB', σύνορα '# 2A2F37'.
Οι προφορές διατηρούν την αντίθεση (η πρωτογενής φωτεινότητα είναι 8-12%).
Γραφικά: το φόντο είναι 2 βήματα ελαφρύτερα από το φόντο, το πλέγμα είναι μπερδεμένο, οι λεζάντες είναι αντίθετες.

9) Διαθεσιμότητα (A11y)

Αντίθεση ΑΑ/ΑΑΑ· τα στυλ εστίασης δεν μπορούν να αφαιρεθούν.
Εναλλακτικές κείμενο στο λογότυπο και σημαντικές εικόνες.
Το ελάχιστο μέγεθος κλικ είναι 40-48 px.
Σεβασμός 'prefers-μειωμένη κίνηση' - μείωση/απενεργοποίηση κινουμένων σχεδίων.

10) Τόνος και μικροαντιγραφικά

Σύντομη, ακριβώς, χωρίς ορολογία.
Τα σφάλματα εξηγούν τι πρέπει να κάνετε στο χρήστη.
Μονάδες και μορφότυποι: ημερομηνίες στον τόπο του χρήστη, στη διεπαφή - ISO κατά την εισαγωγή, νομίσματα με κωδικό (EUR, USD).
Μην χρησιμοποιείτε μεταφορές «τυχερών παιχνιδιών» σε μηνύματα παντοπωλείου.

11) Ενδεικτικά παραδείγματα (JSON και CSS)

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) Συνιστώσες και καταστάσεις (παραδείγματα UI)

Κύριο κουμπί: πρωτογενές-600 φόντο, κείμενο # FFF, hover primary-700, απενεργοποιημένο 40% άλφα.
Σήματα: επιτυχία/προειδοποίηση/κριτική με ευανάγνωστο κείμενο και εικονίδιο.
Κάρτα: BG Βασικό φόντο, sm σκιά, md ακτίνα, 16 px κεφαλίδα, 16-24 px σώμα.

13) Κινούμενα σχέδια και κίνηση

Μεταβάσεις 120-200 ms, καμπύλη «ευκολίας».
Κινούμενα σχέδια - μόνο «μετασχηματισμός »/« αδιαφάνεια».
Για κρίσιμες καταστάσεις - χωρίς κινούμενα σχέδια (μην αποσπούν την προσοχή).

14) Μέσα κοινωνικής δικτύωσης, παρουσιάσεις, ηλεκτρονικό ταχυδρομείο

Avatars/εικονίδια: σημειώστε στο πρωτογενές-600 die, περιπτώσεις 12-16 px.
Διαφάνειες: φωτεινό/σκοτεινό φόντο, πλέγμα 8px, H1 40-48, περιεχόμενο 18-24.
Ηλεκτρονικό ταχυδρομείο: HTML πρότυπο 600-720 px πλάτος, γραμματοσειρές συστήματος/Inter, κουμπιά ≥ 44 px ύψος, σκούρο θέμα λαμβάνεται υπόψη.

15) Εκτύπωση, merch και εξωτερικό

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

16) Νομική σήμανση και υπεύθυνο παιχνίδι

Λογότυπος με το ®/™ σήμα, εάν είναι απαραίτητο (urd. χώρα).
Αποποίηση ευθύνης και περιορισμοί ηλικίας - στην κατώτερη ζώνη των διατάξεων. αναγνωσιμότητα AA.
Μην χρησιμοποιείτε την ταυτότητα σε περιεχόμενο που ενθαρρύνει την υπερβολική συμπεριφορά.

17) Εντοπισμός και RTL

Το λογότυπο/λέξη δεν μεταφράζεται.
Δέσμες κειμένων - σε πόρους· Υποστήριξη RTL (αντανάκλαση βέλους/εικονιδίων).
Εξετάστε τα μήκη γραμμής στα γερμανικά/τουρκικά/αραβικά για διατάξεις.

18) Μην/Δεν

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

• Τεντώστε/κόψτε το λογότυπο, εφαρμόστε σκιές/εγκεφαλικά επεισόδια «για ομορφιά».
• Χρήση εικόνων «τυχερών παιχνιδιών» ως φόντου σε προϊόντα.
• Αναμίξτε μη τυποποιημένες γραμματοσειρές, σπάστε την αντίθεση ή αφαιρέστε την εστίαση.

19) Περιουσιακά στοιχεία, ονοματοδοσία και εκδόσεις

Όνομα: 'gh-logo-hz-color. svg ',' gh-logo-vt-μονο-λευκό. svg ',' gh-icon-24-alert. svg '.
: '/brand/logos/', '/brand/icons/24/', '/brand/templates/', '/brand/fonts/'.
Μορφότυποι: SVG για λογότυπα/εικονίδια. PNG/WebP για οθόνες· PDF για εκτύπωση.
Έκδοση: SemVer για δέσμη σημάτων/εικονιδίων. changelog με «προστιθέμενη/αλλαγμένη/υποτιμημένη/αφαιρεθείσα».
Πηγή της αλήθειας: → δημιουργία καταλόγου σημάτων για web/iOS/Android.

20) Ποιοτικός έλεγχος και διαδικασία

Ανασκόπηση σήματος στις δημόσιες σχέσεις: Έλεγχος σημάτων και αντίθεσης.
A/B για αμφιλεγόμενες εικόνες υποβάθρου (αναγνωσιμότητα/μετατροπή).
Σύνδεση: απαγόρευση χρωμάτων έξω από τις μάρκες, έλεγχος alt-text για εικόνες.
Τριμηνιαίος έλεγχος: συνοχή παλέτας/τυπογραφίας/εικονιδίου.

21) Υποδείγματα

Κεντρική σημείωση/Διαφάνειες: τίτλος, ενότητα, περιεχόμενο, «δεδομένα/διάγραμμα», τελικό.
Social media: 1:1 avatar, 16:9 πανό, ιστορίες 9:16.
Ηλεκτρονικό ταχυδρομείο: χαιρετισμός, CTA, κοινοποίηση, χώνευση.

Προσγείωση: ηρωικό μπλοκ, 3 προνόμια, βιτρίνα, CTA, υπόγειο

22) Κατάλογος αιτήσεων

• Λογότυπο: σωστή επιλογή, ζώνη ασφαλείας, αντίθεση, μέγεθος.
• Χρώματα: μόνο μάρκες. Αντίθεση ΑΑ.
• Γραμματοσειρές: ιεραρχία, γραμμή προς γραμμή, μεγέθη-στόχοι.
• Εικονίδια: πλέγμα 24 × 24, ομοιόμορφο πάχος γραμμής.
• Εικόνες: έγκυρα θέματα, αναγνωσιμότητα κειμένου στην κορυφή.
• Dark/Light Theme: Επαληθευμένο, όχι τεχνουργήματα.
• Εντοπισμός/RTL: Οι γραμμές δεν «σπάνε» τη διάταξη.
• Υπάρχουν νομικές/υπεύθυνες μάρκες τυχερών παιχνιδιών.

23) Σχέδιο εφαρμογής (3 επαναλήψεις)

• Λογότυποι, παλέτα, τυπογραφία, βασικές μάρκες, σύνολο εικονιδίων 24 × 24 (κύρια 40-60 pcs.) , υποδείγματα παρουσίασης και ηλεκτρονικό ταχυδρομείο.

• Σκοτεινό θέμα, συστατικά UI σε μάρκες (κουμπιά, κάρτες, τραπέζια), οδηγός για γραφήματα, πακέτο μέσων κοινωνικής δικτύωσης, σελίδα προσγείωσης.

• Εκτεταμένη συσκευασία εικονιδίων, εικονογραφήσεις, τυπωμένες διατάξεις, χιτώνιο/CI για μάρκες, τακτικοί έλεγχοι εμπορικών σημάτων.

24) Mini-FAQ

Είναι δυνατόν να ξανασημανθεί το λογότυπο μιας ειδικής δράσης

Μόνο σε εγκεκριμένα εποχιακά θέματα και χωρίς να παραβιάζεται η ζώνη αντίθεσης/ασφάλειας.

Τι είναι πρωτογενές - μάρκες ή διάταξη

Μάρκες. Η διάταξη πρέπει να χρησιμοποιεί χρωματικές/εσοχές/τυπογραφικές μεταβλητές.

Πώς θα ενεργήσουμε σε αμφιλεγόμενες περιπτώσεις

Ανοίξτε το RFC στο αποθετήριο ταυτότητας, επισυνάψτε παραδείγματα, διεξάγετε μια ανασκόπηση Brand.

Σύνολο

Η ταυτότητα του Gamble Hub δεν είναι «σύνολο εικόνων», αλλά ένα σύστημα: λογότυπο, παλέτα, τυπογραφία, πακέτο εικονιδίων, μάρκες και διαδικασίες ποιοτικού ελέγχου. Ακολουθήστε τους κανόνες αντίθεσης, διαθεσιμότητας και συνέπειας, χρησιμοποιήστε μάρκες και υποδείγματα - και το σήμα θα είναι αναγνωρίσιμο, σύγχρονο και ενοποιημένο σε όλα τα προϊόντα και τους διαύλους.