精选 · 开放 · 免费
Uniswap
一个充满趣味且易于访问的去中心化交易平台,拥有干净、高对比度的设计。
cryptodefi
01
设计气质 DNA
去中心化易于访问趣味性透明金融
一个干净、友好的金融科技界面,感觉像现代银行应用,但具有加密原生美学。
02
色彩
#FF37C7Accent
#131313Ink
rgba(19, 19, 19, 0.63)Ink soft
#FFFFFFBG
#F9F9F9BG soft
rgba(19, 19, 19, 0.08)BG quiet
#222222Muted
rgba(19, 19, 19, 0.12)Line
以明亮、干净的基底色为主,搭配鲜艳的洋红色点缀和高对比度文本。
03
字体
Humanist Sans-Serif
- display
52px · 500 - headline
36px · 500 - body
16px · 485 - label
14px · 485 - small
18px · 485
所有文本使用系统字体栈(Basel, -apple-system, system-ui, sans-serif)。 · 展示标题大小设为52px,字重为500。 · 正文文本大小设为16px,字重为485。 · 大型展示文本使用-1px的负字间距。
04
间距
4px
8px
12px
16px
20px
24px
32px
48px
64px
整体采用4px基础网格,常用间距为8px、16px和24px。
05
表面 (圆角 / 阴影 / 边线)
sm · 12px
md · 20px
lg · 32px
pill · 999999px
1px solid rgba(19, 19, 19, 0.12)
rgba(19, 19, 19, 0.04) 0px 6px 12px -3px · rgba(19, 19, 19, 0.03) 0px 2px 5px -2px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
桌面端为单列居中布局,移动端扩展为全宽布局。
07
动效与交互
100msmicro
125mssmall
400msmedium
cubic-bezier(0.34, 1.56, 0.64, 1)easing
微交互使用0.1秒缓入缓出过渡。 · 变换和透明度变化使用0.08秒缓入缓出过渡。 · 交互元素使用0.4秒 cubic-bezier(0.34, 1.56, 0.64, 1) 弹簧动画。
交互元素在悬停时进行微妙的颜色偏移或背景透明度变化。 · 按钮和可点击卡片在点击时产生轻微的缩放或变换效果。
08
组件
- button 药丸形按钮,圆角32px,填充洋红色点缀色。
- card 卡片圆角20px,内边距12px,带有柔和阴影或浅灰色背景。
- chip 小型药丸形徽章,背景颜色浅,文本颜色与其类别匹配。
- input 大型圆角输入框,圆角12px,浅灰色背景。
- hero 一个突出的居中主视觉区域,包含52px大标题和主要的交换组件。
09
文案语气与禁用清单
- 语气 友好、易用、直接,让复杂的DeFi概念变得易于理解。
- 标题风格 大、加粗、清晰,通常使用一句有力的语句。
- 按钮文案 以行动为导向且突出,使用洋红色点缀色吸引注意力。
- 不要使用尖锐的小圆角——截图显示卡片和按钮的圆角在12px到32px之间。
- 不要使用深色背景作为主要画布——截图显示以白色(#FFFFFF)和浅灰色(#F9F9F9)为主的色板。
- 不要在整个界面使用高对比度的深色模式——截图显示的是带有高对比度文本的明亮主题。
- 不要为标题使用纤细、浅色的字体——截图显示52px标题使用500字重。
- 不要使用多种主色——截图显示仅使用一种主要的洋红色(#FF37C7)作为点缀色。
- 不要使用僵硬、过度依赖网格且带有粗边框的布局——截图显示使用柔和阴影和圆角进行视觉分隔。
- 避免: 充斥行话的语言
- 避免: 攻击性的营销语调
- 避免: 密集的文本块
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是Uniswap,一个去中心化金融平台。设计干净易用,采用明亮主题,背景为白色(#FFFFFF)和浅灰色(#F9F9F9)。主要点缀色为鲜艳的洋红色(#FF37C7)。字体使用人文主义无衬线字体(Basel),展示标题字重为500,大小为52px。关键禁忌:1)不要为主要UI使用深色背景。2)不要使用尖锐的圆角;使用大方的圆角(12px到32px)。3)不要为标题使用细字体;保持500字重。整体感觉是友好和有趣的,而非企业化或沉重。
en · zh-CN · zh-TW · ja · ko