The 50/50 marketing layout Stripe perfected: persuasive copy locked to the left column, living product UI on the right. Sections alternate sides as you scroll, creating a rhythm that keeps long pages readable.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Stripe-style split marketing layout.
1. Section: two-column grid, max-width 1080px centered, 64px column gap, 96-128px vertical padding per section.
2. Copy column: eyebrow label in brand color (13px semibold uppercase), headline 40-56px with tight tracking, body 18px/1.6, then a CTA link with an arrow (→) instead of a heavy button.
3. Visual column: a product screenshot or animated UI mock, slightly rotated (perspective transform) or elevated with a large soft shadow.
4. Alternate: even sections flip column order (visual left, copy right).
5. Vertical rhythm: sections separated by nothing but whitespace — no divider lines.
6. Mobile: single column, copy first, visual second, 48px gap.The 50/50 marketing layout Stripe perfected: persuasive copy locked to the left column, living product UI on the right. Sections alternate sides as you scroll, creating a rhythm that keeps long pages readable.
Switch viewports to see the responsive behavior described in the exports.
Switch viewports to see the responsive behavior described in the exports.