# 语义 Token 与零依赖图表：后台视觉基线怎么落地

颜色只走语义 Token，六套预设配色叠加基础色与主题色；折线、雷达、漏斗、甘特等图表全部自绘 SVG。

> Runlume 提供平台能力、独立业务应用与专业服务，支持按需组合。功能、额度与交付范围由所选套餐或服务约定确定；业务应用可独立选用，跨应用协作遵循接入配置与授权边界。

原始页面: https://runlume.app/blog/admin-design-tokens-and-charts

开发者指南 · 主题与配色 / 组件 / 无障碍

发布：2026-09-17 · 作者：Runlume 团队

后台的视觉漂移很少来自某一次大改动，而是来自散落各处的色值、间距和一次性组件：同一个“成功”在三个页面里有三种绿，换个主题要翻几十个文件。

admin-design 的做法是先定 Token 与外壳，再谈页面。

## 颜色只写用途，不写色值

颜色统一走语义工具类：`bg-card`、`text-muted-foreground`、`text-success`、`border-destructive`。换主题改的是 Token，业务代码不动。

配色分两层：六套预设配色（teal、blue、forest、violet、amber、graphite 与自定义）决定整体气质，基础色（neutral、stone、zinc 等）与主题色（十八个色相）叠加微调，深浅模式各存一套。

无障碍不是附加项：字号、字重、高对比、色弱、减少动效与下划线链接都放在设置里，偏好存浏览器，不写进业务数据。

## 图表全部自绘 SVG

折线、柱状、环形、迷你柱、条形、热力、雷达、漏斗、甘特——不引第三方图表库。图形取同一套语义色，深浅模式自动跟随，装饰图形带 `role="img"` 与 `aria-label`，把“这张图在讲什么”讲清楚。

零依赖的代价是自己维护坐标与比例，换来的回报是包体、审计与主题一致性都可控：不需要再为图表维护第二套配色系统。

## 组件总览就是验收面

九类组件拆成九个页面，每个控件都配真实落点。改组件必须先补总览示例；新增能力按“总览示例 + 真实落点 + 测试”三件套提交。文档不会和实现脱节，评审也有统一的对照页。

## 相关页面

- [平台能力](https://runlume.app/platform)
- [业务应用](https://runlume.app/apps)
- [开发者](https://runlume.app/developers)
- [关于 Runlume](https://runlume.app/about)