← OpenDesign 精選 · 開放 · 免費
Modern Treasury
為開發者打造的支付編排 API。
fintech saas
01
設計氣質 DNA
基礎設施 支付 API 金融科技
資金流動的清晰建築藍圖。
02
色彩
#29735CAccent
#151515Ink
rgba(21, 21, 21, 0.8)Ink soft
#FFFFFFBG
#F8F5F4BG soft
#F0F8F9BG quiet
rgba(0, 0, 0, 0.5)Muted
高對比中性色調，搭配單一可信賴的綠色強調色。
03
字型
grotesque-sans · humanist-sans · monospace
display 48px · 500h2 32px · 400body 16px · 400caption 14px · 40004
間距
4px
8px
16px
24px
32px
48px
64px
96px
4px 格線
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(21, 21, 21, 0.8)
inset 0 0 0 1px rgb(21, 21, 21) · 0 20px 25px -5px lab(0 0 0 / 0.04) · 0 4px 6px -1px rgba(0, 0, 0, 0.1)
06
版面
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
置中內容區塊，文字區最大寬度 680px。
07
動效與互動
150ms micro
200ms small
400ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
顏色過渡 · 背景顏色過渡 · 邊框顏色過渡 · 填充過渡
平滑顏色過渡 · 即時反饋
08
組件
button 圓角矩形，採用實心深色背景搭配淺色文字或邊框描邊。 card 實色區塊，具細微內邊距與圓角。 chip 小型矩形標籤，搭配等寬字體與淺色背景。 input 簡潔矩形欄位，具細微邊框。 hero 置中的大型排版，搭配明確的行動呼籲。 09
文案語氣與禁用清單
語氣 專業、以開發者為中心、效率導向。 標題風格 簡短、行動導向的陳述。 按鈕文案 直接且具吸引力。 不要使用柔軟、圓潤的「親和」形狀 — 截圖顯示的是銳利、矩形的 UI 元件 不要使用原色如亮紅或亮藍 — 截圖顯示的是黑、白、綠的克制色盤 不要使用裝飾性襯線字體 — 截圖顯示的是簡潔、現代的無襯線排版 不要使用繁雜、多彩的漸層 — 截圖顯示的是實色區塊與簡約格線背景 不要使用俏皮或卡通化的插圖 — 截圖顯示的是技術圖表與簡潔數據視覺化 不要使用過度陰影 — 截圖顯示的是扁平化表面與最小深度 避免: 行銷術語 避免: 模糊承諾 10
包內真實截圖
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 擷取自真實頁面 · 真 computed styles
11
System Prompt
Modern Treasury 是一個為開發者打造的優質金融科技 SaaS 平台，具備簡潔、專業的介面。設計採用白色與近黑色的鮮明色調，以特定品牌綠色（#29735C）為基調。排版嚴格使用無襯線字體，優先考量易讀性與層級結構。關鍵限制：避免俏皮形狀、避免原色、避免裝飾性襯線、避免繁雜漸層、避免卡通化插圖、避免過度陰影。聚焦於技術清晰度與效率。
更多精選 en · zh-CN · zh-TW · ja · ko
