Design System

螢光墨紙設計系統

紙感底色 + 一種吵到不行的螢光色，工具型產品的最佳解。

下載起始包

色彩

表面 Surfaces

由後往前：頁面底 → 區塊底 → 卡片 → 卡片內的內嵌面板。

canvas #F7F6F2

canvas-2 #EFEEE9

surface #FFFFFF

surface-2 #F4F4EF

surface-inverse #0A0A0A

文字 Ink

ink 是主文字，ink-2 是說明，ink-3 只能用在非必要資訊上。

ink #0A0A0A

ink-2 #575751

ink-3 #8A8A84

ink-inverse #FFFFFF

強調 Accent

accent 只能當底色或圖形；當文字時一律用 accent-ink。

accent #39FF14

accent-2 #2BE00A

accent-soft rgb(57 255 20 / 0.14)

accent-ink #1E7A0C

on-accent #0A0A0A

語意 Semantic

成功、警告、危險、資訊。每一個都有實心與淡色兩種。

success #1E7A0C

warning #B26A00

danger #C4321F

info #1F5FBF

線條 Lines

line 是髮絲線，line-2 用在需要更明確分隔的地方。

line #E5E3DC

line-2 #D6D3C8

對比檢查

WCAG 2.1：一般文字要 4.5:1，大字與 UI 元件邊界要 3:1。下面那一行「強調色當文字」故意留著，就是要讓你看見為什麼需要 accent-ink。

組合	比值	等級	樣子
主文字 / 頁面底	18.31	AAA	文字範例 Aa
次文字 / 頁面底	6.73	AA	文字範例 Aa
三級文字 / 頁面底	3.21	AA-large	文字範例 Aa
強調文字 / 頁面底	5.05	AA	文字範例 Aa
強調色當文字 / 頁面底	1.25	不合格	文字範例 Aa
按鈕文字 / 強調底	14.60	AAA	文字範例 Aa
反白文字 / 深色面板	19.80	AAA	文字範例 Aa

字級

step-6 Display 六種長相

step-5 H1 挑風格、挑模組

step-4 H2 改一個變數就好

step-3 H3 三個步驟就上線

step-2 H4 功能卡片標題

step-1 Lead 副標與導言用的尺寸

step-0 Body 這是內文的大小，長段落都用這一級。

step--1 Small 說明文字、標籤、footnote

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

圓角

xs

sm

md

lg

xl

pill

陰影

shadow-1

shadow-2

shadow-3

元件與變體

Buttons

Inputs

一般欄位

說明文字放這裡。

錯誤狀態

說明錯在哪，以及怎麼修。

下拉選單

多行文字

勾選框

Badges & Chips

預設 Accent Soft 成功警告危險反白 ⌘K

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

pointertextnot-allowedprogressgrabcol-resizehelpzoom-in

這個風格沿用系統游標。只有粗野等寬換成了自訂游標。

Spacing rhythm

標題上方的空間比下方大

因為標題屬於它下面的段落，不屬於上面的區塊。

這就是群組的方式

上下一樣大的話，整頁會看起來像一堵牆。

完整 token（62 個）

:root {
	--ds-canvas: #F7F6F2;
	--ds-canvas-2: #EFEEE9;
	--ds-surface: #FFFFFF;
	--ds-surface-2: #F4F4EF;
	--ds-surface-inverse: #0A0A0A;
	--ds-overlay: rgb(10 10 10 / 0.45);
	--ds-ink: #0A0A0A;
	--ds-ink-2: #575751;
	--ds-ink-3: #8A8A84;
	--ds-ink-inverse: #FFFFFF;
	--ds-ink-inverse-2: rgb(255 255 255 / 0.62);
	--ds-accent: #39FF14;
	--ds-accent-2: #2BE00A;
	--ds-accent-soft: rgb(57 255 20 / 0.14);
	--ds-accent-ink: #1E7A0C;
	--ds-on-accent: #0A0A0A;
	--ds-success: #1E7A0C;
	--ds-success-soft: rgb(30 122 12 / 0.12);
	--ds-warning: #B26A00;
	--ds-warning-soft: rgb(255 176 32 / 0.16);
	--ds-danger: #C4321F;
	--ds-danger-soft: rgb(196 50 31 / 0.12);
	--ds-info: #1F5FBF;
	--ds-info-soft: rgb(31 95 191 / 0.12);
	--ds-line: #E5E3DC;
	--ds-line-2: #D6D3C8;
	--ds-line-inverse: rgb(255 255 255 / 0.10);
	--ds-radius-lg: calc(16px * var(--ds-radius-scale));
	--ds-radius-control: var(--ds-radius-pill);
	--ds-shadow-1: 0 0 0 1px rgb(10 10 10 / 0.06);
	--ds-shadow-2: 0 2px 8px rgb(10 10 10 / 0.06), 0 18px 40px rgb(10 10 10 / 0.10);
	--ds-shadow-3: 0 2px 8px rgb(10 10 10 / 0.06), 0 24px 60px rgb(10 10 10 / 0.14);
	--ds-ring: 0 0 0 1.5px var(--ds-ink), 0 0 0 3px var(--ds-accent);
	--ds-font-cjk: 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-font-display: Geologica, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-font-body: Geologica, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-font-mono: 'IBM Plex Mono', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif, monospace;
	--ds-weight-body: 400;
	--ds-weight-strong: 600;
	--ds-weight-display: 800;
	--ds-tracking-display: -0.02em;
	--ds-leading-normal: 1.75;
	--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-panel-bg: linear-gradient(170deg, #191919, #0E0E0E);
	--ds-panel-dots: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1.2px);
	--ds-panel-dots-size: 14px 14px;
	--ds-glass-bg: rgb(247 246 242 / 0.15);
	--ds-glass-backdrop: blur(14px) saturate(1.35);
	--ds-glass-shadow: 0 0 0 1px rgb(10 10 10 / 0.06), inset 0 0 0 1.2px rgb(255 255 255 / 0.45), inset 0 1.5px 0 rgb(255 255 255 / 0.65), inset 0 -1px 0 rgb(255 255 255 / 0.30), inset 0 0 14px rgb(255 255 255 / 0.14);
	--ds-btn-weight: 700;
	--ds-btn-radius: var(--ds-radius-pill);
	--ds-card-radius: calc(16px * var(--ds-radius-scale));
	--ds-card-shadow: none;
	--ds-card-shadow-hover: 0 2px 8px rgb(10 10 10 / 0.06), 0 18px 40px rgb(10 10 10 / 0.10);
	--ds-input-radius: calc(10px * var(--ds-radius-scale));
	--ds-label-tracking: 0.32em;
	--ds-tooltip-bg: #0A0A0A;
	--ds-tooltip-ink: #FFFFFF;
	--ds-tooltip-radius: calc(8px * var(--ds-radius-scale));
	--ds-scrollbar-thumb: rgb(87 87 81 / 0.32);
	--ds-scrollbar-thumb-hover: rgb(87 87 81 / 0.55);
}

螢光墨紙設計系統

色彩

表面 Surfaces

文字 Ink

強調 Accent

語意 Semantic

線條 Lines

對比檢查

字級

間距

圓角

陰影

元件與變體

卡片

強調卡片

細節：Tooltip、捲軸、游標

標題上方的空間比下方大

這就是群組的方式

完整 token（62 個）

顯示設定

風格

密度

圓角

動態

語言