Warm Amber Dark Per-Seat SaaS Pricing
A dark, warm-charcoal SaaS pricing page with an amber accent and a live per-seat calculator: a monthly/annual toggle plus a seat stepper recompute every tier price and team total across a 3-card grid.
Summary
A frameless, fully responsive dark SaaS pricing page for a dev-tool / AI design product, built around a per-seat model: a warm charcoal background washed with amber radial glows, a sticky blurred nav, a centered hero, an interactive control bar (monthly/annual toggle + a seat stepper) that live-recalculates a 3-tier card grid (Starter / Studio-highlighted / Scale), each card showing per-seat price plus a computed team total, followed by a testimonial strip, an accordion FAQ, a gradient CTA panel, and a slim footer. The signature is the amber-on-charcoal palette, Sora/Inter type pairing, and a pricing structure where one billing toggle and one seat stepper drive every price on the page.
Style
Warm, premium dark mode: near-black warm charcoals (brown-tinted, not blue-black) lit by soft amber/honey radial gradients in the upper corners, with amber as the single accent used for the CTA, the highlighted plan, checkmarks, and small honey-colored value figures. Sora (geometric, heavy-weight) for display/numbers, Inter for body. Generous rounding (rounded-2xl/3xl), subtle 1px white/8 borders, soft amber glow on the featured card, and a faint film-grain-style radial overlay. Restrained, confident, dev-tool feel.
Layout & Structure
A single-column, centered, max-w-7xl frameless responsive web page stacked vertically: sticky blurred nav, centered hero with pill badge + headline + subcopy, an interactive control bar (billing toggle + seat stepper), a 3-column pricing card grid that reflows to 2 then 1 column, an annual-savings note line, a 3-up testimonial strip, a centered accordion FAQ, a gradient CTA panel, and a footer row. All content is centered within mx-auto max-w-7xl (FAQ narrows to max-w-3xl); horizontal padding px-5 on mobile, px-8 on desktop. Pricing cards are grid-cols-1 -> md:grid-cols-2 -> lg:grid-cols-3.
Sticky nav
Hero / headline
Control bar (billing toggle + seat stepper) — the interactive pricing engine
Pricing card grid (3 tiers, middle highlighted)
Testimonial strip
FAQ (accordion)
CTA panel + footer
Components
Live per-seat pricing calculator
The defining interaction: one billing toggle (Monthly/Annual) plus one seat stepper drive every number on the page in real time, so visitors immediately see what their actual team will pay.
Billing toggle with savings badge
A segmented rounded-full Monthly/Annual switch where the active option is a solid amber pill and Annual carries an inline 'SAVE 20%' chip.
Seat stepper
A compact rounded-full minus / count / plus control that sets how many seats the prices are multiplied by.
Highlighted 'Most popular' plan card
The middle Studio card is visually elevated to steer choice.
Special Notes
Frameless, fully responsive web page (no browser chrome / no device frame): content lives in mx-auto max-w-7xl with px-5 -> sm:px-8 padding; the pricing grid reflows 3-col -> 2-col -> 1-col (lg/md/base) and the control bar + testimonial strip + footer all stack vertically on mobile; the nav is sticky and blurred. Built with Tailwind via CDN plus a small tailwind.config that registers the custom 'charcoal' and 'amber' color scales and the Sora/Inter font families; Google Fonts loads Sora + Inter. Icons are inline Phosphor-style SVGs (sparkle, lightning, check, plus, arrow, social) and checkmarks/FAQ pluses are injected once via a small script. All copy and brand ('Promptsmith') are placeholders meant to be swapped; the transferable value is the amber-on-warm-charcoal style and the seat x billing live-pricing structure, not the specific product.