Vercel Pricing
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' eye…
$ aoe install @community/example-vercel-pricingProjection
Always in _index.xml · the agent never has to ask for this.
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).
Loaded when retrieval picks the atom as adjacent / supporting.
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
Observed
2026-Q1
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
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.
Loaded when retrieval picks the atom as a focal / direct hit.
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
Observed
2026-Q1
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
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.
Relations
related: [@community/pattern-pricing-tiers-toggle, @community/example-stripe-pricing, @community/term-oklch]
Label
Vercel - Three-Tier Pricing Page
Url
Observed
2026-Q1
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
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.
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/example-vercel-pricing/atom.yaml