Three Tiers of Color Tokens
Added 2026-10
Three Tiers of Color Tokens — Chinese original prompt
现在有 [42] 个散落的色值,主题要支持 [默认] 和 [品牌联名] 两套。请设计三层结构:基础色(命名到 [blue-500] 这种粒度)、语义色(surface、text-secondary、danger 之类)、组件色(button-primary-bg 之类)。给出每层的命名规则和三条引用链示例,说明联名主题切换时哪层要改、哪层完全不动。
Site original
Chinese original
Example
Sample input
现在有四十多个散落色值,主题要支持默认和品牌联名两套,帮我设计三层色彩结构。
The output should include
- 三层命名规则与引用链示例
- 主题切换时哪层改哪层不动
- 说明组件色如何引用语义色
Replace these placeholders 4
Swap the bracketed parts for your own details before sending.
[42][默认][品牌联名][blue-500]
How to use
组件里直接写色值是最常见的债,先禁掉再谈主题化。
Try tweaking it
- Swap style words for measurable parameters: light, lens, material, composition.
- Ask for three variants of one prompt, then compare the differences.
What you should get
- A parameter sheet you can act on (light, lens, material, framing)
- Two or three alternatives with trade-offs
Common mistakes
- Stacking words like "premium, cinematic, 8K" — no two results match.
- Asking for a real brand or celebrity look and getting something close but unusable.
How to check the output
- Parameters are executable — ready to use in a tool or hand to a designer.
- It explains the trade-offs, not just the final look.
Where it works
- Good for: breaking vague "premium feel" into concrete light, material, lens and composition parameters.
- Watch out: for real brands, celebrities or third-party work, use equivalent descriptions to avoid infringement.