Tapo 官网 · Design Token
名字说它干嘛用，
不说它是多少。
一分钟看懂 token 怎么起名
一 · 为什么分三层
分三层，一层引用一层
REFERENCE · 原料
tapo_midnight
像颜料盒里的颜料：只说是什么颜色、多大
→
SYSTEM · 用途
主强调色
color/accent/primary
这支笔用来干什么：强调、正文、卡片底
→
COMPONENT · 物件
Shop Now
button/primary/container-color
某个组件的某个部位，只管它自己
读法：按钮底色 引用 主强调色，主强调色引用 深蓝 #001D41
二 · 分层的好处
改中间一层，全站跟着变
color/accent/primary#001D41
主按钮Buy Now
文字链接Learn More
选中标签Outdoor
进度条
只想改一个按钮？改最下面的 Component 那层就行，别的不受影响。
三 · 起名的规矩
四条规矩
1 不写数值
spacing/16→spacing/md
数值以后会变，名字不用跟着改
2 不写设备
title1-mobile→title1电脑 40平板 28手机 28
手机、平板、电脑交给「模式」自动切换
3 大小用尺码，字号用数字
xssmmdlgxl Title 1Body 1 Medium
间距、圆角像衣服尺码；字号 1 最大，字重写在最后
4 从左到右越来越具体
button/primary/hover/container-color
组件 → 变体 → 状态 → 属性
四 · 设计和研发
同一个名字，三种写法
Figma 里color/text/primary
网页代码--color-text-primary
App 代码colorTextPrimary
设计稿和代码说的是同一个东西，交接不用再对照数值。
五 · 谁用哪一层
设计师平时只用中间那层
面板里能看到System
日常出稿都用它：文字色、间距、圆角、字号
颜色能看到Reference
色板开放给设计师，画插画、图标时直接用；其他刻度不显示
看不到Component
藏在组件里面，免得做业务稿时误改
记住一句：名字说用途，不说数值。