01
设计气质 DNA
去中心化易于访问趣味性透明金融
一个干净、友好的金融科技界面，感觉像现代银行应用，但具有加密原生美学。
02
色彩
#FF37C7Accent#131313Inkrgba(19, 19, 19, 0.63)Ink soft#FFFFFFBG#F9F9F9BG softrgba(19, 19, 19, 0.08)BG quiet#222222Mutedrgba(19, 19, 19, 0.12)Line以明亮、干净的基底色为主，搭配鲜艳的洋红色点缀和高对比度文本。
03
字体
- 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
间距
4px8px12px16px20px24px32px48px64px整体采用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
包内真实截图
11
System Prompt
这是Uniswap，一个去中心化金融平台。设计干净易用，采用明亮主题，背景为白色（#FFFFFF）和浅灰色（#F9F9F9）。主要点缀色为鲜艳的洋红色（#FF37C7）。字体使用人文主义无衬线字体（Basel），展示标题字重为500，大小为52px。关键禁忌：1）不要为主要UI使用深色背景。2）不要使用尖锐的圆角；使用大方的圆角（12px到32px）。3）不要为标题使用细字体；保持500字重。整体感觉是友好和有趣的，而非企业化或沉重。