精選 · 開放 · 免費
Column
一家國家特許銀行，用於建構與資助新型金融產品。
fintechbank
01
設計氣質 DNA
金融科技銀行業務基礎架構API擴展性
銀行界的 Stripe
02
色彩
#121620Ink
#7C7F88Ink soft
#F6F6F8BG
#FFFFFFBG soft
#7EADFFMuted
rgba(227, 228, 232, 1)Line
簡潔、高對比的中性色調，搭配單一藍色強調色。
03
字型
geometric-sans · monospace
- display
56px · 500 - body
16px · 400
04
間距
4px
8px
12px
16px
20px
24px
32px
48px
64px
96px
8px 基礎單位
05
表面 (圓角 / 陰影 / 邊線)
sm · 3px
md · 8px
lg · 12px
pill · 999px
1px solid #E3E4E8
rgba(1, 24, 33, 0.05) 0px 0px 0px 1px · rgba(17, 26, 74, 0.1) 0px 1px 3px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
12 欄格線系統
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing
細微的透明度淡出淡入。
細微的色彩轉換。 · 即時回應。
08
組件
- button 極簡風格，採用文字按鈕或幽靈按鈕。
- card 細微陰影與邊框。
- chip 簡潔的圓角標籤。
- input 標準表單元素。
- hero 分割佈局，搭配標題與插圖。
09
文案語氣與禁用清單
- 語氣 專業且具權威性。
- 標題風格 簡短、有力、以價值為導向。
- 按鈕文案 清晰直接。
- 請勿使用裝飾性圖樣——截圖顯示的是簡潔的點狀世界地圖。
- 請勿使用厚重的陰影效果——截圖顯示的是非常細微、分層的 box shadow。
- 請勿使用斜體文字——截圖僅顯示常规與粗體字重。
- 請勿使用多種強調色——截圖顯示的是以藍色為基調的色板。
- 請勿使用圓角卡片——截圖顯示的是直角或微圓角。
- 請勿使用過於活潑的字型——截圖顯示的是專業的幾何無襯線體。
- 避免: 術語
- 避免: 模糊的承諾
- 避免: 複雜的語言
10
包內真實截圖
桌面首屏（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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計是一個高端、面向開發者的金融科技平台。關鍵色彩包括淺灰色（#F6F6F8）背景、深海軍藍（#121616）文字，以及亮藍色（#7EADFF）強調色。字型採用幾何無襯線體作為標題與內文，搭配等寬字體用於程式碼片段。重要注意事項：避免厚重陰影，避免活潑字型，避免複雜裝飾元素，避免低對比，避免鮮豔或霓虹色彩，以及避免過於圓潤的形狀。
en · zh-CN · zh-TW · ja · ko