Back to Hub
Design Sample / Neon Drift Go to Hub

NEON DRIFT
INTERFACE

This style creates contrast by placing glowing accent points on dark backgrounds and layering line-based panels to express depth. When prompting AI, specifying "neon contrast + thin line panels + limited accent colors" instead of just "futuristic" yields more stable results.

Limit glow effects to CTA area only
Body text should maintain high readability without excessive decoration
Rounded corners + translucent cards for layered depth
Keep accent colors to 2 or fewer

AI Request Prompt

Design a web landing page with a dark night city aesthetic.

Style requirements:
- Background: Deep navy (#05070f) with 2-3 subtle neon light bleeds using radial-gradient
- UI: Thin line (1px) panels, translucent cards (backdrop-filter: blur), rounded corners (16-26px)
- Colors: Base is desaturated blue-gray, accents limited to mint neon (#2ef2d5) + coral neon (#ff745f)
- Typography: Headings use a condensed sans-serif (Rajdhani etc.), body uses a readable gothic (IBM Plex Sans KR)
- Motion: Entrance slides up from translateY(14px), hover adds single-step box-shadow glow

Responsive:
- Mobile (~768px): Cards stack in 1 column, heading size uses clamp
- Desktop: max-width 1120px centered

Restrictions:
- Do not overuse glow outside the CTA area
- No more than 3 neon colors
- No horizontal scrolling

Output:
1) Color tokens (background/panel/accent/text) and typography tokens (heading/body/code)
2) Hero / Feature cards (3-4) / CTA section structure
3) HTML/CSS code with responsive support