精选 · 开放 · 免费
Ledger
用于安全加密资产管理的高端硬件与软件钱包生态系统。
web3hardware
01
设计气质 DNA
加密货币硬件钱包安全去中心化信任
去中心化时代的数字金库
02
色彩
#FF5E00Accent
#FFFFFFInk
#000000BG
#949494Muted
rgba(255,255,255,0.1)Line
采用单一高能量强调色的高对比度单色方案,用于关键操作。
03
字体
geometric-sans · humanist-sans · monospace
- display
56px · 500 - heading
32px · 500 - body
16px · 400 - caption
13px · 400 - label
12px · 600
使用几何无衬线字体打造有冲击力的现代标题 · 使用人文主义无衬线字体确保正文的高可读性 · 为大型展示文本应用紧凑的负字间距,营造大胆、高端的质感
04
间距
4px
8px
12px
16px
24px
32px
48px
64px
96px
基于 4px 的一致网格,提供紧凑、可控的垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用低透明度的微妙白色或灰色的 1px 细实线边框。
rgba(255,255,255,0.1) 0px -2px 1px 0px inset · rgba(0,0,0,0.25) 0px 2.4px 2.4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
非对称分栏主视觉布局,包含宽容器和用于可读性的窄内容列。
07
动效与交互
200msmicro
300mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
背景颜色和基本变换的标准过渡 · 用于显示效果的平滑透明度渐变 · 滚动时的背景渐变过渡
交互元素上的背景颜色变化或微妙的透明度调整。 · 通过背景颜色更新或缩放变换提供即时视觉反馈。
08
组件
- button 胶囊形主要按钮,采用高对比度橙色背景;次要按钮为基于文本的箭头样式。
- card 推荐卡片采用 1px 细边框,在深色背景上留有充足的内部填充。
- chip 小型大写分类标签,封装在简单的带边框容器中。
- input 极简、深色主题的输入框,旨在与背景融为一体。
- hero 全宽区域,由渐变背景上的大型产品视觉主导,搭配一个左对齐的大胆排版块。
09
文案语气与禁用清单
- 语气 权威、安全、赋能。
- 标题风格 直接、面向行动、以利益为导向。
- 按钮文案 清晰且具有命令性,常与方向箭头配合使用。
- 不要使用圆润、俏皮的形状——截图显示的是精确的胶囊按钮和几何图标。
- 不要使用浅色或白色背景——截图显示的是贯穿始终的主导性深黑色背景。
- 不要使用纤细、无力的排版——截图显示的是粗壮、字间距紧凑的几何无衬线标题。
- 不要使用多种多样的强调色——截图显示的是严格的单色方案,仅有一个橙色强调色。
- 不要使用柔和、模糊的投影——截图显示的是极简、清晰的内边框阴影和 1px 细边框。
- 不要使用狭小、拥挤的容器——截图显示的是充足的留白和宽阔、开放的布局。
- 避免: 过于专业或复杂的技术语言
- 避免: 削弱安全性的俏皮或随意语气
- 避免: 视觉杂乱或不必要的装饰元素
- 避免: 影响可读性的低对比度文本
- 避免: 通用或无品牌特色的图像
- 避免: 突兀或刺耳的过渡效果
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计代表一款高端、安全的金融科技产品,具体是一款加密硬件钱包生态系统。它采用鲜明、高对比度的单色方案(黑色 #000000 和白色 #FFFFFF),并使用一种高饱和度的橙色 (#FF5E00) 作为主要操作号召,搭配微妙的灰色 (#949494) 用于次要文本。排版采用粗壮的几何无衬线字体作为展示文本,以及人文主义无衬线字体作为正文,两者均以紧凑、现代的字间距呈现。关键设计约束包括:不要引入多种相互竞争的强调色,保持严格的深色模式美学,避免纤细或无力的排版,使用极简且清晰的边框代替柔和的阴影,避免过于圆润或俏皮的几何形状,并确保充足的留白以营造高端、整洁的质感。
en · zh-CN · zh-TW · ja · ko