Aurora Glass SaaS Pricing
A dark glassmorphism SaaS pricing page on a violet-pink-cyan aurora gradient, with frosted plan cards, a featured tier, a monthly/annual toggle, and an FAQ accordion.
Summary
A frosted-glass, dark-aurora SaaS pricing page: a sticky blurred nav, a centered hero with a gradient headline and a monthly/annual billing toggle, then three glassmorphic plan cards (Starter / Pro-featured / Team) that reflow from a 3-column grid down to 2 and then 1 column, finished with an FAQ accordion, a glowing mini-CTA, and a slim footer. The whole page floats on a soft multi-color aurora gradient with film grain.
Style
Dark glassmorphism with a soft pastel-aurora backdrop. Near-black violet base, frosted translucent cards with white hairline borders and inner highlights, and a violet -> pink -> cyan accent gradient that recurs across the headline, prices, primary buttons, and the featured-plan glow. Subtle film grain over everything keeps the glass from looking flat.
Layout & Structure
A single frameless, fully responsive web page (not a fixed-size mockup). Vertical flow: sticky blurred nav -> centered hero with badge, gradient H1, subcopy and a billing toggle -> a 3-up pricing card grid with the middle plan featured and lifted -> a trust strip -> FAQ accordion -> glowing mini-CTA -> footer. The pricing grid is the centerpiece and reflows 3 -> 2 -> 1 column across breakpoints; the sticky nav stays pinned while the aurora section scrolls underneath.
Sticky nav
Hero / headline
Billing toggle
Pricing cards (centerpiece)
Trust strip
FAQ accordion
Mini-CTA + footer
Components
Frosted glass card
The repeating translucent card used for plans, FAQ rows, pills and the CTA box. Reads as real frosted glass over the colorful aurora.
Featured plan glow
The middle (Pro) card's premium treatment: a tinted glass fill, a bright gradient ring outline, an exterior color glow, and a blurred orb behind it.
Billing toggle (monthly/annual)
Custom pill switch with a gradient knob that swaps all card prices and billing notes via JS.
Gradient-glow primary button
The signature CTA button reused in nav logo, featured plan, hero pill knob and CTA card.
Aurora + grain backdrop
The full-bleed multi-color gradient field that the whole hero/pricing section floats on.
Special Notes
Frameless, fully responsive web page (not a fixed-size artboard). Key responsive behavior: the pricing grid reflows 3 -> 2 -> 1 column (lg -> md -> mobile) and the featured-card scale/lift + glow orb only apply at lg; the nav stays sticky/frosted while the aurora scrolls beneath it, and the center nav links collapse on mobile. Dark mode only (color-scheme: dark). Built with Tailwind (CDN) + custom CSS for glass/aurora/glow, Sora + Inter from Google Fonts, and Iconify Phosphor icons; the only JS is the billing toggle. To rebrand, keep the glass + aurora system and swap the violet->pink->cyan accent ramp and the plan copy.