精选 · 开放 · 免费

Stripe

一个简洁、高端的开发者优先金融科技平台，对渐变和高对比度排版进行了精细运用。

FintechEditorialPremiumGradient
Stripe 网站截图
↓ 下载设计系统包 (30 MB)在 OpenDesign 中打开

原站: https://stripe.com

📦 浏览包内文件 →

01

设计气质 DNA

支付基础设施全球化开发者优先可靠

互联网经济中可靠、无形的支柱。

02

色彩

#533AFDAccent
#061B31Ink
#50617AInk soft
#FFFFFFBG
#F8FAFDBG soft
#E5EDF5BG quiet
#64748DMuted
rgba(229, 237, 245, 1)Line

以深邃的墨蓝色和活力的紫色点缀为主导的简洁、高对比度调色板，辅以柔和的中性灰与动态渐变。

03

字体

grotesque-sans · monospace

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

采用4px基础网格的宽松垂直间距，确保清晰的视觉层次和可读性。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 8px
lg · 12px
pill · 999px

定义边缘和输入区域的纤细、微妙的边框，采用浅灰色或带紫色调的灰色。

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

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

一个宽幅、居中的容器，带有充裕的侧边距和结构化的多列网格。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing

悬停状态下的平滑颜色和变换过渡 · 文本和界面元素的交错淡入动画

文本和按钮上的颜色变化，通过阴影实现微妙的抬升效果。 · 通过轻微的缩放或颜色深度变化提供即时视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

Stripe — 桌面首屏（hero）
桌面首屏（hero）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Stripe — 移动首屏
移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

Stripe的设计DNA是一位高端、开发者优先的金融科技基础设施提供者，强调清晰度、可靠性和现代专业性。调色板简洁且高对比度，以白色背景（#FFFFFF）、深邃的墨蓝色（#061B31）和活力的紫色点缀（#533AFD）为中心，辅以柔和的中性灰（#F8FAFD, #E5EDF5）。排版使用简洁的 grotesque-sans，兼顾标题和正文，优先考虑可读性和现代科技感。关键约束：避免深色模式界面，不要使用过于俏皮或圆润的字体，保持充足的留白，采用微妙、简洁的表面而非厚重的边框或激进的视觉元素。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko