Warm Pastel Bento SaaS Pricing

Summary

A warm, editorial SaaS pricing page for an AI design-prompt tool, built as a frameless responsive bento grid. A cream-paper backdrop with subtle dot grain holds soft pastel rounded tiles (one dramatic dark Pro tile, lilac Free, peach Studio, mint feature strip, white Enterprise) arranged in an asymmetric 12-column layout. Big serif display headlines mix with a clean geometric sans; a Monthly/Yearly toggle swaps prices live. The transferable value is the look (cream + pastel-tile palette, Fraunces serif + Plus Jakarta Sans, tabular-num price numerals) and the bento pricing structure (one hero plan, two pastel side plans, a benefits strip, a wide enterprise row, FAQ, footer CTA).

Style

Soft, premium, editorial-but-friendly. A cream paper canvas with a faint radial dot grain, pastel rounded tiles each in its own hue, one high-contrast near-black hero tile with blurred colored glow blobs. Type pairs an optical serif display (Fraunces) for headlines and prices against a clean geometric sans (Plus Jakarta Sans) for body and UI. Generous rounding (rounded-3xl tiles), soft shadows, hairline ink-tinted rings, and tabular-num price numerals with tight letter-spacing. No em-dashes anywhere in copy.

Layout & Structure

A frameless responsive single-column web page on a max-w-7xl centered container. The pricing block is a bento grid: a 12-column CSS grid on large screens that reflows 3 -> 2 -> 1 columns on tablet/mobile. A sticky blurred nav sits on top, then a centered hero with a billing toggle, then the bento tiles, a wide Enterprise row, a two-column FAQ, and a footer CTA band.

Sticky top nav

Hero / headline + billing toggle

Bento pricing grid (the pricing layout itself)

Enterprise wide row

FAQ

Footer CTA band

Components

Monthly/Yearly billing toggle

A white pill switch with Monthly and Yearly labels flanking a sliding-dot track, plus a mint '-20%' savings chip on the Yearly side.

Dark hero pricing tile with glow blobs

The Pro plan tile: a near-black rounded card that anchors the bento, lifted with a heavy shadow and two large blurred pastel light blobs bleeding off its corners.

Pastel stat mini-cards

A 3-up grid of translucent white cards inside the mint feature strip showing headline numbers (8k+ Prompts, 12 Frameworks, infinity Canvas).

Special Notes

Frameless responsive web page (no device/browser chrome). The whole layout is a max-w-7xl centered container on a cream body with a faint dot-grain overlay. The bento grid is the centerpiece: a 12-column CSS grid where Pro spans 5 cols x 2 rows, Free 4 cols, Studio 3 cols, and the mint strip 7 cols, all reflowing 3 -> 2 -> 1 column on tablet then mobile. Sticky blurred nav with a working mobile hamburger dropdown. Two icon sets in play via Iconify Phosphor (ph:*). Copy voice is warm and human with zero em-dashes. The billing toggle and price swap are the only required interactivity. Pastel accents must use the deepened accent hex values (lilacDeep/peachDeep/mintDeep/skyDeep) for any text or markers so they stay AA-readable on their tile.