← OpenDesign CURATED · OPEN · FREE
Stripe
A clean, premium developer-focused fintech platform with a sophisticated use of gradients and high-contrast typography.
Fintech Editorial Premium Gradient
01
Identity DNA
payments infrastructure global developer-first reliable
The reliable, invisible backbone of the internet economy.
02
Color
#533AFDAccent
#061B31Ink
#50617AInk soft
#FFFFFFBG
#F8FAFDBG soft
#E5EDF5BG quiet
#64748DMuted
rgba(229, 237, 245, 1)Line
A clean, high-contrast palette dominated by deep navy ink and a vibrant purple accent, supported by soft neutral grays and dynamic gradients.
03
Typography
grotesque-sans · monospace
display 56px · 500h2 32px · 500body 16px · 400caption 14px · 40004
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Generous vertical spacing with a 4px base grid ensures clear visual hierarchy and readability.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Thin, subtle borders in light gray or purple-tinted grays define edges and inputs.
0px 14.088px 21.132px -14.088px rgba(3, 3, 39, 0.25) · 0px 18px 36px -18px rgba(0, 0, 0, 0.1) · 0px 15px 35px 0px rgba(23, 23, 23, 0.08) · 0px 3px 6px 0px rgba(23, 23, 23, 0.06)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
A wide, centered container with generous side margins and a structured multi-column grid.
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 1, 0.5, 1) easing
Smooth color and transform transitions on hover states · Staggered fade-in animations for text and UI elements
Color shifts on text and buttons, subtle elevation changes via shadows. · Immediate visual feedback with slight scaling or color depth changes.
08
Components
button High-contrast primary buttons (solid purple) and secondary buttons (ghost/outline) with subtle radius. card Clean cards with soft shadows and light borders, often containing UI mockups or data visualizations. chip N/A input Minimalist input fields with subtle bottom borders or light gray backgrounds and small radius. hero A split layout with a large headline and supporting text on the left, and feature list/visuals on the right. 09
Voice & Don'ts
Tone Authoritative, confident, and clear, positioning the platform as the industry standard. Headlines Concise, benefit-driven statements often using strong verbs and clear value propositions. CTAs Direct and action-oriented (e.g., 'Explore Payments', 'See pricing details') in high-contrast buttons. Don't use dark mode — the screenshot shows a bright, light-themed interface with a white primary background. Don't use overly playful or rounded fonts — the screenshot shows a professional, clean grotesque-sans typography. Don't use a chaotic or multi-colored palette — the screenshot shows a restrained palette dominated by white, deep blue, and a single purple accent. Don't use heavy, distracting backgrounds — the screenshot shows clean surfaces with very subtle gradients or solid colors. Don't use thick, heavy borders — the screenshot shows very thin, 1px borders in light gray or purple tones. Don't use complex, cluttered layouts — the screenshot shows generous whitespace and a clear, structured grid. Avoid: Hyperbolic marketing fluff Avoid: Confusing jargon without explanation Avoid: Cluttered or aggressive layouts 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Stripe's design DNA is that of a premium, developer-first fintech infrastructure provider, emphasizing clarity, reliability, and modern professionalism. The palette is clean and high-contrast, centered around a white background (#FFFFFF), deep navy ink (#061B31), and a vibrant purple accent (#533AFD), supported by soft neutral grays (#F8FAFD, #E5EDF5). Typography utilizes a clean grotesque-sans for both display and body text, prioritizing readability and a modern technical feel. Critical constraints: avoid dark mode interfaces, do not use overly playful or rounded fonts, and maintain generous whitespace with subtle, clean surfaces rather than heavy borders or aggressive visual elements.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: A benchmark for premium SaaS design, showcasing how to blend professional authority with modern, developer-friendly aesthetics through a restrained palette and clean typography.
浙ICP备2021038972号-5
