Editorial Serif Atelier Pricing

Summary

A warm, editorial premium SaaS pricing page in a 3-tier card layout on a cream/paper background, anchored by oversized serif display type and a single high-contrast 'dark card' middle tier. The transferable value is the look: a magazine-quality, low-saturation 'old-money'/atelier aesthetic (Fraunces + Newsreader serifs over an Inter UI), terracotta/clay/sage accents on warm off-white, soft rounded cards, a pill monthly/annual toggle, and a clean accordion FAQ. Copy this to get a refined, non-techy pricing page where the structure (free Solo / highlighted Studio / per-seat team Atelier) and the editorial styling do the selling.

Style

Editorial, warm, and premium ('atelier'/old-money) rather than bright-SaaS. Low-saturation cream paper background with near-black 'ink' text, terracotta + clay + muted-sage accents, two serif families (a high-optical-size display serif for headlines/prices and a reading serif for descriptions) paired with Inter for UI/labels. Generous whitespace, very large display headings with tight leading, subtle radial-gradient 'grain' tint, hairline warm borders, large soft rounded cards (rounded-2xl), and pill-shaped buttons. The middle tier inverts to a solid dark 'ink' card with cream text for contrast.

Layout & Structure

Frameless, fully responsive single-page web layout (NOT a fixed-frame mockup): a sticky translucent top nav, a centered hero with eyebrow + huge serif headline + serif subhead + a monthly/annual pill toggle, a 3-column pricing grid that reflows 3 -> 2 -> 1 columns with the middle 'Studio' tier visually lifted and inverted to a dark card, a centered guarantee line, an accordion FAQ section, and a multi-column footer. Max content width ~max-w-6xl, centered, with generous vertical rhythm.

Sticky top nav

Hero / headline + toggle

Pricing grid (the core)

FAQ accordion

Footer

Components

Monthly / Annual pill toggle

A two-segment pill switch centered under the hero that swaps the price numerals and billing captions on the paid tiers.

Highlighted dark 'Popular' tier card

The middle pricing tier inverted to a solid dark card to anchor the eye and steer the choice.

Tier price block

Consistent oversized serif price treatment shared across all three cards.

Feature checklist

Per-tier 'includes / everything in X, plus' feature lists with accent-colored checks.

Special Notes

This is a frameless, fully responsive web page, not a fixed-size mockup: the pricing cards reflow 3 -> 2 -> 1 column (lg -> md -> mobile), the nav stays sticky and translucent with backdrop-blur, and several helper bits (center nav links, 'Sign in', the 'Save two months' note) hide on smaller breakpoints. The signature is the warm editorial palette + double-serif typography + the single inverted dark middle tier; keep saturation low and lean on whitespace and serif scale rather than color to feel premium. Annual is the default toggle state, and the dark middle tier is the intended conversion anchor.