Token 使用指南

最少的 Token，最大的设计一致性。语义化命名，跨平台复用。

📐

间距 Spacing

--space-14px - 极小间隙
--space-28px - 紧凑间距
--space-416px - 标准间距
--space-624px - 区块间距
--space-832px - 大区块间距

◐

圆角 Radius

--radius-sm4px - 小按钮、标签
--radius-md8px - 按钮、输入框
--radius-lg12px - 卡片、弹框
--radius-xl16px - 大卡片
--radius-full9999px - 圆形、胶囊

🎨

背景 Background

--bg-base页面底色、画布
--bg-raised卡片、凸起元素
--bg-sunken输入框、凹陷区域
--bg-elevated弹框、浮层

Aa

前景 Foreground

--fg-base标题、主要文字
--fg-muted正文、描述
--fg-subtle辅助文字
--fg-faint占位符、禁用

⚡

动效 Motion

--motion-fast150ms - 悬停、点击反馈
--motion-normal250ms - 展开、切换
--motion-slow350ms - 页面过渡
--easing标准缓动曲线

🔤

字号 Typography

--text-xs11px - 标签、注脚
--text-sm13px - 辅助文字
--text-base14px - 正文
--text-lg16px - 小标题
--text-2xl20px - 大标题

💪

字重 Weight

--weight-normal400 - 正文
--weight-medium500 - 按钮、强调
--weight-semibold600 - 小标题
--weight-bold700 - 大标题

↕

行高 Leading

--leading-none1 - 单行文本
--leading-tight1.25 - 紧凑标题
--leading-normal1.5 - 正文
--leading-relaxed1.625 - 宽松段落
--leading-loose1.75 - 松散排版

★

品牌色 Accent

--accent主按钮、链接
--accent-hover悬停状态
--accent-muted浅背景 (12%)
--accent-subtle更浅背景 (6%)
--accent-ring聚焦环 (20%)

📚

层级 Z-Index

--z-dropdown100 - 下拉菜单
--z-sticky200 - 固定元素
--z-modal300 - 弹框
--z-toast400 - 消息提示
--z-tooltip500 - 工具提示

◎

模糊 Blur

--blur-sm8px - 轻微模糊
--blur-md16px - 中等模糊
--blur-lg24px - 强模糊

颜色 Token 预览

切换主题查看不同品牌配色

背景色

base

--bg-base

raised

--bg-raised

sunken

--bg-sunken

elevated

--bg-elevated

前景色

base

--fg-base

muted

--fg-muted

subtle

--fg-subtle

faint

--fg-faint

品牌色 & 语义色

accent

--accent

success

--success

warning

--warning

error

--error

AI 对话界面

类似 Claude/ChatGPT 的完整对话体验

设计系统讨论

刚刚

代码审查建议

昨天

产品需求分析

3天前

设计系统讨论

U

帮我设计一个现代化的设计系统，需要支持多主题切换。

✦

我来帮你设计一个灵活的设计系统。以下是核心建议：

1. Token 层级
使用语义化的 CSS 变量，如 --bg-base、--accent，而非具体颜色值。

2. 主题切换
通过 data-theme 属性控制主题，每个主题定义一套完整的颜色变量。

3. 组件一致性
所有组件都应该使用 Token 而非硬编码颜色，确保主题切换时自动适配。

U

听起来不错！能给我展示一些具体的代码吗？

社交信息流

类似 Twitter/Instagram 的动态流布局

数据仪表盘

管理后台常见的数据展示布局

总用户

12,847

↑ 12.5%

活跃用户

3,426

↑ 8.2%

收入

¥86.4K

↑ 23.1%

转化率

4.28%

↓ 1.3%

月度趋势

订单号	客户	金额	状态
#12847	Alex	$128	已完成
#12846	Emma	$89	处理中
#12845	John	$210	待支付
#12844	Sarah	$56	已完成

电商产品展示

主流电商平台风格的产品卡片与购物体验

热销

AirPods Pro 2

主动降噪 · 自适应通透 · MagSafe

★★★★★ 2.4k 评价

¥1,899 ¥1,999

-30%

iPhone 15 Pro Max

A17 Pro · 钛金属 · 5倍光变

★★★★☆ 5.8k 评价

¥9,999 ¥13,999

新品

MacBook Pro 16"

M3 Max · 48GB · 1TB SSD

★★★★★ 1.2k 评价

¥26,999

Apple Watch Ultra 2

钛金属 · 双频GPS · 水下100m

★★★★★ 892 评价

¥6,499 ¥6,999

音乐播放器

Spotify / Apple Music 风格的播放器界面

专辑

Midnight Reflections

Luna Chen · 2024 · 12首 · 48分钟

1

Starlight Dreams

Luna Chen

3:42

▶

Ocean Waves

Luna Chen

4:18

3

City Lights

Luna Chen, Jay Wang

3:56

4

Memories of You

Luna Chen

5:02

Ocean Waves

Luna Chen

定价方案

SaaS 产品常见的定价卡片对比布局

月付

年付省20%

Free

适合个人项目

$0 /月

✓ 3 个项目
✓ 1GB 存储
✓ 社区支持
✗ 自定义域名
✗ API 访问

最受欢迎

Pro

适合专业开发者

$99 /月

✓ 无限项目
✓ 100GB 存储
✓ 优先支持
✓ 自定义域名
✓ API 访问

Enterprise

适合大型企业

$399 /月

✓ 无限项目
✓ 无限存储
✓ 24/7 专属支持
✓ SSO 单点登录
✓ SLA 保障

下拉菜单与悬停

展示浮层层次、阴影深度与交互状态

通知与提示

Toast、Notification 与状态提示的层次展示

Toast 轻提示

✓ 操作成功完成

✕ 操作失败，请重试

⚠ 请注意检查输入

ℹ 新版本已发布

Notification 通知卡片

🔔

系统通知

刚刚

您的文件已成功上传至云端，可在任意设备访问。

J

John 评论了你的文章

5 分钟前

"这篇文章写得太棒了！特别是关于设计系统的部分..."

文字层次

展示文字的视觉层次与可读性设计

标题层次 Headings

H1 / 2xl

主标题 Primary Heading

H2 / xl

副标题 Secondary Heading

H3 / lg

小标题 Section Heading

H4 / base

段落标题 Paragraph Title

正文层次 Body Text

fg-base

主要文字 - 用于标题和重要内容，具有最高对比度和可读性。

fg-muted

次要文字 - 用于正文段落和描述性内容，保持良好可读性。

fg-subtle

辅助文字 - 用于注释、时间戳和补充信息，视觉权重较低。

fg-faint

最弱文字 - 用于占位符、禁用状态和水印，视觉存在感最低。

实际应用示例

设计系统 2024年12月15日

构建可扩展的设计系统

设计系统不仅仅是组件库，更是一套完整的设计语言和协作规范。本文将探讨如何从零开始构建一个可扩展、易维护的设计系统...

L

李设计

高级设计师

👁 2.4k 💬 128 ❤️ 892

弹框与遮罩

展示模态框、抽屉与浮层的层次关系

层级 Z-Index 说明

z-tooltip 工具提示层

z-toast 消息提示层

z-modal 模态弹框层

z-dropdown 下拉菜单层

z-base 基础内容层

落地页 Landing Page

完整的产品落地页布局，包含导航、英雄区、特性展示、用户评价和CTA

✨ New Release

Build faster, ship smarter

The all-in-one platform for teams to design, develop, and deploy beautiful products at scale.

Why choose us?

⚡

Lightning Fast

Optimized performance with sub-second load times globally

🔒

Secure by Default

Enterprise-grade security with end-to-end encryption

🎨

Beautiful Design

Stunning UI components crafted with attention to detail

Loved by developers

"This tool has completely transformed our workflow. We ship 3x faster now."

👩‍💻

Sarah Chen

Lead Developer @ TechCorp

"The best investment we made for our design system. Highly recommended."

👨‍🎨

Alex Kim

Design Lead @ StartupXYZ

Ready to get started?

Join thousands of teams building better products today.

Token 总览

完整展示全部 105 个 Design Token 的使用方式 (Universal 53 + Theme 52)

通用层 Universal (53 tokens)

跨主题不变的基础设计决策：布局、形状、排版、动效、层级

📐 间距 Space (13)

基于 4px 基准的间距系统，用于控制元素间的留白

1

2

3

4

5

6

8

10

12

◐ 圆角 Radius (5)

统一的圆角半径，从轻微到完全圆形

sm
4px

md
8px

lg
12px

xl
16px

full
9999px

🔤 字号 Text (11)

从 11px 到 48px 的字号阶梯，覆盖标签到超大标题

xs (11px)The quick brown fox

sm (13px)The quick brown fox

base (14px)The quick brown fox

lg (16px)The quick brown fox

xl (18px)The quick brown fox

2xl (20px)The quick brown fox

3xl (24px)The quick brown fox

💪 字重 Weight (4)

四个标准字重，控制文字的粗细层次

Normal 400

Medium 500

Semibold 600

Bold 700

↕ 行高 Leading (6)

控制文本行间距，从紧凑到宽松

none (1)The quick brown fox 设计系统

tight (1.25)The quick brown fox 设计系统

snug (1.375)The quick brown fox 设计系统

normal (1.5)The quick brown fox 设计系统

relaxed (1.625)The quick brown fox 设计系统

loose (1.75)The quick brown fox 设计系统

⚡ 动效 Motion (4)

三种时长 + 标准缓动曲线，控制过渡动画

Fast 150ms

Normal 250ms

Slow 350ms

悬停查看不同速度的动效

◎ 模糊 Blur (3)

三级模糊强度，用于毛玻璃等视觉效果

blur-sm 8px

blur-md 16px

blur-lg 24px

📚 层级 Z-Index (7)

管理元素堆叠顺序，避免 z-index 混乱

base 0

dropdown 100

sticky 200

modal 300

toast 400

主题层 Theme (52 tokens)

随主题变化的品牌视觉：颜色、效果、字体

🎨 背景 & 前景 (10)

界面的基础色彩层次，从底色到文字

背景 bg (5)

base

raised

sunken

elevated

overlay

前景 fg (5)

base

muted

subtle

faint

inverse

▢ 边框 Border (4)

不同强度的边框颜色

base

strong

subtle

glow

★ 品牌色 Accent (11)

主品牌色及其变体，包含辅助色

主色 (7)

accent

hover

active

muted

subtle

ring

fg

辅助色 (4)

secondary

sec-muted

tertiary

ter-muted

🚦 语义色 Semantic (12)

表达状态含义的颜色：成功、警告、错误、信息

success

muted

subtle

warning

muted

subtle

error

muted

subtle

info

muted

subtle

🌫️ 阴影 Shadow (4)

四级阴影深度，表现元素的层次高度

sm

md

lg

xl

🌈 渐变 Gradient (4)

品牌渐变效果，用于背景和文字

accent

hero

glow

text

✨ 光晕 Glow (3)

发光效果，用于高亮和强调

accent

soft

intense

🪟 毛玻璃 Glass (2)

毛玻璃效果的背景色和边框

毛玻璃效果

使用 glass-bg 和 glass-border

--glass-bg --glass-border

✏️ 字体 Font (2)

无衬线体和等宽字体

--font-sans

The quick brown fox jumps over the lazy dog 设计系统

--font-mono

const tokens = { space: 4, radius: 8 };

综合展示

所有 105 个 Token 协同工作的完整效果

🎯 综合展示卡片

⚡

Design Token 系统

这个卡片使用了几乎所有类型的 Token：间距、圆角、颜色、阴影、渐变、光晕、毛玻璃、字体、动效等

成功警告信息主题

🎨

主题定制

通过 AI 生成 52 个主题 Token，配合 53 个通用 Token，实现完整的设计系统

Universal 53 Theme 52

按钮 Button

多种样式和尺寸的按钮组件

按钮样式

HTML

<!-- Button Variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-destructive">Destructive</button>

<!-- Button Sizes -->
<button class="btn btn-sm btn-primary">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-lg btn-primary">Large</button>

输入框 Input

文本输入和表单元素

基础输入框

Email

Password

HTML

<div class="input-group">
  <label class="input-label">Email</label>
  <input class="input" type="email" placeholder="you@example.com">
</div>

<div class="input-group">
  <label class="input-label">Password</label>
  <input class="input" type="password" placeholder="Enter password">
</div>

选择控件

Checkbox、Radio、Switch

Checkbox / Radio / Switch

Checkbox Radio Switch

HTML

<!-- Checkbox -->
<label style="display: flex; align-items: center; gap: var(--space-2);">
  <input type="checkbox" class="checkbox" checked>
  <span>Checkbox</span>
</label>

<!-- Radio -->
<label style="display: flex; align-items: center; gap: var(--space-2);">
  <input type="radio" name="group" class="radio" checked>
  <span>Radio</span>
</label>

<!-- Switch -->
<label style="display: flex; align-items: center; gap: var(--space-2);">
  <input type="checkbox" class="switch" checked>
  <span>Switch</span>
</label>

徽章 Badge

状态标签和徽章

徽章样式

Success Warning Error Info Neutral

HTML

<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-neutral">Neutral</span>

卡片 Card

内容容器组件

基础卡片

Card Title

This is a basic card component with title and description.

HTML

<div class="card">
  <div class="card-body">
    <div class="card-title">Card Title</div>
    <div class="card-desc">Card description text.</div>
  </div>
</div>

提示 Alert

信息提示组件

提示样式

✓

Success

Your changes have been saved.

✕

Error

Something went wrong.

HTML

<div class="alert alert-success">
  <span class="alert-icon">✓</span>
  <div class="alert-content">
    <div class="alert-title">Success</div>
    <div class="alert-message">Your changes have been saved.</div>
  </div>
</div>

<div class="alert alert-error">
  <span class="alert-icon">✕</span>
  <div class="alert-content">
    <div class="alert-title">Error</div>
    <div class="alert-message">Something went wrong.</div>
  </div>
</div>

进度 Progress

进度条和加载指示器

进度样式

Loading...

HTML

<!-- Progress Bar -->
<div class="progress">
  <div class="progress-bar" style="width: 65%;"></div>
</div>

<!-- Spinner -->
<div class="spinner"></div>

下拉菜单 Dropdown

可交互的下拉选择组件

下拉样式

HTML

<div class="dropdown open">
  <button class="dropdown-trigger">选择操作 ▼</button>
  <div class="dropdown-menu">
    <div class="dropdown-item">📝 编辑</div>
    <div class="dropdown-item">📋 复制</div>
    <div class="dropdown-divider"></div>
    <div class="dropdown-item">🗑 删除</div>
  </div>
</div>

聊天界面 Chat

类似 Claude 的对话界面组件

聊天样式

AI

Claude

● 在线

帮我设计一个温暖的橙色主题

好的！我为你设计了一个温暖的橙色落日主题，整体色调以暖橙色为主，配合米白色背景，营造温馨舒适的视觉感受。

可以把按钮圆角加大一点吗？

HTML

<div class="chat-container">
  <div class="chat-header">
    <div class="avatar">AI</div>
    <div>Claude</div>
  </div>
  <div class="chat-body">
    <div class="chat-bubble chat-bubble-user">用户消息</div>
    <div class="chat-bubble chat-bubble-ai">AI 回复</div>
  </div>
  <div class="chat-footer">
    <input class="input" placeholder="输入消息...">
    <button class="btn btn-primary btn-icon">↑</button>
  </div>
</div>

设置面板 Settings

带开关的设置项列表

设置样式

深色模式切换深色/浅色主题

消息通知接收推送通知

自动保存每5分钟自动保存草稿

HTML

<div class="form-card">
  <div class="form-row">
    <div class="form-row-label">
      <span class="form-row-title">深色模式</span>
      <span class="form-row-desc">切换主题</span>
    </div>
    <input type="checkbox" class="switch">
  </div>
</div>

列表菜单 Menu

可点击的菜单列表项

菜单样式

👤

个人资料

查看和编辑个人信息

›
🔔

通知设置

管理推送和消息通知

›
🔒

隐私安全

密码和安全设置

›

HTML

<ul class="menu-list">
  <li class="menu-item">
    <div class="menu-item-icon">👤</div>
    <div class="menu-item-content">
      <div class="menu-item-title">个人资料</div>
      <div class="menu-item-desc">描述文字</div>
    </div>
    <span class="menu-item-arrow">›</span>
  </li>
</ul>