OpenDesign·你的设计资产库

网页参考

Aave

大面积白色与浅紫色渐变形成轻量首屏,居中标题上方有小型产品标识。

Web3Defi
Aave 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 轻背景减少视觉噪音
  • 主次操作通过底色与边框区分

适合什么项目

  • 金融工具介绍
  • 简洁产品落地页

如何带进你的设计

  • 先用纯文本交代对象与用途
  • 对主次操作设置可识别差异而非只靠颜色

使用边界

  • 截图中的金融陈述不作为已核实业务事实或收益承诺
  • 仅依据已检查的历史预览;未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写,尚未经过人工终审;不代表原作者规范或使用授权。

01

设计气质 DNA

去中心化金融储蓄赚取收益移动应用协议

一个适配DeFi的、简洁现代的金融科技银行分支,专注于可访问性和信任感。

02

色彩

#9787FFAccent
#212121Ink
#636161Ink soft
#FFFFFFBG
#F3F3F8BG soft
#E0DFFFMuted
rgba(0,0,0,0.05)Line

在柔和、偏白的表面上使用高对比度的黑色,并以单一的鲜艳薰衣草色作为主要操作的点缀。

03

字体

geometric-sans · mono

  • display72px · 500
  • headline40px · 500
  • body16px · 400
  • caption14px · 500

大型展示文本使用紧凑的字间距(-3.6px)。 · 主要正文文本应使用400字重。 · 标题使用500字重。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
96px

8px基础网格,垂直堆叠,章节间留有充足的内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 8px
md · 12px
lg · 20px
pill · 9999px

使用rgba(0, 0, 0, 0.06)的极细微1px边框。

0 6px 20px rgba(0, 0, 0, 0.05) · 0 0 0 1px rgba(0, 0, 0, 0.06)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中单列主视觉区,首屏下方过渡到双列网格的功能卡片。

07

动效与交互

150msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

交互元素上的细微颜色和不透明度过渡(0.15秒)。 · 用于缩放或移动的变换过渡(0.2秒,缓出)。

按钮和链接上的细微背景色或不透明度变化。 · 即时反馈,可能是轻微的缩放或不透明度降低。

08

组件

  • button 高对比度的主按钮(薰衣草色背景,白色文字)和细微的次按钮(浅薰衣草色背景,紫色文字)。完全圆角(药丸形状)。
  • card 柔和、略带圆角的卡片(圆角12-20px),置于极细微的背景上,边框最小化。
  • chip 未突出展示,但标签类元素使用柔和的薰衣草色背景。
  • input 在提供的截图中不可见。
  • hero 一个居中、以文字为主的主视觉区,使用巨大的72px展示字体,配有描述性副标题和两个并排的行动号召按钮。

09

文案语气与禁用清单

  • 语气 自信、清晰,略带技术感但高度易懂。
  • 标题风格 简短、有力、以益处为导向的陈述(例如“人人皆可储蓄”、“最佳构建”)。
  • 按钮文案 以行动为导向且针对平台(例如“在iOS上下载”、“使用Aave”)。
  • 不要使用衬线字体——截图显示所有文本使用几何无衬线字体。
  • 不要将深色模式设为默认——截图显示界面以白色和浅灰色为主。
  • 不要在主要元素上使用尖锐的方形圆角——截图显示大量圆角药丸形状和柔和圆角。
  • 不要使用高对比度、饱和的红色或绿色作为点缀——截图使用柔和的薰衣草色作为主要点缀。
  • 不要将所有文本居中对齐——截图对正文和功能描述使用左对齐。
  • 不要使用投影营造深度感——截图使用极细微、低不透明度的边框或纯色差异来分隔区域。
  • 避免: 避免在无上下文时使用过于密集的金融术语。
  • 避免: 避免在界面上堆砌不必要的图标或边框。
  • 避免: 避免使用激进或霓虹灯般的调色板。

10

包内真实截图

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

11

System Prompt

Aave 是一个去中心化金融(DeFi)协议落地页,旨在呈现为一款高端、易用的金融科技移动应用。其设计DNA基于几何无衬线字体、高对比度的黑白色板,以及用于主要操作的单一鲜艳薰衣草色(#9787FF)点缀。布局简洁、宽敞,以巨大的主视觉标题为核心。关键约束:主要按钮始终使用完全圆角的“药丸”形状,界面严格采用浅色主题和柔和的偏白背景,并通过紧凑的大型展示字间距保持极致的排版层次。绝不引入杂乱的边框、深色背景或非几何字体风格。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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