Hub

NEON
DRIFT

Interface Style
STYLE BRIEF

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.

RPM — Contrast
Contrast Ratio
12.4:1 on dark bg — WCAG AAA
SPEED — Motion
Animation Timing
700ms ease — 80ms stagger per card
FUEL — Saturation
Color Saturation
Limited to 2 accents — teal + coral
Neon Tube Palette
Background #05070f
Text #e5f4ff
Accent #2ef2d5
Accent 2 #ff745f
Line #1e2c44
PIT STOP TIPS
Lap 01
Limit glow effects to CTA area only
Lap 02
Body text should maintain high readability without excessive decoration
Lap 03
Rounded corners + translucent cards for layered depth
Lap 04
Keep accent colors to 2 or fewer

AI Request Prompt

Design a landing page in Neon Drift style — dark night city aesthetic with glowing accents on deep backgrounds.

COLOR TOKENS:
--bg: #05070f
--panel: rgba(6, 12, 24, 0.68)
--border: #1e2c44
--text: #e5f4ff
--accent-1: #2ef2d5 (mint neon)
--accent-2: #ff745f (coral neon)
--prompt-bg: rgba(8, 11, 20, 0.9)
--prompt-border: rgba(229, 244, 255, 0.2)
No other colors. Background uses 3 radial-gradient bleeds:
  rgba(65, 141, 255, 0.35) at 18% 22%,
  rgba(46, 242, 213, 0.28) at 78% 8%,
  rgba(255, 116, 95, 0.24) at 56% 86%.

TYPOGRAPHY:
Heading: 'Rajdhani' 700, tracking -0.03em, uppercase, text-shadow 0 0 28px rgba(46, 242, 213, 0.48)
Body: 'IBM Plex Sans' 400
Scale: clamp(2rem, 6vw, 5rem) for h1, 1.07rem for body
Heading line-height: 0.95
Body line-height: 1.75

UI:
Cards: 1px solid var(--border), border-radius 16px, padding 14px, background rgba(9, 17, 32, 0.88)
Hero panel: 1px solid var(--border), border-radius 26px, padding clamp(22px, 5vw, 52px), backdrop-filter blur(5px), background var(--panel), box-shadow 0 0 0 1px rgba(46, 242, 213, 0.3) + 0 24px 65px rgba(0, 0, 0, 0.45)
Buttons: 1px solid var(--accent-1), color var(--accent-1), transparent background, border-radius 999px, padding 8px 14px

LAYOUT:
Content max-width: min(1120px, 92vw)
Shell padding: 28px 0 80px
Card grid: auto-fit, minmax(180px, 1fr), gap 10px
Hero: left-aligned text, lead paragraph max-width 690px

MOTION:
Entrance: translateY(14px) → 0, opacity 0 → 1, 700ms ease, stagger 80ms per card
Hover: box-shadow glow on CTA only, transition 250ms ease
No scroll-triggered animations. Respect prefers-reduced-motion.

RESPONSIVE:
768px: Cards stack to 1 column, h1 clamps down to 2rem, hero padding reduces
1120px: Full grid layout, centered container

FORBIDDEN:
- Horizontal scroll at any viewport
- Glow effects outside the CTA area
- More than 2 neon accent colors
- Gradient text or animated gradient backgrounds
- Heavy imagery or illustrations — shape and light only

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Component structure: Hero panel, Feature cards (4), CTA button
3) Semantic HTML + CSS with responsive support