Design System

粗野等寬設計系統

零圓角、硬陰影、粗黑框，適合活動頁與想被記住的產品。

下載起始包

色彩

表面 Surfaces

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

canvas #FFFFFF

canvas-2 #F2F2F2

surface #FFFFFF

surface-2 #F2F2F2

surface-inverse #000000

文字 Ink

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

ink #000000

ink-2 #3D3D3D

ink-3 #767676

ink-inverse #FFFFFF

強調 Accent

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

accent #FF3B00

accent-2 #D93000

accent-soft #FFE500

accent-ink #D93000

on-accent #FFFFFF

語意 Semantic

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

success （沿用預設）

warning （沿用預設）

danger （沿用預設）

info （沿用預設）

線條 Lines

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

line #000000

line-2 #000000

對比檢查

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

組合	比值	等級	樣子
主文字 / 頁面底	21.00	AAA	文字範例 Aa
次文字 / 頁面底	10.86	AAA	文字範例 Aa
三級文字 / 頁面底	4.54	AA	文字範例 Aa
強調文字 / 頁面底	4.80	AA	文字範例 Aa
強調色當文字 / 頁面底	3.57	AA-large	文字範例 Aa
按鈕文字 / 強調底	3.57	AA-large	文字範例 Aa
反白文字 / 深色面板	21.00	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

這個風格換掉了預設與 pointer 游標 —— 移到上面看看。

Spacing rhythm

標題上方的空間比下方大

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

這就是群組的方式

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

完整 token（59 個）

:root {
	--ds-canvas: #FFFFFF;
	--ds-canvas-2: #F2F2F2;
	--ds-surface: #FFFFFF;
	--ds-surface-2: #F2F2F2;
	--ds-surface-inverse: #000000;
	--ds-overlay: rgb(0 0 0 / 0.5);
	--ds-ink: #000000;
	--ds-ink-2: #3D3D3D;
	--ds-ink-3: #767676;
	--ds-ink-inverse: #FFFFFF;
	--ds-accent: #FF3B00;
	--ds-accent-2: #D93000;
	--ds-accent-soft: #FFE500;
	--ds-accent-ink: #D93000;
	--ds-on-accent: #FFFFFF;
	--ds-danger-on-inverse: #FF7A5C;
	--ds-line: #000000;
	--ds-line-2: #000000;
	--ds-border-width: 2px;
	--ds-font-display: Archivo, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-font-body: Archivo, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-font-mono: 'JetBrains Mono', monospace;
	--ds-weight-display: 900;
	--ds-weight-strong: 700;
	--ds-tracking-display: -0.04em;
	--ds-leading-tight: 0.98;
	--ds-radius-scale: 0;
	--ds-radius-pill: 0px;
	--ds-radius-control: 0px;
	--ds-card-radius: 0px;
	--ds-shadow-1: 0 0 0 2px #000000;
	--ds-shadow-2: 4px 4px 0 0 #000000;
	--ds-shadow-3: 8px 8px 0 0 #000000;
	--ds-ring: 0 0 0 3px #FFE500, 0 0 0 6px #000000;
	--ds-card-border: 2px solid #000000;
	--ds-card-shadow: 4px 4px 0 0 #000000;
	--ds-card-shadow-hover: 8px 8px 0 0 #FF3B00;
	--ds-btn-shadow: 3px 3px 0 0 #000000;
	--ds-btn-shadow-hover: 5px 5px 0 0 #000000;
	--ds-btn-translate-hover: 2px;
	--ds-btn-weight: 700;
	--ds-btn-transform: uppercase;
	--ds-btn-tracking: 0.06em;
	--ds-input-border: 2px solid #000000;
	--ds-label-transform: uppercase;
	--ds-label-tracking: 0.1em;
	--ds-panel-bg: linear-gradient(0deg, #000, #000);
	--ds-tooltip-bg: #000000;
	--ds-tooltip-ink: #FFE500;
	--ds-tooltip-radius: 0px;
	--ds-tooltip-shadow: 4px 4px 0 0 #FF3B00;
	--ds-scrollbar-size: 14px;
	--ds-scrollbar-radius: 0px;
	--ds-scrollbar-track: #F2F2F2;
	--ds-scrollbar-thumb: #000000;
	--ds-scrollbar-thumb-hover: #FF3B00;
	--ds-scrollbar-border: 3px;
	--ds-cursor-default: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M3 2 L3 19.5 L8.2 14.6 L11.2 21 L14.4 19.4 L11.4 13.3 L18 13.3 Z' fill='%23000000' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/></svg>") 3 2, auto;
	--ds-cursor-pointer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><path d='M3 2 L3 19.5 L8.2 14.6 L11.2 21 L14.4 19.4 L11.4 13.3 L18 13.3 Z' fill='%23FF3B00' stroke='%23000000' stroke-width='1.6' stroke-linejoin='round'/></svg>") 3 2, pointer;
}

粗野等寬設計系統

色彩

表面 Surfaces

文字 Ink

強調 Accent

語意 Semantic

線條 Lines

對比檢查

字級

間距

圓角

陰影

元件與變體

卡片

強調卡片

細節：Tooltip、捲軸、游標

標題上方的空間比下方大

這就是群組的方式

完整 token（59 個）

顯示設定

風格

密度

圓角

動態

語言