UI FLOWKNOWLEDGE SYSTEM

色彩与装饰 · Color & Decoration

设计 Token
Design Token

把颜色、字号、间距、圆角、阴影等设计决策命名并系统化的基础单位。

Named, systemized design decisions for color, type, spacing, radius, shadow, and similar values.

交互预览

这是 mianhua UI Glossary 的原生 Preview Runtime,不是静态截图。

可以直接对 Agent 说

请为这个界面建立一套可执行的「设计 Token / Design Token」系统。

角色:你是一名负责设计系统落地的 UI/UX 设计师兼前端工程师,需要把视觉决策转成可复用、可维护的命名变量。

目标:不要只列颜色值,而是建立语义化 token,让后续页面、组件和深浅主题都能复用同一套规则。

Token 范围:至少包含 color、typography、spacing、radius、shadow、border、motion 和 z-index。颜色要区分 brand、surface、text、muted、success、warning、danger;字号要包含标题、正文、说明和数据;间距要形成 4/8 基准的节奏。

命名要求:优先使用语义命名,例如 color.surface.default、color.text.muted、radius.md、space.3、shadow.soft;不要只用 blue-500、gray-100 这种无法表达用途的名字。

输出格式:先说明设计原则,再列 token 表、适用组件、深浅主题映射、CSS 变量示例、Tailwind/前端接入方式和反例边界。

相关可运行档案研究

该术语暂未建立精选案例映射,可从馆藏中继续搜索。

返回术语实验室 · 浏览完整馆藏 · 读取术语 API