clay · 黏土铜色阶
品牌主色阶（穿山甲鳞甲的暖大地色）。--clay-500 为品牌主色，浅色主题 accent 取 500、深色取 400。
sand · 沙米中性阶
暖中性色阶。浅色画布 --sand-50，深色画布暖 espresso --sand-950（非纯黑）。
语义色相
地色调校过的三组状态色相：绿=连接/安全，琥珀=连接中/提示，红=断开/错误。
语义 token
界面只引用这一层（浅/深自动切换）。切右上主题看色值实时变化。
背景 / 表面
--bg · --surface · --overlay前景 / 文本
--fg1/2/3 · --fg-on-accent品牌 accent
--accent(+hover/press/subtle/border)描边 / 光环
--border · --border-strong · --ring状态语义
success / warning / danger (+ -subtle)字号梯度
Display 用 Sora，正文/UI 用 Manrope，中文伴随 Noto Sans SC，数据用 JetBrains Mono。示例单语显示（中英分行，非并排同句）。
圆角 Radius
偏大圆角传递亲和。按钮全胶囊 --radius-full，卡片 lg–xl，输入 md。
间距 Spacing
4px 基准网格。
阴影 Shadow
柔和暖调（rgba(45,30,20,…)），绝不用冷灰阴影。
按钮 · .btn
全胶囊圆角 · hover 主色加深 · press 缩放 .97 · focus clay 光环。变体 .btn-primary/-ghost/-subtle/-danger，尺寸 .btn-lg/-icon/-block。
变体
.btn + .btn-primary/-ghost/-subtle/-danger尺寸 / 形态
.btn-lg · .btn-icon · .btn-block禁用态
:disabled · .is-disabled卡片 · .card
surface 底 + border + radius-xl + shadow-sm。.card-flush 用于列表容器（内容自带 padding）。
输入 · .input / .field / .flabel
强描边 + radius-md + focus clay 光环。状态 .is-focused / .is-error / :disabled。
胶囊 · .pill / .badge
状态用「色点 + 文字胶囊」，非 emoji。状态修饰 .is-success/-warning/-danger/-neutral，变体 .pill-accent / .pill-outline。.badge 为 .pill 语义别名。
状态修饰
.pill.is-*（含 .dot）变体 / 别名
.pill-accent · .pill-outline · .badge语言下拉 · .langsel
不依赖原生 <select>：触发药丸 .langsel-trigger + 自控绝对定位菜单 .menu / .menu-item（选中态 .is-selected）。点触发按钮可实际展开/收起。
Lucide 图标库 —
细线条 · 2px stroke · 圆角端点。sprite 单源 icons.js，用法 <svg class="ic"><use href="#i-<name>"/></svg>。