OpenDesign·你的设计资产库

网页参考

Ledger

用于安全加密资产管理的高端硬件与软件钱包生态系统。

Web3Hardware
Ledger 网站截图

01

设计气质 DNA

加密货币硬件钱包安全去中心化信任

去中心化时代的数字金库

02

色彩

#FF5E00Accent
#FFFFFFInk
#000000BG
#949494Muted
rgba(255,255,255,0.1)Line

采用单一高能量强调色的高对比度单色方案,用于关键操作。

03

字体

geometric-sans · humanist-sans · monospace

  • display56px · 500
  • heading32px · 500
  • body16px · 400
  • caption13px · 400
  • label12px · 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

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

此设计代表一款高端、安全的金融科技产品,具体是一款加密硬件钱包生态系统。它采用鲜明、高对比度的单色方案(黑色 #000000 和白色 #FFFFFF),并使用一种高饱和度的橙色 (#FF5E00) 作为主要操作号召,搭配微妙的灰色 (#949494) 用于次要文本。排版采用粗壮的几何无衬线字体作为展示文本,以及人文主义无衬线字体作为正文,两者均以紧凑、现代的字间距呈现。关键设计约束包括:不要引入多种相互竞争的强调色,保持严格的深色模式美学,避免纤细或无力的排版,使用极简且清晰的边框代替柔和的阴影,避免过于圆润或俏皮的几何形状,并确保充足的留白以营造高端、整洁的质感。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。