The Prompt
Create a Billing & Account example that feels like a real SaaS settings page.
Layout: Card-based grid with logical groupings
- Plan & Usage: Current plan card with price, features, next billing + usage meters with limits
- Pricing Tiers: 3-tier upgrade strip (Starter/Pro/Enterprise) with current plan highlighted
- Payment & Invoices: Payment method card + invoice history table with status badges
- Account: Notification toggles + security settings (password, 2FA, sessions)
Include:
- Pro Plan @ $29/month with realistic features and billing date
- Pricing tier cards with feature lists, CTAs, and visual hierarchy (violet for Enterprise)
- 4 usage meters at varied percentages (some approaching limits with warnings)
- Payment card preview with last 4 digits
- 5-6 invoices with download actions
- Interactive toggles and session management
Dialogs: Update payment method, view invoices, cancel subscription (with confirmation). Style: Emerald accents for active states, amber for notifications, rose for destructive, violet for premium. Use subtle gradient backgrounds on cards.
Pro Plan
ActiveBilled monthly
$29
/month
Next billing January 15, 2026
Unlimited projects
Priority support
Advanced analytics
Custom integrations
Team collaboration
API access
Member since Jul 2025
Usage This Month
Resets on billing date
Projects
18 / 25
Team Members
12 / 15
Storage
7.8GB / 10GB
API Requests
84.5k / 100.0k
Approaching limits.
Starter
$0
/month
For individuals getting started
3 projects
1 team member
1GB storage
Community support
Pro
$29
/month
For growing teams
25 projects
15 team members
10GB storage
Priority support
API access
Enterprise
Popular$99
/month
For scaling organizations
Unlimited projects
Unlimited members
100GB storage
24/7 support
Custom integrations
SSO & audit logs
Payment Method
Manage your billing details
•••• •••• •••• 4242
Expires 12/26
Recent Invoices
Download for your records
INV-2025-012
Dec 15, 2025
$29.00
paidINV-2025-011
Nov 15, 2025
$29.00
paidINV-2025-010
Oct 15, 2025
$29.00
paidNotifications
Manage email preferences
Billing alerts
Payment confirmations and failures
Usage warnings
When approaching plan limits
Product updates
New features and improvements
Marketing
Tips, offers, and newsletters
Security
Protect your account
Password
Last changed 3 months ago
Two-factor authentication
Add extra security to your account
Active sessions
MacBook Pro
This deviceAuckland, NZ · Now
iPhone 15
Auckland, NZ · 2 hours ago
iPad Pro
Sydney, AU · 3 days ago