screenroveScreenrove / Design references
Stripe design guide
Two faces of one brand: gradient-lit marketing pages and quiet, dense developer tools.
Typography
Observed family: sohne-var. Font files are not distributed.
marketing: Light editorial with gradient accents
- Canvas:
#ffffff - Section band (pricing, payments):
#f6f9fc - Heading text (home):
#061b31 - Heading text (pricing, payments):
#0a2540 - Body text (pricing, payments):
#425466 - Secondary headline text (home, sampled from screenshot):
#42658d - Primary action (home):
#533afd - Primary pill (pricing):
#635bff - Dark section (home):
#0d1738 - Custom plan card (pricing):
#0c2e4e
Layout and components
- Content sits in a 1440px frame with a centred column and faint vertical grid lines drawn through each section; headlines pair a dark first sentence with a lighter slate continuation.
- Big full-bleed gradients (ribbon on home, diagonal bands on pricing and Payments) break up otherwise white or #f6f9fc sections; one dark navy band carries the developer story.
- Pricing uses a sticky left product index beside a long column of white fee cards; the index was set to static for the full-page capture (the sticky element repeats otherwise).
- Home primary button: #533afd fill, white 16px label, 4px radius, 48px high; secondary "Sign up with Google" is white with a 1px #b9b9f9 border.
- Pricing and Payments use pill buttons (16.5px radius, 15px / 425 labels) in #635bff or #9966ff.
- Cards: white, 8px radius, layered blue-grey shadow (rgba(50,50,93,0.25) 0 13px 27px −5px plus a darker second layer).
- A sales chat card ("sales reps available" plus Chat now) appears bottom-right on every page; it was dismissed and hidden for capture.
product: Light, system-font developer tools
- Docs header band:
#f4f7fa - Canvas:
#ffffff - Heading text:
#414552 - Body text:
#3c4257 - Secondary text:
#697386 - Link and docs button:
#5469d4 - API reference accent:
#533afd - Code panel:
#3e444f - Demo accent:
#675dff - Demo switch on:
#0072e9 - Demo border:
#d8dee4
Layout and components
- Docs: a two-row header (search, Ask AI, account links; then product tabs) over a collapsible left nav and a single article column; the API reference swaps to a narrow sidebar and prose-plus-code two-column sections.
- The checkout demo is a 366px settings card (8px radius, 1px #d8dee4 border) beside a large preview frame on a dot-grid background, with device and country controls centred below.
- Code always sits in dark rounded panels (8px radius) with tab rows, copy buttons and line numbers; prose stays on white.
- Toggle switch: 30 × 18px, 10px radius, #0072e9 when on.
- Search opens a centred dialog with highlighted matches, breadcrumbs and an Ask AI Assistant group below the results.
- Selected sidebar item: #533afd text on a 10% tint of the same colour, 4px radius (API reference).
- Popovers (APIs & SDKs, Start building, Theme) are white cards with soft shadows anchored under their trigger.
Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.
Download DESIGN.md