Design Spec — Stripe

Source: stripe.com Generated by URL to Design · for AI-assisted coding

Overview

A captured snapshot of Stripe's landing experience, decomposed into reusable design assets and tokens.

This document captures the visual language of stripe.com so an AI agent (or developer) can reconstruct a faithful, production-grade implementation.

Color Palette

Typography

• Headings: geometric sans-serif, bold weight, tight letter-spacing
• Body: humanist sans-serif, regular weight, ~1.6 line-height
• Scale: 14 / 16 / 18 / 24 / 32 / 48 px modular steps

Layout

• Max content width: 1200px, centered with generous gutters
• Spacing system: 4px base grid (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64)
• Corner radius: 12px cards, 8px controls
• Elevation: soft, low-spread shadows on a near-white background

Components

1. Top bar — brand mark, primary nav, auth action
2. Hero — oversized headline, supporting copy, primary CTA
3. Feature grid — equal-width cards with icon, title, description
4. Footer — copyright and secondary links

Implementation Notes

• Mobile-first; grid collapses 4 → 2 → 1 columns
• Prefer system font stack fallback to avoid layout shift
• Maintain AA contrast for all text on surface colors

---

Replace this mock with a generated brief once the conversion backend is wired.