Luminous Ethereal Glassmorphism Onboarding
Luminous Ethereal is a deep-space glassmorphism design system characterized by frosted translucent panels, slow-moving animated mesh gradients, and ultra-thin line iconography. It uses a sophisticated pairing of Manrope sans-serif and Libre Baskerville editorial serif to create an atmosphere of high-end precision and cosmic calm. This style is exceptionally suited for AI-driven platforms, fintech, high-tech SaaS onboarding, and creative agency portfolios that require a futuristic yet premium feel. Key elements include 'backlight' glow effects, 'laser' thread progress indicators, and interactive cards that respond with subtle chromatic shifts.
Summary
A futuristic 'Luminous Ethereal' design system featuring deep indigo and violet mesh gradients, heavy backdrop blurs (24px), and ultra-thin typography. The UI focuses on horizontal momentum, using a laser-trail progress system and frosted glass panels with interactive backlight glows to guide users through complex workflows.
Style
The style essence is 'Deep-Space Glassmorphism.' It utilizes a background of animated indigo (#4F46E5) and violet (#A78BFA) blurs (140px) at low opacities. Typography combines Manrope (weights 200-700) for UI elements and Libre Baskerville for editorial headings. Colors revolve around #0B0C10 (Dark Surface), #FFFFFF (Light Surface), and #818CF8 (Indigo Accent). Micro-interactions use cubic-bezier(0.4, 0, 0.2, 1) for fluid motion, while shadows are replaced by soft glows (box-shadow: 0 0 100px -20px rgba(99, 102, 241, 0.15)).
Layout & Structure
A horizontal-scrolling 'Gallery' layout using snap-mandatory behavior (snap-x). The structure consists of a fixed global navigation (Theme toggles, Logo, Summary Panel trigger) and a persistent 'Horizon' footer for progress tracking.
Navigation & Global Headers
Hero Entry Section
Interactive Selection Panels
Calibration Dial Section
Horizon Progress Footer
Components
Echo Synthesis Panel
A sliding side drawer providing a summary of user selections.
Laser Thread Progress
A linear progress indicator that mimics a beam of light.