Design System

北歐靜白設計系統

安靜、留白多、不搶戲，B2B 與後台的預設安全牌。

下載起始包

色彩

表面 Surfaces

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

canvas #FBFBFA

canvas-2 #F3F5F4

surface #FFFFFF

surface-2 #F3F5F4

surface-inverse #1C1F23

文字 Ink

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

ink #1C1F23

ink-2 #5C636B

ink-3 #98A0A8

ink-inverse #FFFFFF

強調 Accent

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

accent #3B6FE0

accent-2 #2F5CC4

accent-soft rgb(59 111 224 / 0.10)

accent-ink #2F5CC4

on-accent #FFFFFF

語意 Semantic

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

success （沿用預設）

warning （沿用預設）

danger （沿用預設）

info （沿用預設）

線條 Lines

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

line #E4E7E5

line-2 #D2D7D4

對比檢查

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

組合	比值	等級	樣子
主文字 / 頁面底	15.97	AAA	文字範例 Aa
次文字 / 頁面底	5.88	AA	文字範例 Aa
三級文字 / 頁面底	2.56	不合格	文字範例 Aa
強調文字 / 頁面底	5.88	AA	文字範例 Aa
強調色當文字 / 頁面底	4.47	AA-large	文字範例 Aa
按鈕文字 / 強調底	4.63	AA	文字範例 Aa
反白文字 / 深色面板	16.54	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（33 個）

:root {
	--ds-canvas: #FBFBFA;
	--ds-canvas-2: #F3F5F4;
	--ds-surface: #FFFFFF;
	--ds-surface-2: #F3F5F4;
	--ds-surface-inverse: #1C1F23;
	--ds-overlay: rgb(28 31 35 / 0.4);
	--ds-ink: #1C1F23;
	--ds-ink-2: #5C636B;
	--ds-ink-3: #98A0A8;
	--ds-ink-inverse: #FFFFFF;
	--ds-accent: #3B6FE0;
	--ds-accent-2: #2F5CC4;
	--ds-accent-soft: rgb(59 111 224 / 0.10);
	--ds-accent-ink: #2F5CC4;
	--ds-on-accent: #FFFFFF;
	--ds-line: #E4E7E5;
	--ds-line-2: #D2D7D4;
	--ds-font-display: Inter, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-font-body: Inter, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
	--ds-weight-display: 650;
	--ds-tracking-display: -0.02em;
	--ds-leading-normal: 1.68;
	--ds-radius-control: calc(8px * var(--ds-radius-scale));
	--ds-shadow-2: 0 1px 2px rgb(28 31 35 / 0.04), 0 10px 30px rgb(28 31 35 / 0.06);
	--ds-card-shadow: 0 1px 2px rgb(28 31 35 / 0.04);
	--ds-card-radius: calc(14px * var(--ds-radius-scale));
	--ds-section-y: clamp(56px, 8vw, 128px);
	--ds-glass-bg: rgb(255 255 255 / 0.78);
	--ds-label-tracking: 0.14em;
	--ds-tooltip-bg: #1C1F23;
	--ds-tooltip-ink: #FFFFFF;
	--ds-scrollbar-thumb: rgb(92 99 107 / 0.3);
	--ds-scrollbar-thumb-hover: rgb(92 99 107 / 0.52);
}

北歐靜白設計系統

色彩

表面 Surfaces

文字 Ink

強調 Accent

語意 Semantic

線條 Lines

對比檢查

字級

間距

圓角

陰影

元件與變體

卡片

強調卡片

細節：Tooltip、捲軸、游標

標題上方的空間比下方大

這就是群組的方式

完整 token（33 個）

顯示設定

風格

密度

圓角

動態

語言