精选 · 开放 · 免费

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