Stripe — Hero
A split-screen hero layout with bold dark blue headline and supporting copy on the left, anchored by a purple primary CTA button. The right half showcases a live checkout interface overlay (Stripe Payments product) with shipping address form, payment method selection (Card, Klarna, Revolut Pay), and order summary displaying a wooden chair product.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/stripe-split-standard-vs-custom-pricing-hero-with-gradient-ribbon.
Measured spec
| Scheme | light |
| Background | #F5F9FC |
| Text | #B5C5D3 |
| Contrast | 1.67 |
| Columns | 2 |
| Alignment | split |
| Whitespace | airy |
| Density | 0.12 |
| Measured size | 1600×800 px |
Palette
#001D35#FFFFFF#6C5CE7#F5F7FA
Fonts
Söhne
Page types
Detail
UX patterns
Progressive OnboardingForm
UI elements
Navigation BarFormCardPricing CardBadge
Context
Other sections on this page
- Feature — Four-column feature cards with diagonal gradient accent
- Feature — Developer-centric documentation with code example
- Feature — Developer features and unified payments overview
- Pricing / Plans — Two-tier pricing comparison with standard and custom options
- Gallery / Showcase — Three-column resource cards with category tags