Aurora Glass — Sign in to the canvas
Dark aurora-glass split sign-in screen: frosted glassmorphic auth card with a glowing aqua focus ring and an aqua-to-magenta gradient CTA, floating over neon aurora blobs on near-black ink, beside a product pitch column. Space Grotesk + Inter.
Summary
A full-bleed dark 'aurora glass' sign-in screen: a split hero where a left product pitch sits beside a frosted-glass auth card floating over a deep ink background scattered with soft blurred aqua/magenta/indigo aurora blobs, a faint masked grid veil and film grain. Sticky translucent nav on top, a trust logo strip and minimal footer below. The signature move is the glassmorphic card with a gradient (aqua->magenta) primary CTA and a glowing aqua focus ring on the active field.
Style
Dark glassmorphism with a vivid aurora gradient system. Near-black ink canvas (#0b0f14), frosted translucent surfaces with heavy backdrop-blur and a 1px white hairline border, neon aqua (#2dd4bf) and magenta (#e879f9) as the only accent hues, applied as soft radial blobs, gradient text, and a multi-stop CTA. Type pairs Space Grotesk (display) with Inter (body). High contrast, calm spacing, subtle inset highlights and deep drop shadows give the glass a real lift.
Layout & Structure
Single full-height page, max-width 7xl (1280px) centered with px-6/px-8 gutters. A fixed translucent header nav. The hero is a 2-column grid on lg (left pitch / right card), stacking to one column on mobile with the card ordered first. Below the fold: a full-bleed trust logo strip, then a minimal footer. Everything sits over the shared aurora background layer.
Sticky nav
Hero / sign-in grid
Left pitch column
Glass sign-in card
Trust strip
Footer
Special Notes
Color tokens (exact): ink #0b0f14, aqua #2dd4bf (light #5eead4), magenta #e879f9; blob deep stops #38bdf8/#6366f1/#312e81. Fonts: Space Grotesk (display, 400-700) + Inter (body, 400-700), loaded from Google Fonts; phosphor + logos icon sets via Iconify. Built on Tailwind (CDN) with custom utility classes (.aurora/.glass/.glass-nav/.field/.cta/.social-btn/.pill/.gradient-text/.check/.divider-line). Keep accents strictly aqua + magenta. The password field is intentionally rendered focused to showcase the glow ring. Fully responsive: 2-col on lg collapsing to a single stacked column on mobile with the auth card moved to the top. color-scheme: dark, antialiased, smooth scroll.