StripePricing [example] v1.0.0

Stripe's pricing page is a light-mode (#FFFFFF) layout showing each Stripe product (Payments, Billing, Connect) as a tall card with a colored gradient header (purple #635BFF for Payments, teal #00D4FF for Billing), product name, percentage rate ('2.9% + 30¢'), and a feature list. Cards are 320px wide, 480px+ tall, with a subtle 2px gradient border at top.

Label

Stripe — Pricing Page with Product Cards

Url

https://stripe.com/pricing

Observed

2026-Q1

Brand

stripe

Pattern Applied

@community/pattern-pricing-tiers-toggle

Aesthetic Notes

• Background: pure white #FFFFFF; cards have rgba(0,0,0,0.04) backgrounds with 0.5px solid rgba(0,0,0,0.08) borders.
• Top accent: 4px linear-gradient(90deg, #635BFF, #00D4FF) bar (Stripe's signature purple-to-teal).
• Primary brand color: Stripe purple #635BFF, used on CTAs and key prices.
• Typography: Sohne (their custom sans), price in 32px/500, body 16px/400 #425466.
• Card padding: 32px all sides, with 24px between price and feature list.
• CTA: 'Start now' in 14px/500 white on #635BFF, full-width within card, 8px border-radius.

What To Copy

• Top gradient accent bar (4px) on cards is distinctive without dominating — it's a 'mark', not a 'frame'.
• Light-mode cards need 0.5px borders + soft fill — 1px borders feel too rigid on white.
• Per-product (not per-tier) pricing layout when products are differentiated services, not feature levels.
• Use the brand's signature gradient sparingly — top bar only, not full backgrounds.

What To Skip

• The fixed-percentage rate ('2.9% + 30¢') hides volume tiers — clarify thresholds in body text.
• Don't auto-default the comparison toggle to 'monthly' if your product is annual-first.

Screenshot Hint

scout query: stripe pricing page light mode product cards purple gradient accent

Demonstrates

• Brand gradient as a 4px top stripe is enough to mark a card as 'on-brand' without overwhelming.
• Light mode cards need both subtle fill AND hairline border — neither alone reads as a card.
• Product-level pricing (vs tier-level) suits multi-product platforms.

StripePricing [example] v1.0.0

Stripe's pricing page is a light-mode (#FFFFFF) layout showing each Stripe product (Payments, Billing, Connect) as a tall card with a colored gradient header (purple #635BFF for Payments, teal #00D4FF for Billing), product name, percentage rate ('2.9% + 30¢'), and a feature list. Cards are 320px wide, 480px+ tall, with a subtle 2px gradient border at top.

Label

Stripe — Pricing Page with Product Cards

Url

https://stripe.com/pricing

Observed

2026-Q1

Brand

stripe

Pattern Applied

@community/pattern-pricing-tiers-toggle

Aesthetic Notes

• Background: pure white #FFFFFF; cards have rgba(0,0,0,0.04) backgrounds with 0.5px solid rgba(0,0,0,0.08) borders.
• Top accent: 4px linear-gradient(90deg, #635BFF, #00D4FF) bar (Stripe's signature purple-to-teal).
• Primary brand color: Stripe purple #635BFF, used on CTAs and key prices.
• Typography: Sohne (their custom sans), price in 32px/500, body 16px/400 #425466.
• Card padding: 32px all sides, with 24px between price and feature list.
• CTA: 'Start now' in 14px/500 white on #635BFF, full-width within card, 8px border-radius.

What To Copy

• Top gradient accent bar (4px) on cards is distinctive without dominating — it's a 'mark', not a 'frame'.
• Light-mode cards need 0.5px borders + soft fill — 1px borders feel too rigid on white.
• Per-product (not per-tier) pricing layout when products are differentiated services, not feature levels.
• Use the brand's signature gradient sparingly — top bar only, not full backgrounds.

What To Skip

• The fixed-percentage rate ('2.9% + 30¢') hides volume tiers — clarify thresholds in body text.
• Don't auto-default the comparison toggle to 'monthly' if your product is annual-first.

Screenshot Hint

scout query: stripe pricing page light mode product cards purple gradient accent

Demonstrates

• Brand gradient as a 4px top stripe is enough to mark a card as 'on-brand' without overwhelming.
• Light mode cards need both subtle fill AND hairline border — neither alone reads as a card.
• Product-level pricing (vs tier-level) suits multi-product platforms.

Label

Stripe — Pricing Page with Product Cards

Url

https://stripe.com/pricing

Observed

2026-Q1

Brand

stripe

Pattern Applied

@community/pattern-pricing-tiers-toggle

Aesthetic Notes

• Background: pure white #FFFFFF; cards have rgba(0,0,0,0.04) backgrounds with 0.5px solid rgba(0,0,0,0.08) borders.
• Top accent: 4px linear-gradient(90deg, #635BFF, #00D4FF) bar (Stripe's signature purple-to-teal).
• Primary brand color: Stripe purple #635BFF, used on CTAs and key prices.
• Typography: Sohne (their custom sans), price in 32px/500, body 16px/400 #425466.
• Card padding: 32px all sides, with 24px between price and feature list.
• CTA: 'Start now' in 14px/500 white on #635BFF, full-width within card, 8px border-radius.

What To Copy

• Top gradient accent bar (4px) on cards is distinctive without dominating — it's a 'mark', not a 'frame'.
• Light-mode cards need 0.5px borders + soft fill — 1px borders feel too rigid on white.
• Per-product (not per-tier) pricing layout when products are differentiated services, not feature levels.
• Use the brand's signature gradient sparingly — top bar only, not full backgrounds.

What To Skip

• The fixed-percentage rate ('2.9% + 30¢') hides volume tiers — clarify thresholds in body text.
• Don't auto-default the comparison toggle to 'monthly' if your product is annual-first.

Screenshot Hint

scout query: stripe pricing page light mode product cards purple gradient accent

Demonstrates

• Brand gradient as a 4px top stripe is enough to mark a card as 'on-brand' without overwhelming.
• Light mode cards need both subtle fill AND hairline border — neither alone reads as a card.
• Product-level pricing (vs tier-level) suits multi-product platforms.