Neon Velocity Countdown
A high-velocity, futuristic dark-mode design system characterized by neon accents, brutalist typography, and 3D glassmorphism. Featuring a 'Laser Green' and 'Navy Black' palette, it utilizes 'Plus Jakarta Sans' for high-impact headlines and 'Geist Mono' for technical metadata. This aesthetic is ideal for high-growth tech startups, SaaS platforms, developer tools, and fintech products that want to convey speed, precision, and cutting-edge innovation. The layout uses a bento-grid structure, fluid typography, and sophisticated scroll-triggered reveal animations.
Summary
The 'Neon Velocity' style guide is a minimalist yet aggressive design system that blends brutalist structure (heavy borders, massive type) with futuristic glass effects. It focuses on high contrast, uppercase technical labels, and immersive background glows to create a premium, 'elite' software atmosphere.
Style
The style is built on a high-contrast foundation of deep blacks (#050505) and vibrant neon lime (#BFFF00). It employs 'Plus Jakarta Sans' (800 weight) for heavy, tightly-tracked headlines and 'Geist Mono' for technical, wide-tracked labels. Key visual techniques include 3D perspective transforms, grain/noise overlays for texture, and luminosity-based hover states that make components feel light-emitting.
Layout & Structure
The layout is a single-column flow with wide containers (max-width 1600px). It uses a '3D Glass' background to anchor the hero and a modular bento-grid for feature sections.
Header
Hero Section
Feature Bento Grid
Social Proof & Form
Mobile Navigation
Components
Laser Button
A high-energy interactive button with a sweeping light effect.
Luminosity Card
A responsive container that reacts to mouse proximity with light.
Special Notes
MUST: Use uppercase for all technical labels and headlines to maintain the brutalist feel. MUST: Use `tabular-nums` for the countdown to prevent horizontal layout shift during ticks. MUST: Maintain a minimum touch target of 48px for the mobile bottom nav buttons. DO NOT: Use standard rounded corners on the large Hero border-box; keep them sharp (0px) to contrast with the rounded cards below. DO NOT: Use pure black (#000) for backgrounds; stick to the slightly lighter `#050505` to allow the noise texture to be visible.