A dark SaaS pricing section: three tiers with a highlighted recommended plan, monthly/annual toggle, feature checklists, per-tier CTAs, and a trust line.
Design a pricing section for a SaaS product called Halo (a status-page and uptime tool). Dark, near-black, one indigo accent, Stripe-grade restraint.
Top: a centered eyebrow "Pricing", a headline "Simple pricing that scales with you", a one-line subhead, and a monthly/annual toggle pill on the right showing "Save 20%" on annual.
Three tier cards in a row:
- Starter, $0/mo, "For side projects and solo builders" with a "Get started" outline button and 4 features.
- Pro, $20/mo, marked "Most popular" with an indigo glow border and a filled "Start free trial" button and 6 features. Make this one stand out and slightly taller.
- Team, $80/mo, "For growing teams that need controls" with an outline "Contact sales" button and 6 features.
Each card: plan name, price with /mo, short description, a CTA button, then a checklist of features with small indigo check icons. Use tabular numbers for prices.
Under the cards: a single centered trust line with three items separated by dots, like "No credit card required", "Cancel anytime", "SOC 2 Type II". Add a tiny FAQ-style note about annual billing.
Tone: hairline 1px borders, generous spacing, subtle gradients, refined. Everything fits one screen, no scroll.