精選 · 開放 · 免費
Base
基於區塊鏈構建的極簡、高信賴金融科技平台。
CryptoL2
01
設計氣質 DNA
區塊鏈全球金融基礎設施開放機構級
區塊鏈領域的 AWS——基礎、企業級且無處不在。
02
色彩
#0052FFAccent
#171717Ink
#000000Ink soft
#FFFFFFBG
#F8F8F8BG soft
#9A9A9AMuted
rgba(229,231,235,1)Line
高對比極簡主義:純白背景搭配深黑色文字,單一高飽和度藍色用於主要操作。
03
字型
geometric-sans · humanist-sans · geometric-mono
- display
54px · 700 - body
16px · 400 - small
14px · 400
使用 baseSans 作為介面與主視覺文字 · 使用 Geist Mono 作為等寬元素與資料呈現 · 大型標題維持緊湊字間距
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準 4px 網格,大型區塊採用充裕垂直內距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
卡片與輸入框使用 1px solid rgb(229, 231, 235)
rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中內容容器,明確層級間距
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動元素採細微淡入與色彩過渡 · 懸停狀態使用變換過渡
色彩與邊框色過渡,0.15 秒 cubic-bezier 曲線 · 即時視覺回饋,無延遲狀態變化
08
組件
- button 高對比膠囊形主要按鈕(藍底白字),或帶邊框的次要變體
- card 潔白卡片,搭配細微邊框與清晰視覺區隔
- chip 簡約膠囊形標籤,採中性背景色
- input 乾淨邊框文字輸入框,明確內距
- hero 大型置中標題,搭配副文字與雙操作按鈕
09
文案語氣與禁用清單
- 語氣 自信、具機構感且前瞻性
- 標題風格 粗體、直接且具宣示性
- 按鈕文案 以行動為導向且清晰
- 勿使用深色模式——截圖顯示明亮白背景首頁區塊
- 勿使用裝飾性襯線字體——截圖顯示乾淨幾何無襯線標題
- 勿使用多色漸層——截圖顯示單一高飽和度藍色用於主要操作
- 勿使用厚重陰影——截圖顯示主要元件無明顯陰影或極簡陰影
- 勿使用混亂佈局——截圖顯示嚴格置中、網格對齊的層級佈局
- 勿使用狹窄間距——截圖顯示核心內容周圍充裕留白
- 避免: 俏皮語言
- 避免: 過度術語
- 避免: 複雜句式
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計高信賴機構級金融科技平台。採用純白背景與深黑色文字以最大化可讀性。主要品牌色為鮮明高飽和度藍色,專用於按鈕與連結等互動元素。排版應乾淨幾何,使用無襯線字體作為標題與內文,大型展示尺寸維持緊湊字間距以保持現代技術感。避免深色模式、俏皮美學或多色漸層。佈局必須置中、寬敞且嚴格網格對齊,傳達穩定與可靠性。按鈕等元件應採高對比膠囊形。重要禁忌:勿使用深色背景;勿使用裝飾性襯線字體;勿使用超過一種主要強調色。
en · zh-CN · zh-TW · ja · ko