Cream & Sky Playful SaaS Pricing

Summary

A playful, warm light-mode SaaS pricing page: cream paper canvas with a dotted grain, a sky-blue accent system, big Fraunces serif headlines over Plus Jakarta Sans body, and very rounded shapes. Layout is a sticky blurred nav, a centered hero with a squiggle-underlined keyword and a monthly/yearly billing toggle, three pricing tiers with the middle 'Most loved' card highlighted and lifted, a three-up value strip, a gradient CTA band, an accordion FAQ, and a friendly footer. Copy and motifs (tilted icon chips, pastel blobs, smiley mascot) keep it human rather than corporate.

Style

A soft, playful, light-mode SaaS aesthetic: a warm cream paper canvas with a subtle dotted-grain texture, a friendly sky-blue accent system, and rounded everything. Big serif display headlines (Fraunces) paired with a clean humanist sans (Plus Jakarta Sans) for body. Generous border radii (28-36px cards, full-pill buttons), pastel decorative blobs floating behind the hero, hand-drawn squiggle underline on a keyword, gentle tilted icon chips, and emoji-adjacent Phosphor glyphs. Warm, human, low-pressure. Shadows are soft and tinted blue, never harsh.

Layout & Structure

A frameless, responsive single-page pricing layout. Top to bottom: sticky blurred nav, a centered hero with badge + serif headline (with squiggle-underlined keyword) + subcopy + a monthly/yearly billing toggle, then the core pricing region of three side-by-side tier cards with the middle one lifted and highlighted, a reassurance line, a three-up 'every plan includes' value strip, a big gradient CTA band, an accordion FAQ, and a footer. Max content width ~1152px (max-w-6xl), centered, generous vertical rhythm. Fully responsive: the 3 pricing cards reflow 3->2->1 column, the value strip 3->2->1, nav links collapse on mobile, and the sticky header stays pinned on scroll.

Sticky nav

Hero / headline

Billing toggle

Pricing cards (the core layout)

Value strip (every plan includes)

CTA band

FAQ accordion

Footer

Components

Springy billing toggle

Custom pill switch that flips monthly<->yearly, animating the knob with a bouncy cubic-bezier(.4,1.2,.5,1) easing and live-swapping prices + billing captions.

Squiggle keyword underline

Hand-drawn SVG squiggle stroke underlining the accent keyword in the serif headline.

Highlighted 'Most loved' tier card

The center Pro card visually elevated: blue gradient fill, negative top margin lift, pop shadow, an edge-pinned uppercase badge, and a tilted winking-smiley mascot dot.

Tilted icon chips

Recurring squircle icon containers rotated a few degrees for a playful, hand-placed feel.

Dashed-divider feature checklist

Tier feature lists where rows are separated by dashed hairlines, with check / x icons.

Special Notes

Frameless, fully responsive web page (no device/browser chrome). Light mode only; the warmth comes from the cream paper background + dotted grain, not a white card on grey. The signature move is the playful contrast: serious serif display type (Fraunces) over a friendly cream-and-sky palette with tilted chips, pastel blobs, a squiggle underline, and emoji-energy Phosphor icons. Pricing structure = 3 tiers with the middle one highlighted + lifted, a monthly/yearly toggle that recalculates prices, a reassurance line, and an accordion FAQ. Keep all radii large and all shadows soft + blue-tinted. Responsive behavior: pricing cards reflow 3->2->1 column (the lifted Pro card drops its negative margin when stacked), the value strip goes 3->2->1, the nav links hide on mobile while the sticky blurred header stays pinned, and content is capped at ~1152px and centered. Uses Tailwind (CDN) + Phosphor via Iconify; voice is warm and human ('Most loved', 'Made with a little chaos and a lot of love').