青汀 Design Tokens
按 T 切换主题
设计令牌 v2.4 · light / dark

一套变量，两种光线。

下面的按钮、输入框、卡片和表格只引用 --color-* 语义变量。切换主题只是改写 <html data-theme>，组件 CSS 一行不动；你的选择会写进 localStorage，刷新后依旧生效。

语义 token / 套
—
原始色阶
—
主题
2套
最低正文对比度
—
组件 CSS 硬编码色值
—

01 · Buttons

按钮Button

六种变体、三种尺寸和完整的交互状态。背景、文字、描边都来自语义 token；点一下“变体”一行的按钮，会提示它引用了哪些变量。

  • --color-accent
  • --color-accent-hover
  • --color-on-accent
  • --color-accent-soft
  • --color-danger
  • --color-focus
变体variant
尺寸size
图标icon
状态state
default
:hover
:active
:focus-visible
:disabled
loading
组合group

02 · Inputs

输入Form controls

聚焦时描边切到 --color-accent，外圈用 --color-focus-ring；校验失败整体换成 danger 系列。试着把服务名改成表格里已有的 payment-gateway。

  • --color-input-bg
  • --color-border-strong
  • --color-focus-ring
  • --color-text-subtle
  • --color-track
  • --color-knob

小写字母开头，可含数字与连字符

https:// .qt.app

默认跟随服务名，可单独修改

告警会同时发送到这个地址

原生 select，弹出层跟随 color-scheme

预计每月 ¥ 540

2.0 核

超过 6 核需要审批

自动化
部署环境
通知渠道

密码至少 12 位，且不能是连续数字

⌘K
演示表单：提交后服务会出现在下方表格里。

03 · Cards

卡片Card

数据卡片、内容卡片和消息卡片共用 --color-surface、--color-border 与阴影 token。“团队版”卡片给自己设了相反的 data-theme，同一套变量在子树里局部换成另一套主题。

  • --color-surface
  • --color-border
  • --shadow-md
  • --color-accent-subtle
  • --color-success-soft
  • --color-danger-soft
本月请求量
1.28M
12.4%较上月
P95 延迟
184ms
8.1%低于目标 200 ms
可用性（30 天）
99.982%
0.004SLA 99.95%
错误率
0.12%
0.03较上周上升

支付网关 v3 重构

更新于 2 小时前 · 12 个任务

拆分结算与对账链路，统一接入鉴权与限流中间件。

进行中GogRPC
里程碑进度68%
林周陈+2
林

林知夏

设计系统负责人

平台体验组 · 杭州

Figma 变量无障碍动效规范
128组件
43语义 token
86评审
团队版最受欢迎
¥49/ 席位 · 月

为 5–200 人的产品团队准备，设计稿与代码共用同一套 token。

  • 无限项目与成员
  • light / dark 双主题同步
  • 导出 CSS 变量与 JSON
  • SSO 与审计日志

局部主题：data-theme="dark"

消息中心

  • v2.5 预告：新增 6 个 token

    表格密度与焦点外圈将独立成变量。

  • 部署成功

    payment-gateway 已上线华东生产环境。

  • CPU 配额告警

    search-indexer 连续 15 分钟高于 80%。

  • 构建失败

    media-transcoder 有 2 个测试未通过。

04 · Table

表格Data table

可搜索、筛选、排序、分页和多选。悬停行用 --color-hover，选中行用 --color-accent-subtle，状态徽标来自四组状态色。按 / 直接搜索。

  • --color-surface-sunken
  • --color-hover
  • --color-accent-subtle
  • --color-success-soft
  • --color-warning-soft
  • --color-info-soft
/
区域 操作
—

05 · Tokens

Token 参考light ↔ dark

每格左半是 light、右半是 dark：两块颜色是同一个变量在不同 data-theme 子树里的求值结果，色值和引用关系直接从页面样式表读取。“当前”标出正在使用的一半，格内数字是 WCAG 对比度。

  • 原始色板
  • → 语义 token
  • → 组件

原始色板 Primitives

圆点 = 当前主题的语义 token 正在引用的色阶，切换主题时会移动

尺度 Scales

圆角、字号、间距两套主题共用；阴影属于语义层，深色主题下更深更实。

圆角 --radius-*

xs 4
sm 6
md 8
lg 12
xl 16
full

阴影 --shadow-*

xs
sm
md
lg

字号 --text-*

青绿 Aa2xl 28
青绿 Aaxl 20
青绿 Aalg 16
青绿 Aamd 14
青绿 Aasm 13
青绿 Aaxs 12

间距 --space-*

space-14
space-28
space-312
space-416
space-624
space-832
space-1248
space-1664