Electric Magenta Creator-SaaS Pricing
A bright-white creator-marketplace SaaS pricing page with an electric magenta accent, a billing toggle, four tier cards (dark inverted 'Most popular'), a magenta earnings stat band, and a grouped comparison table.
Summary
A creator-economy SaaS pricing page ('Promptsmith') for a prompt/template marketplace, built on a bright-white canvas with an electric magenta accent system. It pairs a centered hero + monthly/yearly billing toggle, a 4-tier pricing card row where the middle 'Creator' tier is a dark inverted card lifted as 'Most popular', a full-bleed magenta earnings stat band, a grouped feature-comparison table, and an accordion FAQ. People copy this for the punchy magenta-on-white storefront look and the standard SaaS pricing structure (toggle + tier cards + comparison table + FAQ).
Style
High-energy, friendly-but-premium creator SaaS aesthetic: clean white base, one saturated magenta accent ramp used for emphasis/CTAs/highlights, near-black 'ink' for primary text and the hero highlight card. Geometric Space Grotesk display headings paired with Inter body for a modern startup feel. Soft rounded corners (2xl/3xl), subtle magenta blur blobs and a faint magenta grid texture, and pill buttons. Tabular-nums on all prices/stats so figures stay aligned.
Layout & Structure
A frameless, fully responsive single-column marketing/pricing page (max content width ~7xl, centered, with horizontal padding that grows on larger screens). Flow top to bottom: sticky translucent nav, centered hero with billing toggle, 4-up pricing card grid that reflows 4 -> 2 -> 1 columns, a logo trust row, a full-bleed magenta earnings stat band, a grouped feature-comparison table (horizontally scrollable on mobile), an accordion FAQ, a dark grid-textured CTA panel, and a multi-column footer. No outer frame or device chrome; sections stack and reflow naturally.
Sticky nav
Hero + billing toggle
Pricing tier cards (the pricing layout)
Creator earnings stat band
Feature comparison table
FAQ accordion
Final CTA + footer
Components
Billing period toggle (monthly/yearly)
A pill switch between 'Monthly' and 'Yearly' labels (yearly carries a 'Save 20%' badge) that live-swaps the displayed prices and the price suffix.
Highlighted 'Most popular' inverted tier card
The middle pricing card is flipped to a dark ink background with white text and a magenta ribbon to draw the eye to the recommended plan.
Grouped comparison table with emphasized column
A feature matrix grouped into labeled sections, with the recommended plan's column visually highlighted and include/exclude shown via check vs minus icons.
Glassy earnings stat cards on magenta band
Three frosted-glass stat tiles sitting on the solid magenta earnings band.
Special Notes
Frameless, fully responsive web page (no device chrome). Layout reflows: pricing cards 4 -> 2 -> 1 columns, earnings stats 3 -> 1, the comparison table becomes horizontally scrollable below md with a swipe hint, and the footer link grid collapses. Sticky translucent nav stays pinned with backdrop-blur. Single magenta accent ramp on white with an inverted dark 'Creator' card carries the whole identity; the billing toggle, prices, and suffixes are JS-driven (yearly default). Fonts are Space Grotesk (display) + Inter (body); icons via Iconify Phosphor set; uses tabular-nums for all numerals. Copy/brand ('Promptsmith') is placeholder and should be swapped for the user's product.