Warm Neo-Brutalist SaaS Pricing
A neo-brutalist pricing page on a warm cream canvas with hard-shadowed cards, a 3-tier layout, a monthly/annual toggle, and a bold Archivo Black display face.
Summary
A frameless, responsive neo-brutalist SaaS pricing page on a warm cream (#f4ecd8) canvas with a faint grid texture. Thick 2px black outlines and hard offset drop shadows give every element a sticker-like, tactile feel. The core is a 3-tier pricing card row (Starter / Pro / Studio) with the middle Pro tier highlighted in mustard yellow, lifted, and badged 'Most popular'. A pill billing toggle (Monthly/Annual, Save 20%) swaps the displayed price and suffix live. Below sits an accordion FAQ and a dark inverted footer. Display type is the heavy Archivo Black; body is Space Grotesk; prices and meta use DM Mono.
Style
Warm, playful neo-brutalism: a cream/paper background, chunky 2px ink-black borders on everything, hard (non-blurred) offset shadows, generously rounded card corners, and a tight accent palette of mustard yellow, grape purple, mint, and coral. Loud display headline with a highlighter-marker swipe, monospace prices, and scattered decorative star/sparkle doodles with their own hard drop-shadows. Friendly and confident, never sterile.
Layout & Structure
A single frameless, responsive web page, max-width ~1152px (max-w-6xl) centered, stacked top to bottom: sticky bordered nav, a grid-textured hero+pricing section (badge, big headline, subcopy, billing toggle, the 3-card pricing row, trust line), a centered accordion FAQ on a paper surface, and a dark inverted footer. The pricing cards are the centerpiece and reflow 3 -> 2 -> 1 column as the viewport narrows.
Sticky nav
Hero / headline
Billing toggle
Pricing cards (the core)
FAQ accordion
Footer
Components
Hard-shadow sticker cards
Every card, button, badge and tile uses a 2px ink border plus a hard, un-blurred offset shadow to look like a physical sticker; hover lifts the element and deepens the shadow.
Live billing toggle (Monthly/Annual)
An accessible pill switch that animates a knob, recolors the track, and rewrites all prices + suffixes between monthly and annual values, paired with a 'Save 20%' badge.
Highlighted 'Most popular' tier
The middle pricing card is visually elevated: mustard fill, largest hard shadow, vertically offset above its neighbors, and topped by an ink ribbon badge.
Highlighter-marker headline
A key phrase in the hero headline is swiped with a mustard highlighter background that paints only the lower portion of the text.
Inline SVG icon system
All icons are Phosphor-style SVGs injected inline from a small JS map (data-ic name + data-sz size), so the page has no icon-font/network dependency.
Special Notes
This is a FRAMELESS, fully responsive web page (no device chrome): the centered max-w-6xl container fluidly fills the viewport, the nav stays sticky, and the pricing cards reflow from 3 columns to 2 to 1 as width drops. The transferable value is the warm neo-brutalist look (cream canvas + grid texture, 2px ink borders, hard offset shadows, mustard/grape/mint/coral accents, Archivo Black + Space Grotesk + DM Mono) combined with the proven pricing STRUCTURE: 3 tiers with the middle one highlighted, a live monthly/annual toggle with a savings badge, per-tier feature checklists, a trust line, and an accordion FAQ. No em-dashes in copy. All accents and prices are easy to swap for any SaaS or dev-tool brand.