סגנון ניאון/מבטא Gamble Hub

1) מושג ועקרונות

ניאון/אקסנט (Neon/Accent) היא שפה ויזואלית שבה המשטח הראשי נשאר דיסקרטי (כהה-ראשון), ותשומת הלב של המשתמש מופנית על ידי הבזקי ניאון קצרים: מבטא, זוהר, תאורת מצב ומיקרו-אותות. מטרה: גילוי פעולה מהיר (CTA, מיקוד, הודעה) וקריאה גבוהה ללא עומס יתר.

1. במבטא - במינון. 90/10: עד 10% מאזור המסך יכול להיות ”אור”.

2. סמנטיקה חשובה יותר ממותג. ניאון הוא דרך להדגיש משמעות, לא רק ”בהירות”.

3. הניגוד הוא ראשוני. כל אובייקט זוהר אינו מפחית את יכולת הקריאה של הטקסט (מינימום AA).

4. קצב והשהייה. האנימציה קצרה, צפויה, עם הפסקה ופיזיקה ברורה.

5. ביצועים וזמינות. אין טשטוש/צללים כבדים על מכשירים חלשים; כל האפקטים נבדקים במצבי HC.

2) צבע ואור: צבעים ותפקידים

2. 1 כהה-ראשון

'bg/base' - גרפיט עמוק עם רעש אור/גרגר (מפחית ”פסים” על גרדיאנטים).
קצת יותר קל לקלפים ודגמים.
'fg/primary' - כמעט לבן, אבל לא נקי (# FFF = L taining 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) "הוא גולת הכותרת נדירה (זכייה, זכייה).
התראה אלמוג: 'oklch (0. 72 0. 14 30) - אזהרות/טעויות (מאופק ”ניאון”).

2. 3 זוגות ניגודים

טקסט/סמלים לרקע: 4. 5:1 (נורמלי), 3:1 (גדול/שומני).
ניאון מילוי טקסט: 4. 5:1. ב- ”C”, lower 'C _ text' ל- 0. 01–0. 03.
קווי מתאר/סמלי אינדיקטור: 3:1 לסביבה.

3) אפקטים זוהרים ללא נזק לקריאה

3. 1 צורות זוהר

זוהר חיצוני: 1-2 טבעות טשטוש, רדיוס 8-24 px תלוי בסולם.
ניאון סטרוק: קו דק 1-2 px בהירות גבוהה + צל חיצוני רך.
Inset Glow: ”הארה” פנימית עבור אינפואיטים במוקד.

3. 2 מגבלות

לעולם אל תניח טקסט קטן על גבי זוהר חזק.
זוהר אינו מחליף מדינה; זה משלים את הצורה/אייקון/קו תחתי.
באזורים גדולים (banner/header) - הפחתת האפיון של הזוהר ל-20-35%.

3. 3 הסתגלות לנושאים

במוטיב האור, ניאון חלש וקצר יותר ברדיוס, אחרת יש לו אפקט ”חומצה”.
בניגוד גבוה - האורות כבויים, קו מתאר ברור/מסגרת נשארת.

4) טיפוגרפיה והיררכיה

גודל תוכן בסיסי: 16-18 px; כותרות בקנה מידה ברור (לדוגמה, סולם 12 נקודות).
סגנון: להימנע אולטרה-אור; מינימום רגיל/בינוני.
מרווח קו 1. 45–1. 6.
הדגש בטקסט אינו על צבע, אלא על משקל/סמל; צבע - רק כתוספת.

5) שרשראות, קצב, רקע

עמודות: 12 (שולחן עבודה), 6 (לוח), 4 (נייד).
מודול אופקי 8 px; אנכי - 8/12/16 px תלוי בקטע.
גרדיאנט רקע: radial חלש ”halo” באזור CTA המפתח.
רעש מישוש (גרגר) L = net0. 02 - לעומק בלי ”פלסטיק”.

6) רכיבים (תבניות)

6. כפתורים 1

עיקרי: מלא את "BrandNeon '+' on-primary 'text' 4. 5:1, רדיוס זוהר 12-16 px על ריחוף.
משני: שקוף עם ניאון קונטור (1-2 px) וזוהר חיצוני רך בריחוף.
שליחים: טקסטואלי, לא זוהר, תחתי/אייקון בלבד.

• Hover: LA רקע (0. 02–0. 04) + אור זוהר.
• פעיל: מלא כהה יותר, הוסר או הפחית את הזוהר.
• מיקוד: טבעת ניגוד 2-3 px (ללא טשטוש), לא רק צבע.

6. 2 שדות קלט

ברירת מחדל: מסגרת 1 px דקה.
מיקוד: ניאון סטק + חלש inset זוהר בתוך השדה; ממלא מקום ניגוד מופחת (אבל 3:1).
שגיאה/הצלחה: קווי מתאר צבעים סמנטיים + סמלים; זוהר מינימלי.

6. 3 לשוניות/ניווט

מחוון לשונית פעיל - קו ניאון 2 px + טשטוש רך 8 px.
הוברס - אור הארה תחת הסמן (צל התפשט 4-6 px).

6. 4 קלפים/באנרים

כרטיסי טורניר: מסגרת ניאון בפינות (קצר ”פינות”) כך שהמסגרת כולה לא זוהרת.
באנרים - מסכה חשוכה מתחת לטקסט (מכסה 40-60%) כך שהרקע הניאון אינו ”אוכל” את התוכן.

7) מיקרו אינטראקציות ואנימציה

משך זמן: 120-200 ms (ריחוף), 180-240 ms (פוקוס/פעיל), 240-320 ms (רציפים/מודלים).
עקומה: cubic-bezier (0. 2, 0. 0, 0. 2, 1) ”לתחושה” חומר.
דופק ניאון: מחזור אחד לכל ריחוף, ללא מצמוץ אינסופי.
אירועי מערכת (win/exchange): פרץ קצר של 300-500 ms backlight עם נטישה.

8) זמינות ומצבי ניגוד גבוהים

כל המשמעויות זמינות ללא צבע וזוהר: צורה, סמל, תווית טקסט, קו תחתי.
תמיכה ב ”מעדיף ניגוד”, ”כפוי צבעים”; כאשר מופעל - לכבות זוהר, לחזק מסגרות וממלא, לבדוק ניגודים.
לעיוורון צבעים: הימנע מהזוג האדום-ירוק כאות היחיד; השתמש בציורים ובטקסט.

9) ביצועים

מזעור צל תיבה עם טשטוש גדול ומסנן: טשטוש () על אלמנטים מרובים.
מעדיף צללים פסאודו אלמנטים ומלחינים שכבות (טרנספורמציה/אופטיביות).
בנייד - מצגת ”אור” של אנימציות; לנטרל זוהר אינטנסיבי ב-FPS נמוך.
Neon gradients - להפוך לנכסי רסטר (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 presents (שברים)

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) חסימות תוכן וקדימונים

טקסט על ניוני רקע פרומו - תמיד על צלחת/כיסוי (40-60%), אך ורק בניגוד.
”תקלה ”/שורות סריקה - רק כמבטא נדיר, לא יותר מ -2-3 חלקים לדף.

13) איקונות ואיורים

סמלים - ליניארי/דואוטון עם שבץ ניאון למצבים פעילים.
משלים - ”ניאון לאורך המתווה” במלוא המינימום; הימנע זוהר קטן סביב הטקסט.

14) שיווק נגד מוצר

כרזות שיווק עשויות להשתמש בכרום C גבוה יותר וזוהר מורכב.
במוצר (צורות, טבלאות, שיווי משקל) - צמצום 'C', אפקטי זוהר קצרים וניגודיות קפדנית.

15) כללים טקסטואליים לאיימינג

הודעות קריטיות (18 +, גבולות, KYC/AML, סיכונים) - AAA בניגוד, ללא זוהר.
בטבלאות מקדם/לוחות עופרת - מצביע על צמיחה/נפילה לא רק עם צבע, אלא גם עם חצים/אייקונים ותוכן שומן.

16) לוקליזציה והתאמה

סיכה זהה ורווח אותיות.
שתי שורות CTA - נטרל זוהר עבור טקסט, להשאיר אותו בשבץ/רקע.
RTL - מראה רק אפקטים כיווניים (פינות/גוונים).

17) רשימת ביקורת (עיצוב/פיתוח)

ניגודיות

[ ] טקסט 4. 5:1; גדול 3:1; הודעת מערכת, איי-איי-איי.

זוהר

[ ] זוהר אינו חופף עם טקסט; רדיוס ואלפא בתוך קדם.

מדינות

[ ] Hover/Active/Focus ניתן להבחין על ידי צורה, לא רק צבע/אור.

ביצועים

[ ] ללא טשטוש כבד מרובה; יש ”אור” מראש לנייד.

זמינות

[ ] מצב ניגוד גבוה נכון (זוהר כבוי, מסגרות על).

סמנטיקה

[ ] ניאון משקף משמעות (פעולה/מיקוד/סטטוס), לא ”ליופי”.

18) אנטי דפוסים

מילוי ניאון מוצק של אזורים גדולים = עייפות עיניים.
הבהוב קבוע/אדווה * גירוי ובעיות נגישות.
טקסט על זוהר בהיר בלי לזלזל.
האות היחיד הוא צבע/זוהר (ללא צורה/סמל/קו תחתי).
עוצמות זוהר לא עקביות במסך אחד (”דייסה”).

19) A/B ומדדים

בחן את עוצמת הזוהר (אלפא/רדיוס) עבור כפתורי CTR CTA ושגיאות קלט.
מעקב זמן לפעולה וצורת שגיאות לאחר הזנת מיקוד ניאון.
סקרי UX על נוחות ויזואלית (במיוחד בהפעלות ארוכות).

20) תיעוד במערכת התכנון

דף Neon/Accent: palettes (מוצר/שיווק), אסימונים זוהרים, דוגמאות רכיבים, הדגמת וידאו של מיקרו-אינטראקציות.
”מטריצת ניגוד”: מקדמים אמיתיים עבור 'fg × bg' ו- 'on-'.
סט של כיתות מראש וקטעים עבור החזית.

תקציר

ניאון/מבטא להוט גמבל - נקודה, סמנטי, פרודוקטיבי. האור מכוון את המבט לפעולה מבלי להפריע לניגודיות ולנוחות. מנוע - אסימונים (OKLCH), ”אור” זוהר מראש, מצבים מחמירים, השפעות מנוטרלות בניגודיות גבוהה. זה נותן את האופי המבריק של המותג, אבל נשאר מוצר נוח ומהיר.