精選 · 開放 · 免費

Safe

為鏈上資產打造的安全、模組化智慧錢包基礎設施。

web3wallet

Safe 網站截圖

↓ 下載設計系統包 (14 MB)在 OpenDesign 中開啟

原站: https://safe.global

📦 瀏覽包內檔案 →

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

display72px · 500
h240px · 400
body16px · 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

包內真實截圖

Safe — 桌面首屏（hero） — 桌面首屏（hero）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Safe — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

此設計代表一個安全的高階金融科技基礎設施平台（Safe）。採用簡潔的淺色調 UI（#F5F5F5 背景），以鮮明的霓虹綠強調色（#12FF80）為核心。字型採用幾何無襯線字體，大型標題使用緊湊字間距以創造大膽、權威的感受。佈局置中且寬裕，從明亮主視覺過渡至更深、資料豐富的區塊。關鍵限制：絕不為主要主視覺使用深色模式，務必採用膠囊狀按鈕樣式，並維持黑色（#1A1A1A）與霓虹綠的高對比搭配。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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