Aurora Glass — Frosted Dialogs Over Living Light

Summary

A full glassmorphic-dialog landing page rendered over living aurora light on a near-black ink canvas: a sticky frosted nav, an editorial hero where a frosted-glass confirm dialog ('Discard this design?') floats over a blurred faux-app shell and a dimmed scrim against a soft aurora field, a three-card 'Anatomy' breakdown of the dialog's four planes (aurora field, scrim, frosted surface, top-edge hairline of light), a six-card 'Variants' gallery showing one glass surface across five intents (Confirm / Destructive / Prompt / Success / Upgrade / Share), a 'Design tokens' section pairing a swatch list with a copyable CSS code card, an aurora-backed CTA, and a hairline footer. Built on a two-type system (Space Grotesk for display + Inter for body) with a single ink surface (#0b0f14) and a two-hue accent vocabulary of aqua (#2dd4bf, confirms) + magenta (#e879f9, accents/warns); depth comes from 22px backdrop-blur glass surfaces, a colored dialog glow, large blurred aurora blobs, and a faint overlay grain rather than heavy chrome.

Style

A premium dark glassmorphism aesthetic: a near-black 'ink' canvas lit from behind by a living aurora (aqua + magenta + indigo radial blobs blurred to a soft glow), with every panel rendered as frosted glass, backdrop-blurred so the aurora bleeds through without ever stealing the message. It reads like a high-end AI design-tool product page: calm dark surfaces, hairline white borders, a single restrained two-hue accent system, and one true moment of drama, the frosted confirm dialog floating over a blurred faux-app with its own colored glow. Aqua means confirm/safe, magenta means accent/warn; the glow under the dialog is the same two hues, just softened.

Layout & Structure

A single scrolling product page anchored by a `sticky top-0 z-50` frosted nav, then five full-bleed sections each on a centered `max-w-7xl mx-auto px-6 lg:px-8` container with a `py-20 sm:py-24` rhythm and hairline top borders: (1) a centered hero with an eyebrow chip + gradient-accent headline + lead, then the centerpiece — a blurred faux-app shell with a dimmed scrim and the frosted confirm dialog absolutely centered over it, closed by a 3-item trust row; (2) an 'Anatomy' section with a left intro block over a 1->3-col glass-soft card grid; (3) a 'Variants' gallery on its own aurora field with a header row (title + 'browse all 40' link) and a 1->2->3-col grid of six glass cards, each holding a mini-dialog specimen; (4) a 'Design tokens' two-column split pairing a swatch list (left) with a copyable CSS code card (right); (5) an aurora-backed centered CTA. Closed by a hairline footer that reflows to a column on mobile. The page reflows cleanly to a single column at smaller widths (the hero headline drops its line break, grids collapse 3->2->1, the dialog action row goes `flex-col-reverse` so the safe 'Keep editing' button is nearest the thumb, and the nav links hide behind the persistent buttons).

Sticky frosted nav

Hero: aurora field + the floating frosted dialog

The floating frosted confirm dialog (the centerpiece)

Anatomy three-card grid

Variants gallery (one surface, five intents)

Design tokens (swatches + copyable CSS)

Aurora CTA + footer

Special Notes

Two typefaces, both Google Fonts: Space Grotesk (weights 400/500/600/700) as the display family (font-display) on titles, eyebrows and buttons; Inter (weights 400/500/600/700) for body and UI. Icons are Phosphor via Iconify (ph:square-split-horizontal-bold, ph:x-bold, ph:warning-circle-fill, ph:trash-simple-bold, ph:copy-bold, ph:sparkle-bold, ph:wheelchair-bold, ph:stack-bold, ph:text-aa-bold, ph:lightning-bold, ph:arrow-right-bold, ph:dots-three-bold, ph:check-circle-bold, ph:warning-bold, ph:check-bold, ph:crown-simple-bold, ph:link-bold, ph:books-bold, ph:x-logo-bold, ph:github-logo-bold, ph:figma-logo-bold). Exact tokens — ink surface #0b0f14, body text #e6edf3; aqua family #2dd4bf (base/confirm), #14b8a6 (button gradient end), #5eead4 / #a5f3eb (light); magenta family #e879f9 (base/accent), #c026d3 (destructive gradient end), #f5c4ff / #f0abfc (light); indigo #6366f1 (aurora blob only); primary-button text #06231f. Glass: `.glass` = linear-gradient(160deg, rgba(22,30,40,0.72), rgba(12,17,23,0.66)) + backdrop-filter blur(22px) saturate(140%) + 1px rgba(255,255,255,0.10) border + inset top hairline rgba(255,255,255,0.08) + drop 0 30px 80px -20px rgba(0,0,0,0.7); `.glass-soft` = rgba(255,255,255,0.035) fill / rgba(255,255,255,0.08) border / blur(10px); hairline border = rgba(255,255,255,0.08). Effects: the `.aurora` backdrop (aqua + magenta ~60vw blobs blurred 90px opacity ~0.55 + an indigo blob blurred 100px opacity 0.4), a `.grain` dotted overlay (rgba(255,255,255,0.04) 1px on 3px tile, mix-blend overlay), radial top/bottom vignettes, the multi-layer `.dialog-glow` with two colored glows, a glowing `.dot` (box-shadow 0 0 10px 1px currentColor), and a `.ring-aqua` focus-glow. The whole page is a `sticky top-0` frosted nav over five max-w-7xl sections (py-20 sm:py-24 rhythm, hairline top borders) and reflows to a single column at smaller widths (hero headline drops its <br>, all grids collapse 3->2->1, the dialog action row goes flex-col-reverse so the safe 'Keep editing' button is nearest the thumb, nav links hide behind the persistent buttons). Accessibility intent: aqua is the confirm/safe color and magenta the warn/destructive color, the safe Cancel/'Keep editing' button gets default visual weight and DOM-first order on mobile, and the dialog states the action + an undo-reassuring consequence in words rather than relying on color alone.