精選 · 開放 · 免費
OpenSea
用於瀏覽與交易數位資產的高密度深色模式儀表板。
Web3NFT
01
設計氣質 DNA
市集交易收藏品數位資產web3
現代化的繁華數位拍賣場
02
色彩
#0786FFAccent
#FFFFFFInk
#ACADA6Ink soft
#141415BG
#26272DBG soft
#1B1D1FBG quiet
#47BB64Muted
rgba(255,255,255,0.08)Line
深灰底色搭配高對比白色，以實現最佳的資料可讀性。
03
字型
grotesque-sans · monospace
- display
32px · 500 - heading
20px · 500 - body
16px · 400 - small
14px · 400 - caption
12px · 400
04
間距
4px
8px
12px
16px
24px
32px
48px
64px
96px
一致的 4px 格線系統
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(255,255,255,0.08)
0px 1px 2px 0px rgba(0,0,0,0.03) · 0px 1px 3px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 1px rgba(255,255,255,0.08)
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
具備左側側邊欄與右側排名面板的緊湊資料儀表板。
07
動效與互動
150msmicro
200mssmall
400msmedium
cubic-bezier(0.22, 1, 0.36, 1)easing
懸停時的透明度漸變 · 互動時的縮放效果 · 線性漸層變化
背景色調變與細微的透明度變化 · 透過縮放或顏色變化提供即時視覺回饋
08
組件
- button 高對比的主要按鈕採用藥丸造型，次要按鈕則為矩形。
- card 採用細微邊框與圓角的深色表面卡片。
- chip 用於篩選、具細微背景填充的小型圓角標籤。
- input 帶有醒目捷徑提示的深色圓角搜尋欄位。
- hero 大型全寬輪播區，展示精選系列並疊加數據資訊。
09
文案語氣與禁用清單
- 語氣 專業、數據驅動且直接明瞭
- 標題風格 粗體且簡潔，聚焦於關鍵指標
- 按鈕文案 強調行動且高度可見
- 勿使用亮白色背景——截圖顯示以 #141415 為基礎的深色主題
- 勿使用襯線字體——截圖顯示的是簡潔、現代的 grotesque-sans 字體
- 勿四處使用鮮豔的多色調——截圖顯示綠色與紅色僅專門用於正/負向指標
- 勿使用寬鬆、大面積的留白——截圖顯示的是資訊密集的緊湊儀表板佈局
- 勿使用複雜、厚重的陰影——截圖顯示的是非常細微或無框陰影
- 勿使用大圓角的輸入框——截圖顯示的輸入框圓角為 16-20px，並非完全的藥丸造型（除非特別指定）
- 避免: 俏皮的語言
- 避免: 過多的驚嘆號
- 避免: 缺乏脈絡的技術術語
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
OpenSea 是領先的 NFT 數位市集，採用高密度深色模式儀表板介面設計。主色調為深色背景 (#141415)，搭配清晰的白色文字 (#FFFFFF) 與細微的灰色 (#ACADA6) 用於次要資訊。正向趨勢以綠色 (#47BB64) 表示，負向則以紅色 (#E24756) 表示。字體採用簡潔、現代的 grotesque sans-serif 字體 (gtAmerica)，數值資料則使用其等寬變體 (gtAmericaMono)。佈局複雜且以資料為導向，採用多欄結構，配有常駐的左側側邊欄與緊湊的右側排名面板。關鍵設計規則：永不使用淺色背景；優先資訊密度而非留白；顏色嚴格用於語義表達（綠/紅代表數據）；維持專業、極簡的美學，避免裝飾性元素。關鍵禁止事項：避免不必要的動畫；避免寬鬆、空曠的間距；避免使用與資料導向介面不協調的俏皮或圓潤 UI 元素。
en · zh-CN · zh-TW · ja · ko