跳到主要内容
  • 首页
  • 项目
  • 博客
  • 服务
  • 关于
  • 联系

© 2026 卢东东 JOY

隐私说明

有心就有路 · si.lu

技术实践示例内容

从零建立可维护的前端设计令牌

用品牌、语义和组件三层令牌控制主题与组件变化。

2026年7月16日 · 1 分钟阅读

Tailwind CSS设计系统
路

这是一篇用于验证内容系统和页面布局的示例文章。

设计令牌的作用不是把颜色改成变量,而是为变化建立稳定边界。

品牌令牌

品牌令牌描述视觉原材料,例如冰川蓝、淡紫和冷灰。

语义令牌

语义令牌描述用途,例如背景、正文、弱文字、强调色和焦点环。主题切换只需要替换这一层。

组件令牌

组件令牌处理玻璃卡片、按钮和标签的具体表现。组件依赖语义,不直接依赖品牌色值。

On this page

  1. 品牌令牌
  2. 语义令牌
  3. 组件令牌
上一篇序章通讯第一期|倒计时开始咯下一篇Bento 布局如何服务信息优先级

相关文章

技术实践

Next.js 内容型网站的结构取舍