VercelPricing [example] v1.0.0

Vercel's pricing page presents three plans (Hobby, Pro, Enterprise) as side-by-side cards on a near-black canvas (#000) with the middle Pro tier elevated by a subtle 1px white border at ~12% alpha and a 'Recommended' eyebrow. Feature lists use checkmark icons with feature names in white and qualifiers in muted gray (#A1A1A1).

Label

Vercel - Three-Tier Pricing Page

Url

https://vercel.com/pricing

Observed

2026-Q1

Brand

vercel

Pattern Applied

@community/pattern-pricing-tiers-toggle

Aesthetic Notes

• Background: pure black #000000; cards sit on the same black with no fill - separation is purely via 1px borders rgba(255,255,255,0.08).
• Typography: Geist Sans, plan title ~24px/600, price ~48px/600 with 'per month' as 14px/400 #A1A1A1 below.
• Spacing: cards have 32px internal padding, 24px gap between cards, vertical rhythm at 16/24/32px multiples.
• CTA buttons: primary is white fill #FFFFFF with black text on Pro card; outlined variant rgba(255,255,255,0.12) border on Hobby.
• Feature row spacing: ~12px between rows with a 1px divider rgba(255,255,255,0.06) every group.

What To Copy

• Use a 1px subtle border (rgba(255,255,255,0.08)) instead of background fill to separate cards on dark - keeps the page airy.
• Elevate the recommended tier with a slightly brighter border (rgba(255,255,255,0.16)) and a small eyebrow label, NOT a giant badge.
• Price hierarchy: 48px price >> 24px tier name >> 14px caption. Three-step scale only.
• Checkmark icons should be 16px and use the same muted gray as caption text (#A1A1A1), not full white - keeps focus on text.

What To Skip

• The per-feature info-icon tooltips are inconsistent (some features have them, some don't) - pick a rule and apply uniformly.
• Don't copy the Enterprise card's 'Contact us' empty-state - it leaves a visual hole; show a placeholder feature list instead.

Screenshot Hint

scout query: dark pricing page three columns subtle borders, vercel-style geist typography

Demonstrates

• Dark-mode pricing can avoid heavy card fills by leaning on hairline borders.
• A single 'Recommended' eyebrow communicates more than a 'Most Popular' badge.
• Numerical hierarchy (48 / 24 / 14) makes price the unambiguous focal point.

VercelPricing [example] v1.0.0

Vercel's pricing page presents three plans (Hobby, Pro, Enterprise) as side-by-side cards on a near-black canvas (#000) with the middle Pro tier elevated by a subtle 1px white border at ~12% alpha and a 'Recommended' eyebrow. Feature lists use checkmark icons with feature names in white and qualifiers in muted gray (#A1A1A1).

Label

Vercel - Three-Tier Pricing Page

Url

https://vercel.com/pricing

Observed

2026-Q1

Brand

vercel

Pattern Applied

@community/pattern-pricing-tiers-toggle

Aesthetic Notes

• Background: pure black #000000; cards sit on the same black with no fill - separation is purely via 1px borders rgba(255,255,255,0.08).
• Typography: Geist Sans, plan title ~24px/600, price ~48px/600 with 'per month' as 14px/400 #A1A1A1 below.
• Spacing: cards have 32px internal padding, 24px gap between cards, vertical rhythm at 16/24/32px multiples.
• CTA buttons: primary is white fill #FFFFFF with black text on Pro card; outlined variant rgba(255,255,255,0.12) border on Hobby.
• Feature row spacing: ~12px between rows with a 1px divider rgba(255,255,255,0.06) every group.

What To Copy

• Use a 1px subtle border (rgba(255,255,255,0.08)) instead of background fill to separate cards on dark - keeps the page airy.
• Elevate the recommended tier with a slightly brighter border (rgba(255,255,255,0.16)) and a small eyebrow label, NOT a giant badge.
• Price hierarchy: 48px price >> 24px tier name >> 14px caption. Three-step scale only.
• Checkmark icons should be 16px and use the same muted gray as caption text (#A1A1A1), not full white - keeps focus on text.

What To Skip

• The per-feature info-icon tooltips are inconsistent (some features have them, some don't) - pick a rule and apply uniformly.
• Don't copy the Enterprise card's 'Contact us' empty-state - it leaves a visual hole; show a placeholder feature list instead.

Screenshot Hint

scout query: dark pricing page three columns subtle borders, vercel-style geist typography

Demonstrates

• Dark-mode pricing can avoid heavy card fills by leaning on hairline borders.
• A single 'Recommended' eyebrow communicates more than a 'Most Popular' badge.
• Numerical hierarchy (48 / 24 / 14) makes price the unambiguous focal point.

Label

Vercel - Three-Tier Pricing Page

Url

https://vercel.com/pricing

Observed

2026-Q1

Brand

vercel

Pattern Applied

@community/pattern-pricing-tiers-toggle

Aesthetic Notes

• Background: pure black #000000; cards sit on the same black with no fill - separation is purely via 1px borders rgba(255,255,255,0.08).
• Typography: Geist Sans, plan title ~24px/600, price ~48px/600 with 'per month' as 14px/400 #A1A1A1 below.
• Spacing: cards have 32px internal padding, 24px gap between cards, vertical rhythm at 16/24/32px multiples.
• CTA buttons: primary is white fill #FFFFFF with black text on Pro card; outlined variant rgba(255,255,255,0.12) border on Hobby.
• Feature row spacing: ~12px between rows with a 1px divider rgba(255,255,255,0.06) every group.

What To Copy

• Use a 1px subtle border (rgba(255,255,255,0.08)) instead of background fill to separate cards on dark - keeps the page airy.
• Elevate the recommended tier with a slightly brighter border (rgba(255,255,255,0.16)) and a small eyebrow label, NOT a giant badge.
• Price hierarchy: 48px price >> 24px tier name >> 14px caption. Three-step scale only.
• Checkmark icons should be 16px and use the same muted gray as caption text (#A1A1A1), not full white - keeps focus on text.

What To Skip

• The per-feature info-icon tooltips are inconsistent (some features have them, some don't) - pick a rule and apply uniformly.
• Don't copy the Enterprise card's 'Contact us' empty-state - it leaves a visual hole; show a placeholder feature list instead.

Screenshot Hint

scout query: dark pricing page three columns subtle borders, vercel-style geist typography

Demonstrates

• Dark-mode pricing can avoid heavy card fills by leaning on hairline borders.
• A single 'Recommended' eyebrow communicates more than a 'Most Popular' badge.
• Numerical hierarchy (48 / 24 / 14) makes price the unambiguous focal point.