Warm Pastel Bento SaaS Pricing
A cream, editorial SaaS pricing page laid out as a pastel bento grid with a dark hero plan, serif headlines, and a live monthly/yearly toggle.
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.