Three tiers, dark theme, one strong CTA.
# Pricing Page — Dark Theme, 3 Tiers Complete deliverable: design spec + production-ready HTML/CSS. Drop the code into any page or rebuild from the Figma spec below. --- ## 1. Design Decisions **Strategy: One strong CTA, not three.** The center tier ("Pro") is the only one with a filled accent button. The outer tiers use ghost/outline buttons. This visual hierarchy funnels attention to your target plan and prevents choice paralysis. **Layout logic** - 3 cards, equal width, center card scaled up ~6% with a glow border = "Most Popular" - Monthly/Annual toggle (annual saves 20% — anchors value) - Feature checklist below price, max 6 lines per card to stay scannable --- ## 2. Visual Tokens (Figma styles) | Token | Value | Use | |---|---|---| | `bg/base` | `#0B0D12` | Page background | | `bg/card` | `#14171F` | Card fill | | `bg/card-pro` | `#181C28` | Highlighted card | | `border/subtle` | `#262B36` | Card borders | | `accent/500` | `#6D5EF6` | Primary CTA, glow | | `accent/grad` | `linear 135° #6D5EF6 → #A78BFA` | Pro button + badge | | `text/primary` | `#F4F5F7` | Headings, prices | | `text/secondary` | `#9CA3AF` | Body, features | | `success/400` | `#34D399` | Check icons | **Type scale** (Inter / Geist) - Page H1: 44/52, weight 700 - Price: 48/52, weight 700 - Plan name: 18/24, weight 600 - Body & features: 15/24, weight 400 - Radius: cards `20px`, buttons `12px` **Spacing:** 8pt grid. Card padding `32px`. Gap between cards `24px`. --- ## 3. Production Code ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Pricing</title> <style> :root { --bg-base: #0B0D12; --bg-card: #14171F; --bg-card-pro: #181C28; --border: #262B36; --accent: #6D5EF6; --grad: linear-gradient(135deg, #6D5EF6, #A78BFA); --text: #F4F5F7; --muted: #9CA3AF; --success: #34D399; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg-base); color: var(--text); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 80px 24px; } .header { text-align: center; max-width: 560px; margin-bottom: 48px; } .header h1 { font-size: 44px; line-height: 1.15; letter-spacing: -0.02em; } .header p { color: var(--muted); font-size: 17px; margin-top: 16px; } /* Toggle */ .toggle { display: inline-flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 6px; margin-bottom: 56px; } .toggle button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 20px; border-radius: 999px; cursor: pointer; transition: .2s; } .toggle button.active { background: var(--accent); color: #fff; } .save { color: var(--success); font-size: 12px; font-weight: 600; } /* Cards */ .grid { display: grid; grid-template-columns: repeat(3, 300px); gap: 24px; align-items: center; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 32px; position: relative; transition: .2s; } .card:hover { transform: translateY(-4px); border-color: #333a48; } .card.pro { background: var(--bg-card-pro); border-color: var(--accent); transform: scale(1.06); box-shadow: 0 0 0 1px var(--accent), 0 20px 60px -20px rgba(109,94,246,.5); } .card.pro:hover { transform: scale(1.06) translateY(-4px); } .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; letter-spacing: .03em; } .plan { font-size: 18px; font-weight: 600; } .desc { color: var(--muted); font-size: 14px; margin-top: 6px; min-height: 40px; } .price { font-size: 48px; font-weight: 700; margin: 20px 0 4px; letter-spacing: -0.02em; } .price span { font-size: 16px; font-weight: 500; color: var(--muted); } .btn { display: block; width: 100%; text-align: center; text-decoration: none; font-size: 15px; font-weight: 600; padding: 13px; border-radius: 12px; margin: 24px 0; cursor: pointer; transition: .2s; border: 1px solid var(--border); background: transparent; color: var(--text); } .btn:hover { border-color: #4a5163; } /* THE ONE STRONG CTA */ .btn-primary { background: var(--grad); border: 0; color: #fff; box-shadow: 0 8px 24px -8px rgba(109,94,246,.7); } .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } .features { list-style: none; display: flex; flex-direction: column; gap: 12px; } .features li { display: flex; gap: 10px; font-size: 15px; color: var(--muted); } .features li svg { flex-shrink: 0; margin-top: 3px; } @media (max-width: 980px) { .grid { grid-template-columns: 1fr; max-width: 360px; } .card.pro, .card.pro:hover { transform: none; } .header h1 { font-size: 34px; } } </style> </head> <body> <div class="header"> <h1>Simple pricing that scales with you</h1> <p>Start free. Upgrade when you’re ready. No hidden fees.</p> </div> <div class="toggle"> <button class="active">Monthly</button> <button>Annual <span class="save">–20%</span></button> </div> <div class="grid"> <!-- Starter --> <div class="card"> <div class="plan">Starter</div> <div class="desc">For individuals getting started.</div> <div class="price">$0<span>/mo</span></div> <a href="#" class="btn">Get started</a> <ul class="features"> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>1 project</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>Community support</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>1 GB storage</li> </ul> </div> <!-- Pro (highlighted, the strong CTA) --> <div class="card pro"> <div class="badge">MOST POPULAR</div> <div class="plan">Pro</div> <div class="desc">For teams shipping fast.</div> <div class="price">$24<span>/mo</span></div> <a href="#" class="btn btn-primary">Start 14-day free trial</a> <ul class="features"> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>Unlimited projects</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>Priority support</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>100 GB storage</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>Advanced analytics</li> </ul> </div> <!-- Enterprise --> <div class="card"> <div class="plan">Enterprise</div> <div class="desc">For organizations at scale.</div> <div class="price">Custom</div> <a href="#" class="btn">Contact sales</a> <ul class="features"> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>SSO & SAML</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>Dedicated manager</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>Unlimited storage</li> <li><svg width="16" height="16" fill="none" stroke="#34D399" stroke-width="2.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>99.99% SLA</li> </ul> </div> </div> </body> </html> ``` --- ## 4. Figma rebuild checklist 1. **Frame:** 1280×900, fill `#0B0D12`. 2. Create the 8 color styles + 3 text styles from the token table. 3. Build one card as a component (Auto Layout, vertical, 32px padding, 20px radius). Variants: `Default` / `Pro`. 4. Pro variant: scale 1.06, accent border, drop shadow `Y20 B60 spread0 #6D5EF6 @50%`, plus the gradient badge pinned to top-center. 5. Buttons: ghost variant (`