Design at the Speed of Thought — Lumen Pricing Tiers

Summary

A clean, light SaaS pricing section ('Lumen — Design at the speed of thought') for an AI design tool, built around a 3-tier card row. A sticky translucent nav sits above a centered heading band (eyebrow pill, big extrabold headline, subhead, and a monthly/annually billing toggle), then three pricing cards where the middle 'Pro' card is the highlighted, scaled-up, teal-filled 'Most popular' tier between two white ghost cards, finished by a money-back guarantee line. Single teal accent on a near-white slate canvas with a faint multi-glow grain wash.

Style

Bright, modern SaaS pricing aesthetic: a near-white slate canvas (#f8fafc) with a faint multi-point teal radial-glow grain wash, ink (#0f172a) headings, slate (#475569) body text, and teal (#0f766e / #14b8a6) as the single brand accent. White ghost cards (1px slate ring, soft layered shadow, rounded-2xl) flank a solid teal-700 (#0f766e) highlighted card that is scaled up (~1.04) and pulled up (-my-3) with a deep teal pop shadow. Inter typeface throughout (weights 400-900); prices are 5xl extrabold tracking-tight; feature rows use teal check-circle icons with hairline slate dividers. Pill badges and toggle use the teal-50 (#f0fdfa) tint with teal-100 (#ccfbf1) ring.

Layout & Structure

Single centered column, max-width ~72rem (max-w-6xl), 1.5rem horizontal padding, generous vertical padding (py-20 / sm:py-24). Vertical order: sticky glass nav -> centered heading band (eyebrow pill + h1 + subhead + billing toggle) -> a 3-up pricing card grid where the middle card is highlighted/scaled/elevated -> a centered guarantee line. Responsive: the card grid is 1 column on mobile (capped at max-w-md and centered), expanding to 3 equal columns at lg; nav center links hide below md and 'Sign in' hides below sm.

Sticky glass nav

Heading band

Billing toggle

Pricing card grid (ghost + highlighted)

Guarantee line

Special Notes

Single-accent discipline: teal (#0f766e primary, #0d9488 icons, #14b8a6/#99f6e4/#ccfbf1/#f0fdfa tints) is the only brand color on a near-white slate (#f8fafc) canvas with ink (#0f172a) headings and slate (#475569) body. The defining move is the contrast between two white, 1px-ring ghost cards (soft 'card' shadow) and a single solid teal-filled, scaled-up, elevated 'Pro' card (deep 'pop' shadow + white CTA + white 'Most popular' badge) so the eye lands on the recommended tier. Depth comes from a faint three-point teal radial-glow grain wash, not heavy shadows. ONE typeface, Inter (weights 400-900) via Google Fonts; prices are 5xl extrabold tracking-tight. Icons are Phosphor (ph:*) via Iconify. Copy is human with zero em-dashes ('Prompt it, ship it.', '14-day money-back guarantee. Cancel anytime, no questions.'). Plan data is sample content so the prompt ships with no bundled assets.