第五章：视觉设计

定义视觉系统和品牌风格

5.1 设计令牌 (Design Tokens)

颜色系统

品牌色

css

/* 主色 - Bioforest Green */
--primary: oklch(0.6 0.13 163);
--primary-foreground: oklch(0.98 0.02 166);

/* 深色模式 */
.dark {
  --primary: oklch(0.7 0.15 162);
  --primary-foreground: oklch(0.26 0.05 173);
}

语义色

用途	浅色模式	深色模式	使用场景
成功	`green-500`	`green-400`	交易成功、验证通过
警告	`yellow-500`	`yellow-400`	提醒、注意事项
错误	`red-500`	`red-400`	错误提示、危险操作
信息	`blue-500`	`blue-400`	一般提示

中性色

css

--background: oklch(1 0 0);           /* 页面背景 */
--foreground: oklch(0.145 0 0);       /* 主要文字 */
--muted: oklch(0.97 0 0);             /* 次级背景 */
--muted-foreground: oklch(0.556 0 0); /* 次级文字 */
--border: oklch(0.922 0 0);           /* 边框 */

字体系统

字体家族

字体	CSS 类	用途
DM Sans	`font-sans`	UI 文本、按钮、标签（默认）
DM Mono	`font-mono`	地址、金额、代码
DM Serif Display	`font-serif`	协议、提示、正式内容

字体大小

级别	大小	行高	使用场景
xs	12px	16px	辅助信息、时间戳
sm	14px	20px	次要文字、标签
base	16px	24px	正文、按钮文字
lg	18px	28px	小标题
xl	20px	28px	页面标题
2xl	24px	32px	金额显示
3xl	30px	36px	大额数字

间距系统

css

/* 基于 4px 网格 */
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;

使用规范：

组件内部间距：4px, 8px
组件之间间距：16px, 24px
区块之间间距：32px, 48px

圆角系统

用途	大小	使用场景
sm	4px	小按钮、标签
md	8px	输入框、卡片
lg	12px	大卡片、弹窗
xl	16px	底部弹窗
full	9999px	圆形按钮、头像

5.2 组件样式

按钮

变体

┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐
│   Primary       │  │   Secondary     │  │   Outline       │
│   主要操作      │  │   次要操作      │  │   边框按钮      │
└─────────────────┘  └─────────────────┘  └─────────────────┘

┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐
│   Ghost         │  │   Destructive   │  │   Link          │
│   幽灵按钮      │  │   危险操作      │  │   链接按钮      │
└─────────────────┘  └─────────────────┘  └─────────────────┘

尺寸

尺寸	高度	内边距	字体大小
sm	32px	12px	14px
md	40px	16px	14px
lg	48px	20px	16px

渐变按钮

css

.gradient-blue {
  background: linear-gradient(180deg, #6de7fe 0%, #44b5f7 100%);
}
.gradient-purple {
  background: linear-gradient(180deg, #a694f8 0%, #8970ff 100%);
}
.gradient-red {
  background: linear-gradient(180deg, #f77fa2 0%, #ea4879 100%);
}

卡片

钱包卡片

┌─────────────────────────────────────┐
│                                     │
│  ┌──┐  钱包名称                     │
│  │🔷│  0x71C7...976F    [复制]     │
│  └──┘                              │
│                                     │
│  ═══════════════════════════════   │
│                                     │
│    转账        铸造        收款     │
│                                     │
└─────────────────────────────────────┘

样式特点：

圆角 16px
阴影 shadow-md
背景渐变或纯色

资产卡片

┌─────────────────────────────────────┐
│  ┌──┐                               │
│  │🔶│  ETH                    10.5 │
│  └──┘  Ethereum              $2,100│
└─────────────────────────────────────┘

输入框

默认状态

┌───────────────────────────────────┐
│ 请输入地址                         │
└───────────────────────────────────┘

聚焦状态

┌───────────────────────────────────┐
│ 0x71C7656EC7ab88b098defB751B...   │  ← 边框高亮
└───────────────────────────────────┘

错误状态

┌───────────────────────────────────┐
│ invalid_address                   │  ← 红色边框
└───────────────────────────────────┘
  ⚠️ 地址格式不正确                     ← 错误提示

底部弹窗

┌─────────────────────────────────────┐
│                                     │
│           (页面内容变暗)             │
│                                     │
├─────────────────────────────────────┤
│          ━━━━━━━━━━━                │  ← 拖动指示条
│                                     │
│  选择链                              │  ← 标题
│                                     │
│  ○ Ethereum                         │
│  ● BSC                              │  ← 当前选中
│  ○ Tron                             │
│  ○ BFMeta                           │
│                                     │
│  ┌───────────────────────────────┐ │
│  │          确定                  │ │  ← 操作按钮（可选）
│  └───────────────────────────────┘ │
│                                     │
└─────────────────────────────────────┘

5.3 图标系统

图标来源

使用 Tabler Icons，React 组件：@tabler/icons-react

常用图标

功能	图标	名称
返回	←	`IconArrowLeft`
复制	📋	`IconCopy`
扫码	📷	`IconScan`
设置	⚙️	`IconSettings`
钱包	💼	`IconWallet`
发送	↗️	`IconSend`
接收	↙️	`IconDownload`
锁定	🔒	`IconLock`
警告	⚠️	`IconAlertTriangle`
成功	✅	`IconCheck`

图标尺寸

场景	尺寸	使用
按钮内图标	16px	小型按钮
列表项图标	20px	列表左侧图标
导航图标	24px	Tab Bar
状态图标	48px	空状态、结果页

5.4 深色模式

颜色映射

元素	浅色模式	深色模式
背景	`#ffffff`	`#0a0a0a`
前景	`#0a0a0a`	`#fafafa`
卡片	`#ffffff`	`#171717`
边框	`#e5e5e5`	`#262626`
次级文字	`#737373`	`#a3a3a3`

实现方式

css

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
}

切换逻辑

默认跟随系统
用户可手动切换
存储用户偏好

5.5 响应式设计

断点定义

断点	宽度	设备
xs	< 360px	小型手机
sm	360-414px	标准手机
md	414-600px	大屏手机
lg	600-840px	折叠屏展开
xl	> 840px	平板

容器查询

组件使用容器查询实现自适应：

tsx

<div className="@container">
  <div className={cn(
    "flex flex-col gap-2",           // 默认：垂直布局
    "@xs:flex-row @xs:gap-4",        // >320px：水平布局
    "@md:p-6"                        // >448px：更大内边距
  )}>
    {/* 内容 */}
  </div>
</div>

5.6 动画规范

时长

类型	时长	使用场景
快速	150ms	hover、focus
标准	200ms	展开、收起
中等	300ms	页面过渡
慢速	500ms	复杂动画

缓动函数

css

--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

常用动画

淡入

css

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

滑入

css

@keyframes slide-in-from-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

本章小结

设计令牌定义了颜色、字体、间距、圆角
组件样式包括按钮、卡片、输入框、弹窗
图标使用 Tabler Icons
支持深色模式
响应式设计使用容器查询
动画规范保证一致的交互体验

继续阅读第六章：设计原则，了解设计决策的指导原则。

第五章：视觉设计

链服务

平台服务

基础组件

通用组件

钱包组件

布局组件

第二十五章：Playwright 配置

第五章：视觉设计 ​

5.1 设计令牌 (Design Tokens) ​

颜色系统 ​

字体系统 ​

间距系统 ​

圆角系统 ​

5.2 组件样式 ​

按钮 ​

卡片 ​

输入框 ​

底部弹窗 ​

5.3 图标系统 ​

图标来源 ​

常用图标 ​

图标尺寸 ​

5.4 深色模式 ​

颜色映射 ​

实现方式 ​

切换逻辑 ​

5.5 响应式设计 ​

断点定义 ​

容器查询 ​

5.6 动画规范 ​

时长 ​

缓动函数 ​

常用动画 ​

本章小结 ​

下一章 ​

第五章：视觉设计

5.1 设计令牌 (Design Tokens)

颜色系统

字体系统

间距系统

圆角系统

5.2 组件样式

按钮

卡片

输入框

底部弹窗

5.3 图标系统

图标来源

常用图标

图标尺寸

5.4 深色模式

颜色映射

实现方式

切换逻辑

5.5 响应式设计

断点定义

容器查询

5.6 动画规范

时长

缓动函数

常用动画

本章小结

下一章