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

Layout

• Max content width: ~1200px, centered with generous gutters
• Spacing system: 4px base grid (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64)
• Corner radius: soft, consistent across cards and controls

Components

Observed interactive elements and patterns:

• Top bar — brand mark, primary navigation, auth action
• Hero — oversized headline, supporting copy, primary CTA
• Calls to action — primary and secondary call-to-action buttons
• Content sections — stacked, responsive blocks
• Footer — secondary links and legal

Implementation Notes

• Mobile-first; multi-column grids collapse gracefully on small screens
• Preserve the detected font stacks; provide system-font fallbacks to avoid layout shift
• Maintain AA contrast for all text on surface colors
• Reuse the palette above as design tokens (CSS variables) rather than hard-coded hex