Developer productQuality 88stripe.com

Stripe homepage design context

A developer-oriented homepage snapshot with strong hierarchy, documentation cues, and high-confidence handoff structure.

Media evidenceFull screenshot

Color Palette

Light canvas

#F6F9FC

Primary page background and large bands.

inferred

Deep ink

#0A2540

Headline, navigation, and high-emphasis text.

inferred

Developer blue

#635BFF

Primary CTA and link emphasis.

inferred

Code surface

#0F172A

Dark code and dashboard proof modules.

inferred

Typography

display

Editorial display

Large but direct homepage headline.

72px / 0.98, semiboldinferred

body

Paragraph copy

Dense value prop copy without marketing filler.

18px / 1.6inferred

code

Code/UI text

API snippets, dashboard rows, and technical proof.

13px / 1.55 monospaceinferred

Spacing And Shape

section

Section band

Large product-story sections.

112px verticalinferred

layout

Grid gutter

Two-column editorial and product proof layout.

24pxinferred

shape

Panel radius

Product proof cards and code surfaces.

8px to 12pxinferred

Components

navigation

Global nav

inferred

Wide nav with product, solution, resource, and sign-in paths.

height: 72px
tone: transparent

actions

Hero CTA row

inferred

Primary button plus inline docs-style secondary action.

gap: 16px
height: 44px

code-preview

Code proof module

inferred

Dark code block reinforces developer credibility near product messaging.

background: #0F172A
radius: 8px

proof

Metric grid

inferred

Dense numerical proof and customer context support the product promise.

columns: 3
border: subtle

Evidence

Curated public snapshot

This example is a reviewed public sample for the examples gallery.

detected

Source page signals

Visual tokens are normalized from public-page observation and should be reviewed against the current live page.

inferred

Asset boundary

No third-party logos, images, fonts, or proprietary UI assets are embedded in this public example.

needs review

Limitations

Curated sample snapshot. Review the live source page before production reuse.
No third-party images, logos, fonts, or proprietary interface assets are included in this public example.

Agent handoff

Stripe homepage

# DESIGN.md - Stripe homepage DESIGN.md example

Source URL: https://stripe.com
Summary: A developer-oriented homepage snapshot with strong hierarchy, documentation cues, and high-confidence handoff structure.

## Visual Direction
- Pair a direct business headline with concrete developer proof.
- Use a light canvas with dark, high-contrast code or dashboard modules.
- Keep CTAs explicit and short, with docs as a visible secondary path.
- Let grid density communicate capability, not decoration.

## Color Tokens
- Light canvas: #F6F9FC (background) - Primary page background and large bands.
- Deep ink: #0A2540 (foreground) - Headline, navigation, and high-emphasis text.
- Developer blue: #635BFF (accent) - Primary CTA and link emphasis.
- Code surface: #0F172A (surface) - Dark code and dashboard proof modules.

## Typography
- Editorial display: 72px / 0.98, semibold - Large but direct homepage headline.
- Paragraph copy: 18px / 1.6 - Dense value prop copy without marketing filler.
- Code/UI text: 13px / 1.55 monospace - API snippets, dashboard rows, and technical proof.

## Spacing And Shape
- Section band: 112px vertical - Large product-story sections.
- Grid gutter: 24px - Two-column editorial and product proof layout.
- Panel radius: 8px to 12px - Product proof cards and code surfaces.

## Components
- Global nav: Wide nav with product, solution, resource, and sign-in paths.
- Hero CTA row: Primary button plus inline docs-style secondary action.
- Code proof module: Dark code block reinforces developer credibility near product messaging.
- Metric grid: Dense numerical proof and customer context support the product promise.

## Agent Guidance
Do:
- Show API or implementation proof when targeting developers.
- Use neutral bands to separate complex product areas.
- Keep the primary action visible in both hero and nav.

Do not:
- Do not reproduce third-party dashboard screenshots or proprietary code samples.
- Do not rely on abstract gradients as the main proof.
- Do not bury documentation links below generic marketing sections.

## Limitations
- Curated sample snapshot. Review the live source page before production reuse.
- No third-party images, logos, fonts, or proprietary interface assets are included in this public example.