Warm Editorial SaaS Pricing

Summary

A warm, editorial three-tier SaaS pricing page with an inviting cream-and-clay palette, a serif display headline, and a highlighted dark center tier. Reads like a friendly indie product, not a corporate billing screen. Frameless responsive web page: sticky translucent nav, soft-gradient hero with a monthly/yearly toggle, a 3-tier card grid that reflows 3->2->1 columns, a trust strip, a FAQ accordion, and a dark footer.

Style

Cozy, hand-warm editorial aesthetic. Off-white cream paper background with a faint grain dot-texture, warm clay/sand neutrals, and a single punchy ember-orange accent for CTAs and emphasis. A Fraunces serif carries all headlines and prices for a boutique feel; Inter handles body copy. Soft, generous rounding (rounded-3xl cards, rounded-full pills/buttons), gentle multi-layer shadows, and a warm-tinted lift shadow on hover. Forest-green is used only for positive checkmarks and reassurance icons.

Layout & Structure

Single centered column capped at max-w-6xl (FAQ narrows to max-w-3xl), all sections frameless and full-bleed in background color. Top to bottom: sticky translucent nav, centered hero with badge + serif headline + billing toggle, a 3-tier pricing card grid with the middle tier highlighted and visually lifted, a centered trust/reassurance strip, a FAQ accordion section on a sand background, and a dark footer. Fully responsive: pricing grid is 3 columns on desktop, 2 columns on tablet (with the highlighted card spanning), and a single stacked column on mobile; nav links collapse on small screens.

Sticky nav

Hero

Pricing tiers (the core)

Trust / reassurance strip

FAQ accordion

Footer

Components

Monthly/Yearly billing toggle

A rounded-full segmented pill switch that swaps every tier's price between monthly and annual values with an animated sliding indicator.

Highlighted 'Most loved' tier card

The center pricing tier rendered as an inverted dark card that visually pops above its neighbors.

Soft icon chips

Small rounded square badges that hold a single Phosphor icon, used per tier and in the logo.

Special Notes

Frameless, fully responsive web page (not a fixed-frame mockup): max-w-6xl centered container with px-6 gutters, sections full-bleed in their background color. Pricing grid reflows 3 -> 2 -> 1 columns and nav links collapse on mobile. Sticky translucent backdrop-blur nav. Built with Tailwind (CDN) using a custom warm color/shadow theme, Fraunces + Inter from Google Fonts, and Phosphor (ph:) icons via iconify-icon. The billing toggle and FAQ accordion are interactive (small vanilla JS + native <details>). Keep the voice warm and human everywhere; avoid em-dashes.