设计系统入门：Token 与组件分层

设计系统听起来庞大，入门其实只需两层共识：设计令牌（设计决策的命名）与组件（令牌的落地）。没有令牌，组件库只是另一套皮肤；没有组件，令牌只是表格。

令牌怎么切

常见分层：原始色板到语义色再到组件色。间距、圆角、阴影同样语义化。命名追求稳定，值可以换；切忌把具体色阶名直接写进业务样式。一套二十个左右的核心语义令牌，往往就够支撑中小型站点的第一阶段。

组件分层

• 基础：按钮、输入框、标签、图标
• 模式：卡片、对话框、空状态、分页
• 页面模板：列表页、详情页、导航分区

每一层只依赖下一层令牌，不跨层偷色。暗色模式优先切换语义令牌，而不是单独复制一套组件。文档里用同一张表维护「令牌名、亮色值、暗色值、使用场景」。

落地到风动导航这类站点

卡片圆角、玻璃边框、主题色高亮，都适合进令牌。改品牌色时，徽章、链接、焦点环应一起变。设计稿与样式变量同名，能减少设计与实现的拉锯。首页卡片与详情页正文的字号层级，也建议纳入同一套字号令牌。

最小可行步骤

1. 盘点现有颜色与间距，合并近似值。
2. 定义二十个以内核心语义令牌。
3. 选按钮与卡片两个组件先打通。
4. 写一句原则：新样式禁止魔法数字，必须引用令牌。

系统是演进出来的。先让「改一处，亮一处」成为习惯，再逐步覆盖图表、表单与营销页。每季度回顾一次未被引用的令牌，敢于删除，保持清单干净。

把上述原则写进团队检查清单，比只收藏文章更有效；风动导航也会持续用资讯与站点分类帮你把「看到」变成「用到」。