Editorial Cream + Ink Two-Path SaaS Pricing

Summary

A warm, editorial SaaS pricing page for a design/AI tool that splits the page into two paths: a wide self-serve area with two tiers (Starter + a highlighted Pro card) and a narrow dark Enterprise contact-sales panel. Cream 'paper' background, a Fraunces serif display headline with an italic colored accent, an electric-blue brand color, and a gold accent reserved for Enterprise. A monthly/annual toggle live-swaps prices, and a two-column FAQ grid + minimal footer close the page.

Style

Warm editorial-meets-dev-tool aesthetic: an off-white cream canvas, a tall serif display headline mixed with a clean grotesque body, an electric cobalt-blue accent for actions/highlights, near-black 'ink' surfaces for the premium Enterprise panel, and a muted gold reserved exclusively for Enterprise feature checks. Soft 2xl-rounded white cards on the cream, hairline beige borders, and a single deep drop-shadow on the popular plan to lift it off the page.

Layout & Structure

A frameless, fully responsive web page (no browser chrome), max-width 7xl content column centered with px-6 gutters. Top is a sticky translucent nav; then a centered hero; then the pricing block built as a 12-column split (8 cols of self-serve cards beside a 4-col dark Enterprise panel) with a centered billing toggle above it; then a two-column FAQ section on a white band; then a minimal footer. Cards reflow responsively: the self-serve pair is 2-up on >=sm and stacks to 1; the 12-col split goes side-by-side on >=lg and stacks the Enterprise panel below on smaller screens. Overall the pricing grid behaves like a 3->2->1 column reflow as the viewport narrows, with the sticky nav persisting.

Sticky nav

Hero / headline

Billing toggle

Pricing layout (two-path 12-col split)

FAQ

Footer

Components

Monthly/Annual billing toggle with live price swap

A pill switch whose white knob slides with a cubic-bezier transition; flipping it recolors the active period label, retitles every card's 'billed annually/monthly' note, and live-swaps each price number between its monthly and annual value.

Highlighted 'Most popular' plan card

The Pro card is visually elevated with a thick dark border, a deep soft shadow, and an overhanging pill badge so it reads as the recommended self-serve tier.

Dark Enterprise contact-sales panel

A full-height near-black panel set apart from the light self-serve cards, using a paper-colored CTA and gold feature checks to signal premium, contact-sales tier.

Feature list rows with icon checks

Consistent feature rows across all plans using small bold check icons, blue on light self-serve cards and gold on the dark Enterprise panel.

Special Notes

Render as a FRAMELESS, fully responsive web page (no browser window chrome). The pricing layout is the hero of the page: a two-path 12-column split (8-col self-serve lane + 4-col dark Enterprise panel) that stacks vertically on smaller screens, with the self-serve cards reflowing 2->1. Treat the whole card grid as a 3->2->1 column reflow with a persistent sticky translucent nav. Icons are Phosphor (iconify ph:* set). The defining transferable moves to preserve: cream 'paper' canvas + white cards, Fraunces serif headline with one italic blue accent word, electric cobalt blue actions, a single highlighted plan (dark border + shadow + overhanging badge), and a near-black Enterprise panel with gold checks and a contact-sales CTA instead of a price. No em-dashes in copy; use a middot in the trust line.