Gilded Atelier Dark-Serif Pricing
A luxe dark, gold-on-black editorial SaaS pricing page with a high-contrast serif, an elevated glowing featured tier, monthly/annual toggle, and a refined FAQ accordion.
Summary
A luxe, editorial three-tier SaaS pricing page rendered in a near-black 'atelier' palette with warm gold/champagne accents and a high-contrast Fraunces serif. A centered hero with a monthly/annual toggle sits above a 3-column tier grid where the middle plan is elevated, glowing, and badged 'Most chosen'; below it an enterprise contact bar, a serif trust strip, and a quietly elegant FAQ accordion. The whole thing reads like a boutique studio brochure, not a generic SaaS table.
Style
Dark, gilded, editorial luxury. Deep matte-black canvas layered with slightly lighter charcoal panels, hairline borders, and a single warm metallic accent family (gold to champagne) used sparingly for emphasis, gradients, and the gold text-clip on the hero word and featured price. Typography pairs a high-contrast display serif (Fraunces) for headlines/prices/plan names with a clean grotesque sans (Inter) for body and UI. Generous whitespace, soft gold radial glow at the top, faint panel shadows, all-caps wide-tracked micro-labels, and a refined, expensive restraint.
Layout & Structure
A frameless, responsive single-column web page on a max-w-7xl container: sticky blurred nav, a narrow centered hero with billing toggle, a 3-column tier grid (the middle tier visually lifted and highlighted) that reflows 3 -> 2 -> 1 column, an enterprise contact bar, a serif trust/logos strip, a centered FAQ accordion, and a multi-column footer. Sections are separated by whitespace and hairline rules rather than boxes.
Sticky top nav
Hero + billing toggle
Three-tier pricing grid (the core layout)
Enterprise contact bar
Trust / logos strip
FAQ accordion
Footer
Components
Gold text-clip gradient
The signature 'gilded' typographic effect used on the emphasized hero word and the featured tier's price.
Featured-tier panel glow + gold ring
Makes the middle 'Studio' card feel premium and selected without changing its size much.
Monthly / Annual billing toggle
A small pill switch that live-swaps every price, period label, and billing note across all tiers.
Plus-to-x FAQ disclosure rows
Lightweight, dependency-free accordion using native details/summary.
Pill CTAs (two weights)
A consistent rounded-full button system with a primary gold-gradient variant and a quieter outlined variant.
Special Notes
This is a frameless, fully responsive web page (not a fixed frame): a max-w-7xl centered container, sticky blurred nav, and a tier grid that reflows 3 -> 2 -> 1 column across desktop/tablet/mobile (the team tier even spans 2 columns and re-lays-out at the tablet breakpoint). Built with Tailwind (CDN config defining the ink/coal/panel/gold/champagne palette), Fraunces + Inter from Google Fonts, and Iconify Phosphor icons. The only JS is the billing toggle that rewrites prices/labels; the FAQ uses native details. Keep accents restrained: gold is for emphasis (hero word, featured price/card, checks, badges, CTAs) against a mostly dark, quiet, editorial layout. Support/FAQ copy follows a warm, human voice (no em-dashes).