组成

散文文章

理解设计令牌

设计令牌是产品视觉决策的单一真实来源。它们将颜色、间距、排版和运动编码为组件使用的命名变量。

为什么令牌很重要

没有令牌的情况下，更改主要品牌颜色需要在数百个文件中查找。使用令牌时，一个变量的更新会在各处传播——从按钮到警报，再到导航栏。

令牌还弥合了设计工具与代码之间的差距。设计师在Figma中将颜色命名为surface-brand；开发人员在CSS中使用var(--surface-brand)。他们说的是同一种语言。

实际示例

考虑一个需要背景、边框和文本的组件。与其硬编码#1a56db、#e1effe和#1e429f，不如让组件引用--color-primary、--surface-primary-subtle和--text-primary-strong。当品牌发展时，调色板会变化——组件不会。

令牌类别

颜色——品牌、语义和中性色调
间距——从2px到64px的一致比例
排版——字体大小、粗细和行高
半径——从锐角到完全圆角
阴影——深度和层次的提升级别
运动——缓动曲线和持续时间步骤

互联网上大多数的引用可能都是由AI生成的。
— 阿尔伯特·爱因斯坦

阅读全文令牌参考

图像

content_image()函数默认渲染带有loading="lazy"的img，并在提供标题时将其包裹在figure元素中。

无标题——普通图像，宽度自适应。

有标题——包裹在带figcaption的figure中。

带有figcaption的figure——用于注明来源或为视觉内容添加上下文。

带文本的媒体

图像占据布局的三分之一。

使用content--media将图像和文本并排放置。图像占据宽度的三分之一，文本占据三分之二。

这种布局适合引用、插图定义或任何短小的编辑块，其中图像强化了文本而不主导文本。

首字下沉

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

元数据栏

理解设计令牌

设计令牌是产品视觉决策的单一真实来源。它们将颜色、间距、排版和运动编码为组件使用的命名变量。

爱丽丝·马丁 2026年7月18日阅读时间4分钟

142个赞分享

第二个条可以堆叠在下面以分组不同类别的元数据——这里是分类和分析。

用户体验设计进行中

3,847次观看

使用动作链接作为应融入栏中的交互项——无背景，无阴影，颜色柔和。

爱丽丝·马丁 2026年7月18日

142个赞分享

备用

另一种方法，当第一种方法失败时：提问，然后是一个可以一键复制的值或链接。紧挨着它所代表的内容对齐。

无法扫描？请在应用中输入此密钥： JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP

按钮无法打开？从这里打开页面

无法扫描？请在应用中输入此密钥： JBSWY3DPEHPK3PXP

Vue

图片和代码块作为vue部分，采用相同的选项。