Editorial Crimson Dev-Tool Pricing
A light, serif-accented SaaS pricing page on white with a single crimson accent, audience segmented tabs, a monthly/annual toggle, and a 4-tier grid with one elevated 'most popular' card.
Summary
A light, editorial SaaS dev-tool pricing page for an AI design-agent product. White canvas with a crimson/scarlet accent, a Fraunces serif display face paired with Inter, and a soft grain texture + crimson blur blobs in the hero. The signature move is a dual control row: an audience segmented-tab switcher (Personal / Teams / Enterprise) that swaps the entire plan set, plus a Monthly/Annual billing toggle with a 'Save 20%' pill that live-updates every price. Below sits a 4-up tier grid with one elevated, crimson-filled 'most popular' card that pops above its neighbors, a 4-column 'everything included' feature band, a two-column FAQ accordion, and a dark CTA band.
Style
Warm editorial-tech aesthetic: near-white background, a single saturated crimson accent used for the logo mark, featured tier, pills, check icons and links, and a near-black 'ink' for text and the dark CTA band. Serif display headings (Fraunces) over a clean Inter body create a confident, designerly-but-technical feel. Generous whitespace, 1px hairline ink borders, rounded-2xl cards, soft layered shadows, subtle dotted grain texture, and blurred crimson glow blobs behind the hero. Uppercase, wide-tracked micro-labels.
Layout & Structure
A frameless, responsive single-column web page (max content width 1240px, generous side padding) stacked as: sticky translucent nav, a serif hero with eyebrow pill and trust row, a controls band holding the audience segmented tabs + billing toggle, the 4-up pricing grid with a raised featured tier, a 4-column 'all plans include' feature band, a two-column FAQ accordion, a dark CTA band, and a slim footer. The whole thing is fluid: the pricing cards reflow 4 -> 2 -> 1 columns, the controls row stacks vertically on mobile, and the nav collapses its link list on small screens. Not a fixed-size frame, a full responsive page.
Sticky top nav
Hero / headline
Controls band (audience tabs + billing toggle)
Pricing grid (4 tiers, featured center, swappable per audience)
All-plans-include feature band
FAQ accordion
Dark CTA band + footer
Components
Audience segmented-tab switcher
A 3-way pill switcher (Personal / Teams / Enterprise) that doesn't just style itself, it swaps the entire pricing data set and the context sentence below the controls. The active segment fills crimson-600 with white text.
Monthly / Annual billing toggle with Save pill
A two-button billing toggle plus a 'Save 20%' badge that recomputes every visible price between monthly and annual amounts and dims the badge when monthly is active.
Featured (most-popular) pricing tier
One tier visually elevated above the rest: a solid crimson gradient card with white text, a notched 'Popular' corner ribbon, the crimson glow shadow, and a slight vertical lift over its neighbours on wide screens.
Plus-to-x FAQ accordion
Native disclosure rows where a crimson plus icon rotates into an x when the item opens.
Special Notes
Frameless, fully responsive web page, not a fixed canvas: content is capped at max-w-1240px with fluid side padding, the pricing cards reflow 4 -> 2 -> 1 columns, the controls row stacks on mobile, and the nav link list hides on small screens. The two controls (audience tabs + billing toggle) are the heart of the pattern: copying this design means copying the interaction where one switcher swaps the whole plan set and the other recomputes all prices. Built with Tailwind (CDN) config extending custom 'crimson' and 'ink' palettes plus 'card'/'pop'/'navy' shadows, Fraunces + Inter from Google Fonts, and Phosphor icons via Iconify; tiers are rendered from a JS data object so add/remove/reorder tiers by editing data, not markup. Keep the single-accent discipline (everything that isn't ink is crimson) and the serif-display / sans-body pairing, that contrast is what gives this page its character.