Midnight Echo Music Player
A futuristic dark-mode UI style optimized for high-energy apps like music players, crypto dashboards, or creative portfolios. It features a deep navy palette (#0a0e27) with high-contrast neon accents in lime green (#96bf48) and electric blue (#0066ff). The aesthetic is defined by 'Glassmorphism', bento-grid layouts with ultra-rounded corners (24px-40px), and 'Cyber-gloss' animations. Key visual hooks include pulsing gradient shadows, glossy shine overlays, and sophisticated typography pairing heavyweight grotesque fonts with clean geometric sans-serifs.
Summary
Midnight Echo is a high-fidelity, dark-themed design system characterized by vibrant neon gradients, glassmorphism, and fluid motion. It uses a hierarchy of deep blues for depth, contrasted by glowing primary elements to guide user attention.
Style
The style utilizes a 'Dark Glass' theme. Typography pairs 'Cabinet Grotesk' (Extrabold) for headlines to create a brutalist/modern feel, with 'Satoshi' (Regular to Bold) for functional text. The color system is built on a #0a0e27 background with a 'Tri-Tone Neon' gradient (Lime #96bf48, Blue #0066ff, Cyan #00d9ff). Components use 1px semi-transparent borders and 12px backdrop blurs to achieve a layered glass effect.
Layout & Structure
A vertically stacked mobile-first layout with a fixed header and footer, centering on a primary high-impact visual card. The structure uses generous padding (px-6 to px-8) and 'Bento' style grouping for controls.
Header
Hero Visual Area
Information and Metadata
Interaction Controls
Persistent Context Footer
Components
Pulsing Neon Card
A high-visibility container with a breathing glow effect.
Cyber-Gloss Overlay
A light-sweep effect that gives a premium glass/metallic feel.