Buttons that catch the light — Aurora frosted-glass button system

Summary

A frosted-glass ('glassmorphism') button SYSTEM page for dark interfaces: an ambient aurora background (blurred aqua + magenta blobs over near-black ink, plus a faint grain), a sticky translucent glass nav, a centered hero, and below it the full button spec laid out as living documentation: a 6-variant grid, a three-size row, a four-state row, and a variants-x-states matrix canvas. The transferable value is the button language itself, every button is a translucent glass surface with an inset top highlight and a soft drop shadow that lifts and glows on hover, tinted aqua, magenta, neutral, or filled with the aurora gradient for the single primary action.

Style

Dark glassmorphism with an aurora accent palette. Near-black ink base (#0b0f14), cool aqua (#2dd4bf) and warm magenta (#e879f9) as the only two accents, everything else is translucent white glass and slate-grey text. Depth comes from layered light: an inset 1px white top-highlight on every surface, soft black drop shadows for elevation, and colored glow shadows on hover. Type pairs Space Grotesk (display/headings/labels) with Inter (body/UI). Generous spacing, large rounded corners, and a quiet, premium, never-loud feel.

Layout & Structure

Single centered column on an ambient aurora background, max-width ~72rem (max-w-6xl), 1.5-2rem horizontal padding. Top-to-bottom: sticky glass nav, centered hero with a palette strip, then four documentation sections each introduced by a numbered eyebrow badge + heading: 01 Variants (responsive card grid), 02 Sizes (one glass panel), 03 States (4-up card row), 04 Canvas (a variants-x-states matrix in a big glass panel), then a glass-topped footer. Reflows from 3-col to 1-col on mobile; the matrix becomes horizontally scrollable.

Ambient background

Sticky nav

Hero

Section header pattern

Variants grid (01)

Sizes panel (02)

States row (03)

Canvas matrix (04)

Footer

Special Notes

Token reference for faithful reproduction. Tailwind config extends colors: ink #0b0f14, aqua #2dd4bf, magenta #e879f9. Fonts: display family Space Grotesk (weights 500/600/700), body family Inter (400/500/600/700), both from Google Fonts; 'mono' utility reuses Space Grotesk for code-style labels. Icons are Phosphor via Iconify (e.g. ph:circles-three-fill, ph:sparkle-fill, ph:rocket-launch-fill, ph:arrow-right-bold). Primary-gradient text color is the dark teal #06231f (sits on the bright gradient). Layout is max-w-6xl with px-6 lg:px-8. The page reads as documentation: this is a design SYSTEM showcase, so every variant, size and state is shown side-by-side, not a marketing page. Reproduce the exact rgba alpha values, they ARE the look (low-alpha translucency + inset highlight + colored glow). No em-dashes in copy.