精选 · 开放 · 免费

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

变换上使用有弹性的、弹跳感的缓动，营造俏皮感。 · 元素过渡时使用平滑的透明度渐隐。 · 交错入场动画使用缓动延迟。

交互元素上微妙的变换和颜色变化。 · 除了标准聚焦状态外，视觉反馈极小。

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) 以形成高对比度。排版应混合使用超粗的几何展示字体（用于巨大标题）和清晰的几何无衬线字体（用于正文）。关键交互应具有弹跳和弹性的感觉。关键点：绝不要使用纤细字体作为标题；始终使用胶囊形按钮；避免默认深色模式；保持布局宽敞，文字要大；不要给卡片添加厚重的阴影；确保颜色充满活力且高对比度。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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