精選 · 開放 · 免費
Safe
為鏈上資產打造的安全、模組化智慧錢包基礎設施。
web3wallet
01
設計氣質 DNA
資安基礎設施多重簽名智慧錢包鏈上
數位資產的工業級金庫,透過簡潔臨床風介面呈現。
02
色彩
#12FF80Accent
#1A1A1AInk
rgba(26,26,26,0.6)Ink soft
#F5F5F5BG
#FFFFFFBG soft
#999999Muted
rgba(26,26,26,0.1)Line
以霓虹綠強調色為核心的高對比淺色 UI。
03
字型
geometric-sans · sans-serif
- display
72px · 500 - h2
40px · 400 - body
16px · 400
主要字型採用幾何無襯線字體,在大型展示尺寸使用緊湊字間距。 · 文字顏色使用近純黑(#1A1A1A)搭配淺色背景。 · 次要文字降低不透明度以建立視覺層次。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
充足的垂直內距與一致的 4px 格線間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 16px
pill · 999px
細緻 1px 邊框,使用低飽和黑或白進行結構性分隔。
0px 4px 4px 0px rgba(0,0,0,0.06)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
內容置中並限制最大寬度,過渡至全寬深色區塊。
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
UI 元素細微淡入效果 · 按鈕與連結懸停時的平滑過渡 · 資料呈現的層疊動畫
按鈕背景色偏移;文字連結不透明度變化。 · 細微縮放或不透明度調整。
08
組件
- button 膠囊狀主要按鈕採用亮綠背景與黑色文字;次要按鈕採用細邊框。
- card 極簡卡片搭配細微陰影或細邊框,常包含複雜 UI 模型。
- chip 小型圓角標籤,用於網路或狀態指示。
- input 簡潔的無邊框或細邊框輸入欄位,搭配寬大內距。
- hero 巨大字體置中於浮動應用程式介面模型上方。
09
文案語氣與禁用清單
- 語氣 權威、安全且技術精確。
- 標題風格 大膽、宣言式語句,聚焦資安與基礎設施。
- 按鈕文案 直接且以行動為導向,常見如「啟動應用」或「開始使用」。
- 勿為主要主視覺區塊使用深色主題——截圖顯示淺灰(#F5F5F5)背景。
- 勿為主要按鈕套用圓角——截圖顯示膠囊狀(完全圓形)按鈕。
- 勿使用細緻淺色字體作為標題——截圖顯示厚重幾何無襯線字體作為展示文字。
- 勿使用多彩強調色調色盤——截圖顯示單一主導霓虹綠(#12FF80)強調色。
- 勿為卡片使用厚重方塊陰影——截圖顯示極其細膩、近乎平面的表面深度。
- 勿在標題使用寬字間距——截圖顯示大型展示文字採用緊湊、負字間距。
- 避免: 遊戲化語言
- 避免: 模糊行銷術語
- 避免: 脫離脈絡的過度技術詞彙
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 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
此設計代表一個安全的高階金融科技基礎設施平台(Safe)。採用簡潔的淺色調 UI(#F5F5F5 背景),以鮮明的霓虹綠強調色(#12FF80)為核心。字型採用幾何無襯線字體,大型標題使用緊湊字間距以創造大膽、權威的感受。佈局置中且寬裕,從明亮主視覺過渡至更深、資料豐富的區塊。關鍵限制:絕不為主要主視覺使用深色模式,務必採用膠囊狀按鈕樣式,並維持黑色(#1A1A1A)與霓虹綠的高對比搭配。
en · zh-CN · zh-TW · ja · ko