精選 · 開放 · 免費

MetaMask

一個穩健且獨特的加密貨幣錢包介面，平衡技術可信度與表現力強、大膽的品牌形象。

web3wallet
MetaMask 網站截圖
↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://metamask.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

加密貨幣錢包web3鏈上隱私

一個大膽、幾何感的去中心化金融入口，融合技術精準度與親和、俏皮的美學。

02

色彩

#0A0A0AInk
#3D065FInk soft
#FFF0E6BG
#E5FFC3BG soft
#F7F9FCBG quiet
#573D46Muted
rgba(10,10,10,0.1)Line

一個大膽、高對比的調色板，使用表現力強、飽和的色彩對比柔和的粉彩色調，以創造視覺趣味。

03

字型

geometric-sans · monospace

標題使用極度緊湊的行高與字距以營造衝擊力。 · 內文保持高易讀性與標準字重。 · UI 標籤與導覽使用中等字重。

04

間距

4px
8px
16px
24px
32px
48px
64px
96px

一個一致的 4px 基礎網格，搭配線性縮放，以實現可預測、和諧的間距。

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px
md · 8px
lg · 12px
pill · 999px

極簡，依賴背景色對比與強調排版來進行區隔。

rgb(204, 204, 204) 0px 0px 2px 2px · rgb(128, 128, 128) 0px 0px 5px 0px

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

一個置中、以欄位驅動的版面，具有大型、富有表現力的首頁區域與網格式的功能展示。

07

動效與互動

137msmicro
367mssmall
550msmedium
cubic-bezier(0.4, 1.35, 0.5, 0.97)easing

變換上的彈跳、彈性緩動，營造俏皮感。 · 元素過渡時的平滑透明度淡出。 · 錯落進入動畫的緩動延遲。

互動元素上的微小變換與顏色變化。 · 除標準 focus 狀態外，提供最小化的視覺回饋。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

MetaMask — 桌面首屏（hero）
桌面首屏（hero）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

設計一個大膽、富有表現力的 Web3 產品網站，既要感覺技術可信，又要感覺親和俏皮。使用以柔和蜜桃色 (#FFF0E6) 與萊姆色 (#E5FFC3) 為背景的核心調色板，搭配深紫色 (#3D065F) 與深青色 (#013330) 以實現高對比。排版應混合使用超粗體的幾何展示字體（用於巨型標題）與乾淨的幾何無襯線字體（用於內文）。關鍵互動應具有彈跳感與彈性。重要：永遠不要為標題使用纖細字體；始終使用藥丸形按鈕；避免預設暗色模式；保持版面寬敞，文字要大；不要為卡片添加厚重陰影；確保顏色 vibrant 且高對比。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko