# 語義 Token 與零依賴圖表：後臺視覺基線怎麼落地

顏色只走語義 Token，六套預設配色疊加基礎色與主題色；折線、雷達、漏斗、甘特等圖表全部自繪 SVG。

> Runlume 提供平臺能力、獨立業務應用與專業服務，支持按需組合。功能、額度與交付範圍由所選套餐或服務約定確定；業務應用可獨立選用，跨應用協作遵循接入配置與授權邊界。

原始頁面: https://runlume.app/zh-hant/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/zh-hant/platform)
- [業務應用](https://runlume.app/zh-hant/apps)
- [開發者](https://runlume.app/zh-hant/developers)
- [關於 Runlume](https://runlume.app/zh-hant/about)