Design System
雜誌襯線 設計系統
大標襯線、細線分隔、留白慷慨，適合品牌故事與長文閱讀。
色彩
表面 Surfaces
由後往前：頁面底 → 區塊底 → 卡片 → 卡片內的內嵌面板。
canvas #FBF8F2canvas-2 #F3EEE4surface #FFFDF9surface-2 #F3EEE4surface-inverse #23201C文字 Ink
ink 是主文字，ink-2 是說明，ink-3 只能用在非必要資訊上。
ink #23201Cink-2 #655E53ink-3 #9A9184ink-inverse #FBF8F2強調 Accent
accent 只能當底色或圖形；當文字時一律用 accent-ink。
accent #8A3324accent-2 #71281Baccent-soft rgb(138 51 36 / 0.10)accent-ink #8A3324on-accent #FBF8F2語意 Semantic
成功、警告、危險、資訊。每一個都有實心與淡色兩種。
success （沿用預設）warning （沿用預設）danger （沿用預設）info （沿用預設）線條 Lines
line 是髮絲線，line-2 用在需要更明確分隔的地方。
line #E2DACBline-2 #CDC2AD對比檢查
WCAG 2.1：一般文字要 4.5:1，大字與 UI 元件邊界要 3:1。 下面那一行「強調色當文字」故意留著，就是要讓你看見為什麼需要 accent-ink。
| 組合 | 比值 | 等級 | 樣子 |
|---|---|---|---|
| 主文字 / 頁面底 | 15.30 | AAA | 文字範例 Aa |
| 次文字 / 頁面底 | 6.04 | AA | 文字範例 Aa |
| 三級文字 / 頁面底 | 2.93 | 不合格 | 文字範例 Aa |
| 強調文字 / 頁面底 | 7.68 | AAA | 文字範例 Aa |
| 強調色當文字 / 頁面底 | 7.68 | AAA | 文字範例 Aa |
| 按鈕文字 / 強調底 | 7.68 | AAA | 文字範例 Aa |
| 反白文字 / 深色面板 | 15.30 | AAA | 文字範例 Aa |
字級
Display — 標題用字 AaBbCc 字體樣本
Body — 內文用字 AaBbCc 字體樣本
Mono — 0123456789 tabular nums
間距
space-1 space-2 space-3 space-4 space-5 space-6 space-7 space-8 space-9 space-10 space-11 space-12 圓角
xssmmdlgxlpill陰影
shadow-1shadow-2shadow-3元件與變體
Buttons
Inputs
說明文字放這裡。
說明錯在哪，以及怎麼修。
Badges & Chips
Feedback
這是一則說明訊息。
儲存成功。
額度快用完了。
上傳失敗，檔案超過 2GB。
Surfaces
卡片
預設卡片：邊框 + 圓角 + 可選陰影。
強調卡片
data-featured：加深邊框並抬高陰影。
內嵌深色面板
--ds-panel-bg
玻璃層 .ds-glass
Motion
dur-1dur-2dur-3滑過去看差別。系統設定「減少動態」時，全部會變成 0ms。
細節：Tooltip、捲軸、游標
三個最常被跳過、但一眼就看得出有沒有做的地方。每個風格都有自己的一套值。
Tooltip
滑過去，或用 Tab 聚焦 —— 兩種都會出現。
Scrollbar
主題化
項目 01
項目 02
項目 03
項目 04
項目 05
項目 06
項目 07
項目 08
項目 09
項目 10
hover 才出現
項目 01
項目 02
項目 03
項目 04
項目 05
項目 06
項目 07
項目 08
項目 09
項目 10
隱藏＋淡出
項目 01
項目 02
項目 03
項目 04
項目 05
項目 06
項目 07
項目 08
項目 09
項目 10
Cursor
這個風格沿用系統游標。只有粗野等寬換成了自訂游標。
Spacing rhythm
標題上方的空間比下方大
因為標題屬於它下面的段落，不屬於上面的區塊。
這就是群組的方式
上下一樣大的話，整頁會看起來像一堵牆。
完整 token（46 個）
:root {
--ds-canvas: #FBF8F2;
--ds-canvas-2: #F3EEE4;
--ds-surface: #FFFDF9;
--ds-surface-2: #F3EEE4;
--ds-surface-inverse: #23201C;
--ds-overlay: rgb(35 32 28 / 0.42);
--ds-ink: #23201C;
--ds-ink-2: #655E53;
--ds-ink-3: #9A9184;
--ds-ink-inverse: #FBF8F2;
--ds-accent: #8A3324;
--ds-accent-2: #71281B;
--ds-accent-soft: rgb(138 51 36 / 0.10);
--ds-accent-ink: #8A3324;
--ds-on-accent: #FBF8F2;
--ds-line: #E2DACB;
--ds-line-2: #CDC2AD;
--ds-font-display: 'Instrument Serif', 'Songti TC', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
--ds-font-body: 'Source Serif 4', 'Songti TC', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
--ds-font-mono: ui-monospace, Menlo, monospace;
--ds-weight-display: 400;
--ds-weight-strong: 600;
--ds-tracking-display: -0.015em;
--ds-leading-tight: 1.06;
--ds-leading-normal: 1.78;
--ds-leading-relaxed: 1.95;
--ds-step-6: clamp(3rem, 2rem + 5vw, 6rem);
--ds-radius-scale: 0.4;
--ds-radius-control: calc(6px * var(--ds-radius-scale));
--ds-card-shadow: none;
--ds-card-border: 1px solid #E2DACB;
--ds-shadow-2: 0 1px 2px rgb(35 32 28 / 0.05), 0 12px 32px rgb(35 32 28 / 0.07);
--ds-container: 1040px;
--ds-container-narrow: 660px;
--ds-section-y: clamp(64px, 9vw, 144px);
--ds-btn-weight: 600;
--ds-label-tracking: 0.24em;
--ds-label-transform: uppercase;
--ds-texture: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.05'/></svg>");
--ds-texture-size: 160px 160px;
--ds-tooltip-bg: #23201C;
--ds-tooltip-ink: #FBF8F2;
--ds-tooltip-size: var(--ds-step--1);
--ds-scrollbar-size: 8px;
--ds-scrollbar-thumb: rgb(101 94 83 / 0.3);
--ds-scrollbar-thumb-hover: rgb(101 94 83 / 0.55);
}