HarmonyOS ArkTS 设计系统构建实战指南

引言

在现代应用开发中，设计系统（Design System）已经成为提升开发效率、保证产品一致性的关键基础设施。一套优秀的设计系统不仅能够加快开发速度，还能确保应用在视觉和交互上保持统一，为用户提供一致的使用体验。

HarmonyOS作为新一代操作系统，其应用开发语言ArkTS对设计系统提出了更高的要求。本文将详细介绍如何设计和实现一套完整的HarmonyOS应用样式系统，涵盖颜色方案、间距规范、字体体系、圆角系统、阴影效果等核心设计元素。

---

一、设计系统概述

1.1 什么是设计系统

设计系统是一套完整的设计语言和组件库，它包含：

• 设计原则：指导所有设计决策的核心准则
• 设计令牌：存储设计决策的原子单位（颜色、间距、字体等）
• 组件库：可复用的UI组件
• 模式库：常见交互模式的集合
• 文档：设计规范的说明文档

1.2 为什么需要设计系统

1.2.1 提升开发效率

设计系统将常用的设计决策预先定义好，开发人员可以直接使用，无需每次都从头开始设计。

// 没有设计系统时
Row()
  .padding({ left: 16, right: 16, top: 12, bottom: 12 })
  .backgroundColor('#FFFFFF')
  .borderRadius(8)

// 使用设计系统后
Card({ padding: 'md' })

1.2.2 保证产品一致性

统一的视觉语言让用户在使用不同功能时感到熟悉和舒适。

1.2.3 简化维护工作

当需要修改设计风格时，只需在设计系统中修改一处，所有使用该样式的组件都会自动更新。

1.3 设计系统文件结构

common/
├── design/
│   ├── system.ets      # 设计令牌定义
│   ├── colors.ets       # 颜色系统
│   ├── typography.ets  # 字体系统
│   ├── spacing.ets     # 间距系统
│   └── index.ets       # 统一导出
└── utils/
    └── ...

---

二、颜色系统设计

2.1 颜色系统的重要性

颜色是用户界面中最直观的设计元素，好的颜色系统应该：

• 符合产品定位和品牌调性
• 具有良好的可访问性（对比度足够）
• 支持明暗主题切换
• 颜色数量适中，便于记忆和使用

2.2 颜色分类

2.2.1 主色（Primary）

主色是产品最具代表性的颜色，用于主要按钮、链接等关键元素：

export const primaryColors = {
  primary: '#007DFF',      // 品牌主色
  'primary-light': '#66B3FF',  // 浅色变体
  'primary-dark': '#005EB8'    // 深色变体
};

使用场景：

• 主要操作按钮
• 链接文字
• 选中状态
• 进度指示

2.2.2 功能色（Semantic）

功能色传达特定的语义信息，让用户快速理解界面元素含义：

export const semanticColors = {
  success: '#2ED573',   // 成功状态
  warning: '#FFA502',   // 警告状态
  error: '#FF4757',      // 错误状态
  info: '#3498DB'        // 信息提示
};

语义对应：

颜色	语义	典型应用
绿色 #2ED573	成功、完成	成功提示、确认按钮
橙色 #FFA502	警告、注意	警告提示、次要操作
红色 #FF4757	错误、危险	错误提示、删除操作
蓝色 #3498DB	信息、帮助	说明文字、链接

2.2.3 中性色（Neutral）

中性色用于文字和界面元素，是构建界面层次的重要基础：

export const neutralColors = {
  'text-primary': '#1C1C1E',    // 主要文字
  'text-secondary': '#666666',  // 次要文字
  'text-tertiary': '#98989A',  // 辅助文字
  'text-placeholder': '#CCCCCC' // 占位文字
};

文字层级建议：

颜色	对比度	适用场景
#1C1C1E	16:1	正文内容、标题
#666666	6:1	次要说明文字
#98989A	4.5:1	辅助信息、标签
#CCCCCC	2.5:1	占位符、禁用状态

2.2.4 背景色（Background）

背景色定义界面的基础层级：

export const backgroundColors = {
  'bg-primary': '#FFFFFF',    // 主要背景
  'bg-secondary': '#F5F5F7', // 次要背景
  'bg-tertiary': '#F0F0F2',   // 第三级背景
  'bg-elevated': '#FAFAFA'   // 悬浮元素背景
};

2.2.5 边框色（Border）

边框色用于分隔和界定元素边界：

export const borderColors = {
  'border-default': '#E0E0E0',  // 默认边框
  'border-light': '#F0F0F0',     // 浅色边框
  'border-dark': '#CCCCCC',      // 深色边框
  'border-focus': '#007DFF'     // 聚焦边框
};

2.2.6 渐变色（Gradient）

渐变色用于特殊场景，增加视觉吸引力：

export const gradientColors = {
  'gradient-primary': 'linear-gradient(135deg, #007DFF, #00B4D8)',
  'gradient-success': 'linear-gradient(135deg, #2ED573, #00D9A5)',
  'gradient-warning': 'linear-gradient(135deg, #FFA502, #FF6B35)',
  'gradient-dark': 'linear-gradient(135deg, #1C1C1E, #2D2D30)'
};

2.3 深色模式支持

现代应用需要支持深色模式，设计系统应该预留扩展空间：

export const darkModeColors = {
  'text-primary': '#FFFFFF',
  'text-secondary': '#B0B0B0',
  'bg-primary': '#1C1C1E',
  'bg-secondary': '#2D2D30'
};

2.4 颜色使用接口设计

export interface ColorItem {
  name: string;      // 颜色名称
  value: string;     // 颜色值
  description: string; // 颜色说明
}

export interface ColorPalette {
  name: string;      // 色板名称
  colors: ColorItem[]; // 颜色列表
}

---

三、间距系统设计

3.1 间距系统基础

间距系统是构建界面节奏感的关键，合理的间距让界面既有呼吸感又不显得松散。

3.2 间距规范

采用4px为基础单位的间距系统：

export const spacingTokens = [
  { name: 'xs', value: '4px', size: 4 },
  { name: 'sm', value: '8px', size: 8 },
  { name: 'md', value: '12px', size: 12 },
  { name: 'lg', value: '16px', size: 16 },
  { name: 'xl', value: '20px', size: 20 },
  { name: '2xl', value: '24px', size: 24 },
  { name: '3xl', value: '32px', size: 32 },
  { name: '4xl', value: '40px', size: 40 },
  { name: '5xl', value: '48px', size: 48 },
  { name: '6xl', value: '64px', size: 64 }
];

3.3 间距使用场景

间距	典型应用
4px	紧凑列表元素内间距
8px	标签内文字与边框间距
12px	列表项内元素间距
16px	卡片内边距、列表项间距
20px	区块标题与内容间距
24px	区块之间间距
32px	大区块间距
40px	页面内主要区块间距
48px	页面级间距
64px	超大间距

3.4 间距系统实现

export function getSpacing(name: string): number {
  const spacingMap: Record<string, number> = {
    'xs': 4,
    'sm': 8,
    'md': 12,
    'lg': 16,
    'xl': 20,
    '2xl': 24,
    '3xl': 32,
    '4xl': 40,
    '5xl': 48,
    '6xl': 64
  };
  return spacingMap[name] || 16;
}

---

四、字体系统设计

4.1 字体层级

字体层级通过大小、粗细、行高的组合传达信息的重要性和层级关系：

export const fontSizeTokens = [
  { name: 'xs', value: '10px', size: 10, lineHeight: 14 },
  { name: 'sm', value: '12px', size: 12, lineHeight: 16 },
  { name: 'base', value: '14px', size: 14, lineHeight: 20 },
  { name: 'lg', value: '16px', size: 16, lineHeight: 22 },
  { name: 'xl', value: '18px', size: 18, lineHeight: 26 },
  { name: '2xl', value: '20px', size: 20, lineHeight: 28 },
  { name: '3xl', value: '24px', size: 24, lineHeight: 32 },
  { name: '4xl', value: '28px', size: 28, lineHeight: 36 },
  { name: '5xl', value: '32px', size: 32, lineHeight: 40 },
  { name: '6xl', value: '40px', size: 40, lineHeight: 48 }
];

4.2 字体层级应用

标题系统

级别	字号	行高	使用场景
H1	28px	36px	页面主标题
H2	24px	32px	页面分段标题
H3	20px	28px	卡片标题
H4	18px	26px	区块标题

正文字体

级别	字号	行高	使用场景
正文大	16px	24px	重要正文内容
正文	14px	20px	标准正文内容
正文小	12px	16px	次要正文内容

辅助字体

级别	字号	行高	使用场景
标签	12px	16px	标签文字
说明	12px	16px	说明文字
辅助	10px	14px	最小辅助文字

4.3 字体粗细

export const fontWeights = {
  'thin': 100,
  'light': 300,
  'regular': 400,
  'medium': 500,
  'semibold': 600,
  'bold': 700,
  'extrabold': 800,
  'black': 900
};

推荐使用：

• Regular (400)：正文内容
• Medium (500)：按钮文字、标签
• Semibold (600)：小标题
• Bold (700)：大标题

4.4 行高规范

行高应该根据字号进行调整：

// 行高计算公式：lineHeight = fontSize + (fontSize * ratio)
// 小字号使用较大比例（1.4-1.6）
// 大字号使用较小比例（1.2-1.4）

export function calculateLineHeight(fontSize: number): number {
  if (fontSize <= 14) {
    return fontSize + 6; // 比例约1.4
  } else if (fontSize <= 20) {
    return fontSize + 8; // 比例约1.4
  } else {
    return fontSize + 10; // 比例约1.3
  }
}

---

五、圆角系统设计

5.1 圆角层级

圆角赋予界面柔和感和现代感：

export const radiusTokens = [
  { name: 'none', value: '0px', size: 0 },
  { name: 'sm', value: '4px', size: 4 },
  { name: 'md', value: '6px', size: 6 },
  { name: 'base', value: '8px', size: 8 },
  { name: 'lg', value: '10px', size: 10 },
  { name: 'xl', value: '12px', size: 12 },
  { name: '2xl', value: '16px', size: 16 },
  { name: '3xl', value: '20px', size: 20 },
  { name: 'full', value: '9999px', size: 9999 }
];

5.2 圆角应用规范

圆角值	适用场景
0px	分割线、无圆角元素
4px	小按钮、标签
8px	标准按钮、卡片、输入框
12px	大卡片、弹窗
16px	大弹窗、模态框
20px	特殊大圆角
9999px	药丸形按钮、头像

5.3 圆角使用原则

5.3.1 一致性原则

同类元素使用相同的圆角值，保持视觉一致性。

// 所有主要按钮使用相同的圆角
Button({ text: '主要按钮' })
  .borderRadius(8) // 基础圆角

Button({ text: '次要按钮' })
  .borderRadius(8) // 保持一致

5.3.2 层级原则

越大的元素通常使用越大的圆角，传达层次感。

// 页面级卡片
Card()
  .borderRadius(16) // 大圆角

// 列表项
ListItem()
  .borderRadius(8) // 中等圆角

// 小标签
Tag()
  .borderRadius(4) // 小圆角

5.3.3 形状语义

特殊形状传达特定含义：

// 药丸形 - 连续、可循环
Row()
  .borderRadius(9999) // 药丸形
  .backgroundColor('#007DFF')

// 圆形 - 完整、单一
Circle()
  .borderRadius(50) // 圆形
  .backgroundColor('#2ED573')

---

六、阴影系统设计

6.1 阴影层级

阴影是创建界面层次和深度感的重要手段：

export const shadowTokens = [
  { 
    name: 'shadow-sm', 
    value: '0 1px 2px rgba(0, 0, 0, 0.05)',
    description: '小阴影，适用于轻微悬浮' 
  },
  { 
    name: 'shadow-base', 
    value: '0 2px 4px rgba(0, 0, 0, 0.1)',
    description: '基础阴影，适用于卡片' 
  },
  { 
    name: 'shadow-md', 
    value: '0 4px 8px rgba(0, 0, 0, 0.12)',
    description: '中等阴影，适用于弹窗' 
  },
  { 
    name: 'shadow-lg', 
    value: '0 8px 16px rgba(0, 0, 0, 0.15)',
    description: '大阴影，适用于大弹窗' 
  },
  { 
    name: 'shadow-xl', 
    value: '0 16px 32px rgba(0, 0, 0, 0.2)',
    description: '超大阴影，适用于特殊场景' 
  }
];

6.2 阴影参数解析

6.2.1 X轴偏移（offsetX）

控制阴影的水平位置：

• 0：阴影垂直于元素下方
• 正值：阴影向右偏移
• 负值：阴影向左偏移

6.2.2 Y轴偏移（offsetY）

控制阴影的垂直位置：

• 正值：阴影向下偏移（最常用）
• 负值：阴影向上偏移

6.2.3 模糊半径（blur）

阴影边缘的模糊程度：

• 0-4px：小阴影，边缘清晰
• 4-8px：中等阴影，轻微模糊
• 8-16px：大阴影，明显模糊
• 16px+：超大阴影，高度模糊

6.2.4 扩展半径（spread）

阴影的扩展或收缩：

• 正值：阴影向外扩展
• 负值：阴影向内收缩
• 通常为0

6.2.5 阴影颜色

使用半透明黑色是最佳实践：

• rgba(0, 0, 0, 0.05)：极淡阴影
• rgba(0, 0, 0, 0.1)：浅阴影
• rgba(0, 0, 0, 0.15)：中等阴影
• rgba(0, 0, 0, 0.2)：深阴影

6.3 阴影应用场景

// 按钮悬浮状态
Button()
  .shadow({
    radius: 4,
    color: '#00000010',
    offsetX: 0,
    offsetY: 2
  })

// 卡片组件
Card()
  .shadow({
    radius: 8,
    color: '#00000015',
    offsetX: 0,
    offsetY: 4
  })

// 弹窗组件
Dialog()
  .shadow({
    radius: 24,
    color: '#00000025',
    offsetX: 0,
    offsetY: 8
  })

6.4 阴影使用注意事项

6.4.1 避免过度使用

过多的阴影会让界面显得杂乱：

// 不好：所有元素都有阴影
Card()
  .shadow({ ... }) // 卡片阴影

ListItem()
  .shadow({ ... }) // 列表项也有阴影

// 好：只对需要突出的元素添加阴影
Card()
  .shadow({ ... }) // 卡片有阴影

ListItem()
  // 无阴影，保持简洁

6.4.2 深色模式适配

深色模式下阴影需要调整颜色：

// 浅色模式
shadow({ color: '#00000015' })

// 深色模式
shadow({ color: '#00000040' })

---

七、设计令牌实现

7.1 什么是设计令牌

设计令牌（Design Tokens）是设计系统中存储设计决策的原子单位，它们以键值对的形式存储颜色、间距、字体等设计属性。

7.2 令牌接口设计

// 颜色令牌
export interface ColorToken {
  key: string;
  value: string;
  description?: string;
}

// 间距令牌
export interface SpacingToken {
  key: string;
  value: string;
  size: number;
}

// 字体令牌
export interface FontToken {
  key: string;
  value: string;
  size: number;
  lineHeight: number;
  fontWeight?: number;
}

// 圆角令牌
export interface RadiusToken {
  key: string;
  value: string;
  size: number;
}

// 阴影令牌
export interface ShadowToken {
  key: string;
  value: string;
  radius: number;
  color: string;
  offsetX: number;
  offsetY: number;
}

7.3 令牌统一管理

export interface DesignSystem {
  colors: ColorPalette[];
  spacing: SpacingToken[];
  typography: FontToken[];
  radius: RadiusToken[];
  shadows: ShadowToken[];
}

export const designSystem: DesignSystem = {
  colors: colorPalettes,
  spacing: spacingTokens,
  typography: fontSizeTokens,
  radius: radiusTokens,
  shadows: shadowTokens
};

---

八、实战案例：设计系统展示应用

8.1 应用架构

├── common/
│   ├── design/
│   │   ├── system.ets    # 设计令牌定义
│   │   └── index.ets     # 统一导出
│   └── utils/
│       └── ...
├── pages/
│   └── Index.ets         # 设计系统展示页面
└── entry/src/main/ets/

8.2 颜色展示组件

@Component
struct ColorCard {
  @Prop colorName: string;
  @Prop colorValue: string;
  @Prop colorDescription: string;
  
  build() {
    Column({ space: 12 }) {
      Row() {
        Row()
          .width(60)
          .height(60)
          .backgroundColor(this.colorValue)
          .borderRadius(8)
        
        Column({ space: 4 }) {
          Text(this.colorName)
            .fontSize(14)
            .fontWeight(FontWeight.Medium)
          
          Text(this.colorValue)
            .fontSize(12)
            .fontFamily('monospace')
          
          Text(this.colorDescription)
            .fontSize(12)
            .fontColor('#98989A')
        }
      }
    }
    .padding(16)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }
}

8.3 间距展示组件

@Component
struct SpacingCard {
  @Prop spacingName: string;
  @Prop spacingSize: number;
  
  build() {
    Row({ space: 16 }) {
      Text(this.spacingName)
        .fontSize(14)
        .fontWeight(FontWeight.Medium)
        .width(40)
      
      Row()
        .width(this.spacingSize)
        .height(24)
        .backgroundColor('#007DFF')
        .borderRadius(4)
      
      Text(`${this.spacingSize}px`)
        .fontSize(14)
        .fontColor('#666666')
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }
}

8.4 字体展示组件

@Component
struct TypographyCard {
  @Prop fontName: string;
  @Prop fontSize: number;
  @Prop lineHeight: number;
  
  build() {
    Column({ space: 8 }) {
      Row({ space: 8 }) {
        Text(this.fontName)
          .fontSize(14)
          .fontWeight(FontWeight.Medium)
          .padding({ left: 8, right: 8, top: 4, bottom: 4 })
          .backgroundColor('#F5F5F7')
          .borderRadius(4)
        
        Text(`${this.fontSize}px / ${this.lineHeight}px`)
          .fontSize(12)
          .fontColor('#98989A')
      }
      
      Text('示例文字 Sample Text')
        .fontSize(this.fontSize)
        .lineHeight(this.lineHeight)
    }
    .width('100%')
    .padding(16)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }
}

8.5 圆角展示组件

@Component
struct RadiusCard {
  @Prop radiusName: string;
  @Prop radiusSize: number;
  
  build() {
    Row({ space: 16 }) {
      Text(this.radiusName)
        .fontSize(14)
        .fontWeight(FontWeight.Medium)
        .width(50)
      
      Row()
        .width(60)
        .height(60)
        .backgroundColor('#007DFF')
        .borderRadius(this.radiusSize)
      
      Row()
        .width(60)
        .height(40)
        .backgroundColor('#007DFF')
        .borderRadius(this.radiusSize)
      
      Text(`${this.radiusSize}px`)
        .fontSize(14)
        .fontColor('#666666')
        .width(60)
    }
    .width('100%')
    .padding(12)
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
  }
}

---

九、最佳实践

9.1 命名规范

9.1.1 语义化命名

// 好的命名
colors.success    // 语义明确
colors.primary    // 语义明确
spacing.lg        // 语义明确

// 不好的命名
colors.color1     // 缺乏语义
colors.blue       // 过于具体
spacing.space1     // 缺乏语义

9.1.2 层级命名

// 使用前缀区分类别
colors.primary
colors.semantic
colors.neutral

typography.heading
typography.body
typography.caption

spacing.component
spacing.layout

9.2 使用原则

9.2.1 优先使用设计系统

// 优先使用设计系统中的值
Text('标题')
  .fontSize(24) // 使用字体系统
  .padding(16)    // 使用间距系统

// 避免硬编码
Text('标题')
  .fontSize(23)  // 不好
  .padding(15)    // 不好

9.2.2 保持一致性

// 统一使用同一套值
Card({ padding: 16 }) // 16px
ListItem({ padding: 16 }) // 也是16px

// 而不是
Card({ padding: 16 })
ListItem({ padding: 14 })

9.2.3 适度抽象

// 组件级token
const cardPadding = 16;
const cardRadius = 8;

// 基础token
const spacingLg = 16;
const radiusBase = 8;

9.3 文档维护

每个设计系统都应该有清晰的文档：

/**
 * 颜色系统
 * 
 * 设计原则：
 * 1. 颜色数量控制在合理范围内（建议不超过20个基础色）
 * 2. 使用语义化命名，便于理解和使用
 * 3. 保证足够的对比度，确保可访问性
 * 
 * 颜色分类：
 * - 主色（Primary）：品牌代表色，用于关键元素
 * - 功能色（Semantic）：传达语义信息
 * - 中性色（Neutral）：构建界面层次
 * - 背景色（Background）：定义界面背景
 * 
 * @example
 * // 使用主色
 * Text('标题').fontColor(colors.primary)
 * 
 * // 使用功能色
 * Text('成功').fontColor(colors.success)
 */
export const colors = { ... };

---

十、性能考虑

10.1 避免不必要的阴影

阴影会触发额外的渲染计算：

// 静态元素避免使用阴影
Column() {
  // ...
}
.backgroundColor('#FFFFFF')
// 不需要阴影

// 只在需要时才添加阴影
Column()
.shadow({ radius: 8, color: '#00000015' })

10.2 简化渐变使用

复杂的渐变会影响渲染性能：

// 简单渐变
.linearGradient({
  angle: 135,
  colors: [['#007DFF', 0], ['#00B4D8', 1]]
})

// 复杂渐变（谨慎使用）
.linearGradient({
  angle: 45,
  colors: [
    ['#FF5733', 0],
    ['#FF8D1A', 0.3],
    ['#FFC300', 0.6],
    ['#00D9A5', 1]
  ]
})

10.3 合理使用圆角

全圆形裁剪会创建新的绘制层：

// 圆形头像
Image(avatar)
  .width(40)
  .height(40)
  .borderRadius(20) // 创建新图层

// 方形头像
Image(avatar)
  .width(40)
  .height(40)
  .borderRadius(4) // 无额外图层开销

---

十一、扩展与维护

11.1 主题扩展

设计系统应该支持主题切换：

interface Theme {
  colors: Record<string, string>;
  spacing: Record<string, number>;
  typography: Record<string, TypographyToken>;
}

const lightTheme: Theme = {
  colors: { primary: '#007DFF', ... },
  spacing: { lg: 16, ... },
  typography: { ... }
};

const darkTheme: Theme = {
  colors: { primary: '#66B3FF', ... },
  spacing: { lg: 16, ... },
  typography: { ... }
};

11.2 版本管理

/**
 * 设计系统版本
 * 
 * v1.0.0 (2024-01-15)
 * - 初始版本
 * - 包含基础颜色、间距、字体系统
 * 
 * v1.1.0 (2024-03-20)
 * - 新增阴影系统
 * - 新增渐变色
 * - 优化间距层级
 * 
 * v2.0.0 (2024-06-01)
 * - 支持深色模式
 * - 新增组件级token
 * - 重构命名规范
 */
export const DESIGN_SYSTEM_VERSION = '2.0.0';

11.3 升级指南

当设计系统更新时，提供清晰的升级指南：

/**
 * 从v1.x升级到v2.0
 * 
 * 1. 颜色命名变更
 *    - colors.main → colors.primary
 *    - colors.sub → colors.secondary
 * 
 * 2. 间距值调整
 *    - spacing.md: 12px → 16px
 *    - spacing.lg: 16px → 20px
 * 
 * 3. 新增必需token
 *    - 阴影系统已升级，所有卡片组件需要添加shadow属性
 */

---

总结

本文详细介绍了HarmonyOS应用设计系统的构建方法，涵盖了设计系统的核心组成部分：

1. 颜色系统：通过语义化的颜色分类，构建完整的色彩体系
2. 间距系统：采用4px基础单位的间距规范
3. 字体系统：通过层级化的字体大小和行高组合，传达信息重要性
4. 圆角系统：赋予界面柔和感和现代感
5. 阴影系统：创建界面层次和深度感

设计系统的构建不是一蹴而就的，需要在实践中不断优化和完善。建议：

• 从基础的设计令牌开始，逐步扩展
• 保持命名的一致性和语义化
• 提供清晰的文档和使用示例
• 关注可访问性和性能
• 定期回顾和优化设计决策

通过构建和维护一套好的设计系统，能够显著提升开发效率和产品质量，是现代应用开发的重要基础设施。

---

附录：设计令牌速查表

颜色令牌

类别	令牌名称	示例值
主色	primary	#007DFF
功能色	success	#2ED573
功能色	warning	#FFA502
功能色	error	#FF4757
中性色	text-primary	#1C1C1E
中性色	text-secondary	#666666
背景色	bg-primary	#FFFFFF
背景色	bg-secondary	#F5F5F7

间距令牌

令牌名称	值	像素
xs	4px	4
sm	8px	8
md	12px	12
lg	16px	16
xl	20px	20
2xl	24px	24
3xl	32px	32
4xl	40px	40

圆角令牌

令牌名称	值	场景
none	0px	分割线
sm	4px	标签
base	8px	按钮、卡片
lg	12px	大卡片
xl	16px	弹窗
full	9999px	药丸形

阴影令牌

令牌名称	值	场景
shadow-sm	0 1px 2px rgba(0,0,0,0.05)	轻微悬浮
shadow-base	0 2px 4px rgba(0,0,0,0.1)	卡片
shadow-md	0 4px 8px rgba(0,0,0,0.12)	弹窗
shadow-lg	0 8px 16px rgba(0,0,0,0.15)	大弹窗