Aurora Bloom SaaS Pricing
A warm aurora-gradient SaaS pricing page with a giant serif headline, frosted-glass tiers flanking a lifted purple 'most popular' card, and a live monthly/annual toggle.
Summary
A warm, frameless responsive SaaS pricing page with an oversized serif headline and a single dramatic top-to-bottom aurora gradient (peach to pink to violet) that bleeds the hero straight into a 3-tier card row. The middle 'most popular' tier is a deep-purple gradient card that lifts above its frosted-glass neighbors, a pill billing toggle live-swaps monthly/annual pricing, a glassy promo band sits below the cards, and a clean cream FAQ + dark footer close the page.
Style
Editorial-meets-playful design language: a giant high-contrast serif display headline over a soft multi-stop aurora gradient, frosted white glass cards on the light tiers and a saturated purple gradient on the featured tier, friendly rounded geometry (28px card radii, fully-rounded pills/buttons), and warm accent colors. The look reads premium and human, not corporate-flat.
Layout & Structure
A frameless, fully responsive web page (not a fixed-frame mockup). Top-to-bottom: sticky blurred nav, then one large shared gradient section that holds the trust row, hero headline, billing toggle and the 3-column pricing card row plus a glassy promo band, then a cream FAQ accordion section, then a dark footer. The pricing card grid reflows 3 columns -> 2 columns -> 1 column as the viewport narrows; the sticky nav stays pinned on scroll.
Sticky nav
Trust row + hero headline
Billing toggle
Pricing card row (3 tiers)
Promo band
FAQ section
Footer
Components
Billing toggle (monthly/annual)
A pill switch with a spring-eased sliding knob that live-swaps the featured tier's price and caption and turns the track violet when annual is selected, paired with a 'Save 20%' chip.
Featured (Most popular) tier card
The center pricing card rendered as a saturated purple gradient that visually outranks the two frosted-glass tiers: it sits higher, has an overlapping gradient badge, internal glow orbs, and inverted (white) text + CTA.
Gradient-clipped italic keyword
A single emphasis word inside the serif headline filled with a left-to-right orange->pink->violet gradient via background-clip:text.
Frosted glass tier cards
The free and enterprise tiers are semi-transparent white cards with backdrop-blur so the aurora gradient glows softly through them.
Special Notes
This is a frameless, fully responsive HTML/Tailwind page, not a fixed-canvas mockup: the pricing grid reflows 3->2->1 columns and the nav is sticky. Built with the Tailwind Play CDN, Fraunces + Inter via Google Fonts, and Iconify (Phosphor icon set, data-icon='ph:*'). The whole hero+pricing area shares one continuous aurora gradient so the cards appear to float in it rather than sitting on separate section backgrounds. Honors the brand voice in the copy (warm, human, no em-dashes). Vanilla JS drives the billing toggle by swapping data-attribute prices.