Warm Editorial Cream Pricing
A warm cream-paper SaaS pricing page with a terracotta accent, Fraunces serif display type, and three reflowing tiers anchored by a lifted 'Most popular' middle card.
Summary
A warm, editorial light-mode SaaS pricing page in cream/paper tones with a terracotta accent and a Fraunces serif display face. Three tiers (Starter / Pro / Team) on reflowing cards, the middle Pro card lifted and outlined as 'Most popular', plus a monthly/yearly billing toggle with a 'Save 20%' chip and a details/summary FAQ accordion. The transferable value is this exact cozy-stationery aesthetic paired with a conventional 3-tier-with-popular-middle pricing structure.
Style
Warm editorial / boutique-stationery aesthetic: a cream 'paper' canvas, near-black warm-ink text, a single terracotta accent, and a calm mint for positive/checkmark cues. Serif display type (Fraunces) for headlines and prices gives it a crafted, magazine feel against a clean Inter body. Soft rounded cards, gentle layered shadows, a faint dotted grain texture, and tabular-number prices. Light, premium, hand-made-not-corporate.
Layout & Structure
A frameless, fully responsive single-column web page (not a fixed-size artboard): a sticky translucent top nav, a centered hero headline + subcopy with a pill badge, a trust row paired with a monthly/yearly toggle, a 3-column pricing card grid where the middle 'Pro' card is visually elevated and highlighted, a 'talk to us' line, a centered FAQ accordion, and a minimal footer. The pricing grid reflows responsively: 3 columns on large screens, 2 columns on medium (the third Team card centers under the first two), and a single stacked column on mobile. Max content width ~1152px (max-w-6xl), centered, with px-6 gutters.
Sticky nav
Hero / headline
Trust row + billing toggle
Pricing cards (the core)
FAQ accordion
Footer
Components
Highlighted 'Most popular' middle card
The Pro tier is the focal point: outlined in 2px terracotta, filled with a soft accent gradient, given a terracotta-tinted drop shadow, lifted above its neighbors on desktop via a negative top margin, and tagged with an absolutely-positioned solid-terracotta 'Most popular' star pill in the top-right corner.
Monthly / Yearly billing toggle
A custom pill switch flanked by 'Monthly' and 'Yearly' labels and a mint 'Save 20%' chip; flipping it swaps every plan's price and billing subline between monthly and yearly figures (Pro $24->$19, Team $59->$47, etc.).
Grain texture overlay
A barely-there dotted paper grain layered over the hero/pricing section that sells the warm, hand-made stationery feel.
Feature lists with iconography
Each tier lists its features under an uppercase section label, with small check icons color-keyed per tier (mint on Starter/Team, terracotta on Pro).
Special Notes
This is a frameless, fully responsive web page, not a fixed artboard. Content is centered in a max-w-6xl (~1152px) column with px-6 gutters. The nav is sticky with a translucent backdrop-blurred paper background. The pricing grid reflows 3 -> 2 -> 1 columns; on the 2-column breakpoint the third 'Team' card centers under the first two, and the Pro card's desktop upward lift only applies at the 3-column (lg) size. Headlines, plan names and prices use the Fraunces serif; everything else uses Inter. Prices use tabular-nums so the monthly/yearly swap doesn't shift layout. Keep the single-terracotta-accent discipline: terracotta is reserved for the highlighted Pro card, primary CTAs, links and the toggle's on-state; mint is only for positive/trust cues. Built with Tailwind (CDN config defines the custom ink/paper/accent/mint palette and the card/pop/nav shadows) and Iconify (Phosphor 'ph:' icon set).