Neon Noir UI: Balancing Glow and Readability

01 — Contrast Discipline

Keep primary text at AA/AAA contrast. Reserve glow for accents and outlines; never glow the body copy. Use off-white (#EDEDED) on near-black (#0A0A0A) to reduce eye strain.

• Cap glow spread to 4–6px; opacity under 35%.
• Use outline-only neon for pills and buttons; solid fills stay neutral.
• Check contrast after applying blur/overlay.

02 — Motion Budget

Animate fewer than three elements per view. Favor subtle translate/opacity hovers. Respect prefers-reduced-motion by disabling glows and parallax.

• Hover: 2–3px lift, 120–180ms ease-out.
• Parallax shapes at 10–15% depth only on desktop.
• Pause or remove glow animations for reduced motion.

03 — Type & Spacing

Pair a strong display (Bebas Neue) with a clean humanist sans for body. Line-height 1.6; max width 70ch. Increase letter spacing slightly on all-caps labels to avoid halation.

04 — Components That Work

Use outlined pills for categories, neutral cards with hairline borders, and duotone imagery. Keep CTA backgrounds neutral; use neon for borders only.

• Cards: border 1px #333, bg #0E0E0E, hover border lighten to #555.
• Buttons: neutral fill, neon outline; on hover, fill flips to accent.