精選 · 開放 · 免費

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