把爱弥斯装进代码：清吾的配色是怎么来的

做博客最快乐的部分，大概就是能自己定颜色。清吾整套视觉的起点，不是一张色卡，而是一个角色——爱弥斯。

这篇文章聊聊我如何把她的配色抽成一套可复用的设计 tokens，以及为什么要这么做。

先有角色，再有颜色

很多网站是先定一个品牌色，再往四面八方扩展。我反着来：先有爱弥斯这个形象，再有颜色。

她是《鸣潮》里热熔属性的共鸣者，一头玫瑰粉的发色像暮色浸染，绯红的蝴蝶结是点睛，再配上奶油白的衬衫、琥珀金色的眼睛、暖棕色的皮质。把这些颜色一字排开，其实就已经是一套很和谐的小调色盘了。

玫瑰粉主色里藏着俏皮，绯红负责强调与热烈，奶油白垫底让整个站柔软下来，琥珀金是零星的点睛，暖棕用来稳住文字与质感。不需要多，五六个就够一个角落用了。

在 Tailwind v4 里落地 tokens

Tailwind v4 用 @theme 定义设计 token，把「语义化的颜色」直接暴露成工具类。我在 src/styles/global.css 里这样写：

@theme {
  --color-rose: #f6a5b8;    /* 主色 · 玫瑰粉(发色/裙) */
  --color-crimson: #c23a55; /* 强调色 · 绯红(蝴蝶结;原 #e0526b 对比度不足,已加深) */
  --color-cream: #fdf6f0;   /* 底色 · 奶油白(衬衫/背景) */
  --color-amber: #e8b04b;   /* 点睛 · 琥珀金(眼睛) */
  --color-brown: #8b5a3c;   /* 暖棕 · 皮质(包/鞋) */
  --color-ink: #4a3728;     /* 文字 · 深暖棕(正文) */
}

定义完之后，就可以直接用 text-rose、bg-cream、border-rose/25 这类类名了。半透明写法（比如 bg-rose/25）特别适合拿来做标签、分割线和氛围层。

六个颜色够用吗

刚开始我也担心六种颜色撑不起一个站。用下来发现，关键是把一种颜色拆成很多浓度。

比如卡片上的分类标签，用的是 bg-rose/25 text-crimson；目录侧边的分割线，用的是 border-rose/25；hover 时上浮的影子，是 rgba(246, 165, 184, 0.22)——其实都是同一个玫瑰粉，只是不透明的比例不同。颜色越克制，整片「暖」就越统一。

这也印证了「暖色、不做深浅切换」这个决定：把深浅交给同一色相的不同浓度，而不是引入冷色或黑色。

非颜色 token 也值得定

除了颜色，我还顺手把形状和动效也收进了 token，让它们保持一致：

@theme {
  --radius-card: 1.25rem;                 /* 统一圆润的卡片 */
  --radius-pill: 9999px;                  /* 胶囊按钮 */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); /* 克制的缓动 */
}

形状全部往「圆」上靠，动效只有一个 ease-soft，就是想让全站看起来是同一个「人」做的——温馨、日常，不吵不闹。

小结

先抽 token 再写页面的好处，到了后面特别明显：想调整某个暖色的浓度，只需要改 @theme 这里，全站跟着变。

把喜欢的角色折进代码里，是我做这个小站最开心的仪式感。毕竟，一个属于自己的角落，总得有点自己的颜色。