Lumen — Forms that feel like glass
A dark glassmorphism form landing page: a frosted, focus-aware account form floating over drifting aqua-and-magenta aurora orbs, with gradient CTAs, a feature grid, and login/checkout/error form showcases.
Summary
A dark glassmorphism marketing-and-form landing page ("Lumen — Forms that feel like glass") on a near-black #0b0f14 ground. A frosted, focus-aware account form floats in the hero over drifting aurora orbs (aqua #2dd4bf + magenta #e879f9), paired with a left-side value prop. Below: a 6-card feature grid, a 3-up form showcase (login / card checkout / feedback-error states), a prompt-library split, a centered pricing CTA band, and a slim footer. Frosted blur, a faint masked grid, gradient text, and a teal→sky→magenta gradient CTA carry the system end to end.
Style
Premium dark glassmorphism: near-black ink ground, frosted translucent surfaces with backdrop-blur and a 1px white hairline, neon aqua-to-magenta aurora gradients, and a focus-glow accent system. Display headings in Space Grotesk, body in Inter. No hard shadows in the diffuse sense — light is carried by blur, soft inner top highlights, and colored glows.
Layout & Structure
Single-column scrolling page on a max-w-7xl (1280px) centered container with px-6/lg:px-8 gutters. Fixed translucent nav, then a 2-column hero (copy left, glass form right) over a masked grid + radial wash, a trust logo strip, a 3-col feature grid, a 3-col showcase, a 5/7 prompt-library split, a centered pricing band, and a footer. Sections separated by top hairline borders and ~py-24/28 rhythm. Everything reflows to a single column under lg; mobile centers the hero copy and stacks the form below.
Sticky nav
Hero
Hero glass form
Trust strip
Features grid
Showcase
Prompt library
Pricing CTA band
Footer
Special Notes
Built with the Tailwind CDN; fonts loaded from Google Fonts (Inter + Space Grotesk); icons via Iconify (phosphor 'ph:*' family + 'logos:google-icon'). Tailwind theme extends colors ink:#0b0f14, aqua:#2dd4bf, magenta:#e879f9 and font families sans:Inter / display:'Space Grotesk'. The glassmorphism depends on backdrop-filter, so render on a non-white, textured ground (the aurora orbs + grid) for the frost to read. Honor reduced-motion by allowing the orb animations to pause. Form is non-submitting (onsubmit return false) — it's a design preview. Maintain WCAG-grade focus visibility (the 3px ring is intentional, not decorative). Reflows cleanly from 390px to 1440px: hero copy centers and the form stacks under lg, grids collapse to a single column.