萃取自 landing-page/cloud 前端的設計語言，整理成一套可重用的設計系統與設計 token。
深色玻璃擬態（glassmorphism）、Inter 字體、indigo 品牌主色、emerald 行動色。
支援深色 / 淺色雙主題，網頁右上角可即時切換（選擇會記憶於 localStorage）。
展示內容：色彩、字體、間距、圓角、陰影，以及元件（按鈕、輸入框、狀態標籤、提示、卡片、表格 Table、表單 Form）。
| 檔案 | 說明 |
|---|---|
index.html |
可瀏覽的設計系統網頁（色彩、字體、間距、圓角、陰影、元件）。點色票可複製 token 名稱。 |
tokens.css |
單一真實來源。所有設計 token 以 CSS 變數定義，分 primitive 與 semantic 兩層。 |
tokens.json |
同一套 token 的 JSON 版，供工具鏈 / Figma / Style Dictionary 使用。 |
瀏覽頁是純展示，沒有狀態或資料互動。純 HTML/CSS 可直接被 GitHub Pages 服務， 「推上去就能看」、零 build step。引入 React/Vite 或 Docker 對部署目標沒有幫助，只增加複雜度。
直接用瀏覽器開啟 index.html 即可。
若 fetch/字型受 file:// 限制，可起一個簡易靜態伺服器：
cd design-system
python3 -m http.server 8000
# 開啟 http://localhost:8000<link rel="stylesheet" href="tokens.css" />.my-button {
background: var(--color-action);
color: var(--color-text);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glow-action);
}UI 請只引用 semantic 層（--color-*、--radius-*…），不要直接用 primitive（--indigo-500），
這樣未來改色只需改 tokens.css 一處。
主題由 <html> 上的 data-theme 屬性控制：
<html data-theme="dark"> <!-- 預設，可省略 -->
<html data-theme="light"> <!-- 淺色 -->tokens.css 內 primitive 色票不變，只有 semantic 語意 token 會隨主題覆寫。
因此只要 UI 都引用 semantic token，切換主題即自動套用、無需改任何元件樣式。
切換邏輯與記憶（localStorage ds-theme）寫在 index.html。
- 將此
design-system資料夾內容推到一個 GitHub repo（例如 repo 根目錄，或docs/）。 - 進入 repo 的 Settings → Pages。
- Source 選
Deploy from a branch，Branch 選main，資料夾選/ (root)（若放在docs/就選/docs）。 - 儲存後等一兩分鐘，網址會是
https://<帳號>.github.io/<repo>/。
入口檔已命名為
index.html，GitHub Pages 會自動當首頁，無需額外設定。