Neon/Accent style Gamble Hub

1) Concept and principles

Neon/Accent is a visual language where the main surface remains discreet (dark-first), and the user's attention is directed by short neon flashes: accent contours, glows, state illumination and micro-signals. Purpose: fast action detection (CTA, focus, notification) and high readability without overload.

1. Accent - dosed. 90/10: up to 10% of the screen area can have "light."

2. Semantics are more important than brand. Neon is a way to highlight meaning, not just "brightness."

3. Contrast is primary. Any luminous object does not reduce the readability of the text (AA minimum).

4. Rhythm and pause. The animation is short, predictable, with pauses and clear physics.

5. Performance and availability. No heavy blur/shadows on weak devices; all effects are tested in HC modes.

2) Colour and light: palette and roles

2. 1 dark-first

'bg/base '- deep graphite with light noise/grain (reduces "stripes" on gradients).
'bg/elevated '- a little lighter for cards and models.
'fg/primary '- almost white, but not clean (# FFF → L≈0. 90 in OKLCH) to reduce glare.

2. 2 Accent neons (OKLCH, landmarks)

Cyber Blue: `oklch(0. 74 0. 16,250) 'is the main brand accent.
Electric Purple: `oklch(0. 70 0. 17 310) '- secondary, for sequence or game events.
Toxic Lime: `oklch(0. 82 0. 14,140) 'is a rare highlight (jackpot, win).
Alert Coral: `oklch(0. 72 0. 14 30) '- warnings/errors (restrained "neon").

2. 3 Contrast pairs

Text/icons to background: ≥ 4. 5:1 (normal), ≥ 3:1 (large/fatty).
Neon Fill Text: ≥ 4. 5:1. At high'C ', lower'C _ text' to 0. 01–0. 03.
Outlines/indicator icons: ≥ 3:1 to the environment.

3) Glow effects without harm to readability

3. 1 Forms of glow

Outer Glow: 1-2 blur rings, radius 8-24 px depending on scale.
Neon Stroke: thin line 1-2 px high brightness + soft outer shadow.
Inset Glow: internal "illumination" for inpoots in focus.

3. 2 Limiters

Never place small text on top of intense glow.
Glow does not replace state; it complements the shape/icon/underline.
In large areas (banner/header) - reduce the opacity of the glow to 20-35%.

3. 3 Adapting to themes

In the light theme, neon is weaker and shorter in radius, otherwise it has an "acid" effect.
In high-contrast - the lights are turned off, a clear outline/frame remains.

4) Typography and hierarchy

Basic content size: 16-18 px; clear scale headers (for example, 12-point scale).
Style: avoid ultra-light; Regular/Medium minimum.
Line spacing 1. 45–1. 6.
The emphasis in the text is not on color, but on scale/weight/icon; color - only as additional.

5) Grids, rhythm, background

Columns: 12 (desktop), 6 (tablet), 4 (mobile).
Horizontal module 8 px; vertical - 8/12/16 px depending on the section.
Background gradient: radial weak "halo" in the key CTA zone.

Tactile noise (grain) L = ± 0. 02 - for depth without "plastic."

6) Components (patterns)

6. 1 Buttons

Primary: fill 'brandNeon' + 'on-primary' text ≥ 4. 5:1, glow radius 12-16 px on hover.
Secondary: transparent with neon contour (1-2 px) and soft outer glow at hover.
Tertiary: textual, no glow, underline/icon only.

• Hover: − Δ L background (0. 02–0. 04) + light glow.
• Active: darker fill, removed or reduced glow.
• Focus: contrast ring 2-3 px (no blur), not just color.

6. 2 Input fields

Default: neutral 1 px thin frame.
Focus: neon stroke + weak inset glow inside the field; reduced contrast placeholder (but ≥ 3:1).
Error/Success: semantic color outline + icon; glow minimal.

6. 3 Tabs/navigation

Active tab indicator - neon line 2 px + soft blur 8 px.
Hovers - light illumination under the cursor (shadow spread 4-6 px).

6. 4 Cards/Banners

Tournament cards: frame-neon in the corners (short "corners") so that the entire frame does not glow.
Banners - a darkened mask under the text (overlay 40-60%) so that the neon background does not "eat up" the content.

7) Micro-interactions and animation

Durations: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (docks/modals).
Curve: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) 'for a "material" sensation.
Neon pulse: one cycle per hover, no endless blinking.
System events (win/achieve): a short burst of 300-500 ms backlight with attenuation.

8) Availability and high contrast modes

All meanings are available without color and glow: shape, icon, text label, underline.
Support for 'prefers-contrast', 'forced-colors'; when turned on - turn off glow, strengthen frames and fills, check contrasts.
For color blindness: avoid the red-green pair as the only signal; use pictograms and text.

9) Performance

Minimize box-shadow with a large blur and filter: blur () on multiple elements.
Prefer pseudo-element shadows and layer composers (transform/opacity).
On mobile - a "light" preset of animations; disabling intense glow at low FPS.
Neon gradients - render as raster assets (WebP/AVIF) at large sizes.

10) Color and style tokens (example)

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 presets (fragments)

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) Data visualization

Serial graphs: the main row is neutral, the highlighted row is neon with increased thickness and shape markers.
Points/columns: ≥ 3:1 to the background; signatures - ≥ 4. 5:1.
The illumination of the selected series is soft outer glow (sm), without constant flicker.

12) Content blocks and promos

Text on promo background neons - always on a plate/overlay (40-60%), strictly in contrast.
"Glitch "/scan lines - only as a rare accent, no more than 2-3 sections per page.

13) Icons and illustrations

Icons - linear/duoton with neon stroke for active states.
Illustrations - "neon along the contour" with minimal fill; avoid a small glow around the text.

14) Marketing vs product

Marketing banners may use higher 'C' chrome and complex glows.
In the product (forms, tables, balance) - reduced 'C', short glow effects and strict contrast.

15) Textual Rules for iGaming

Critical notifications (18 +, limits, KYC/AML, risks) - AAA by contrast, no glow.
In the coefficient tables/leaderboards - indicate growth/fall not only with color, but with arrows/icons and fat content.

16) Localization and adaptation

Cyrillic/Latin: Same pin and letter spacing metrics.
Two-line CTA - disable glow for text, leave it at the stroke/background.
RTL - mirror only directional effects (corners/highlights).

17) Review checklist (design/development)

Contrast

• Text ≥ 4. 5:1; large ≥ 3:1; system notifications - AAA.

Glow

• Glow does not overlap with text; radius and alpha within presets.

States

• Hover/Active/Focus are distinguishable by shape, not just color/light.

Performance

• Without multiple heavy blur; there is a "light" preset for mobile.

Availability

• High-contrast mode is correct (glow off, frames on).

Semantics

• Neon reflects meaning (action/focus/status), not "for beauty."

18) Anti-patterns

Solid neon fills of large areas → eye fatigue.
Constant flicker/ripple → irritation and accessibility issues.
Text over bright glow without underlay.
The only signal is color/glow (no shape/icon/underline).
Inconsistent glow intensities in one screen (visual "porridge").

19) A/B and metrics

Test the glow intensity (alpha/radius) for CTR CTA buttons and input errors.
Tracking time-to-action and form errors after entering neon focus.
UX surveys on visual comfort (especially in long sessions).

20) Documentation in the design system

"Neon/Accent" page: palettes (product/marketing), glow tokens, component examples, video demo of micro-interactions.
"Contrast matrix": actual coefficients for 'fg × bg' and 'on-'.
Set of preset classes and snippets for the frontend.

Brief Summary

Neon/Accent for Gamble Hub - point, semantic, productive. Light directs the gaze to action without disturbing contrast and comfort. Engine - tokens (OKLCH), "light" glow presets, strict states, disabled effects in high-contrast. This gives the bright character of the brand, but remains a convenient and fast product.