Theme Token Preview

Theme Token 预览器

直接改色彩和圆角，看一套 token 如何改变页面气质。

Tokens

颜色

画布表面主文字正文主色强调色

形状

卡片圆角图片圆角

预览

Lab Note

一张由 token 拼出来的小卡片

按钮、文字、背景和圆角都来自左侧变量。改它们，页面性格会马上变。

PrimaryAccent

CSS

.lab-skin {
  --color-canvas: #fbf7ef;
  --color-surface: #fffdf8;
  --color-ink: #24211d;
  --color-body: #4f4a43;
  --color-primary: #6f8f72;
  --color-accent: #c8784a;
  --radius-card: 0.5rem;
  --radius-image: 0.75rem;
}