FOUNDATIONS · COLOR

墨、紙,與一抹黎明

單色基底承載一切內容;dawn orange 是唯一的重點色。亮色模式的 #A94700 在 paper 上對比 5.51:1,可作為可操作的連結;暗色模式的 #E59B5B 同時用於連結與編者口吻。

TOKENS

色彩代幣

TOKENLIGHTDARKUSAGE

ink

主要文字、標題

inkSoft

次要文字、內文

paper

頁面背景

paperDeep

凹陷背景、區塊底

card

卡片與表面

muted

說明、後設資訊

faint

裝飾與非必要記號，不用於可讀文字

border

細線、分隔

accent

連結、編者聲音、小標記

tan

既有中性細節，不作第二重點色

success

狀態圖形；搭配文字，不作文字色

RULE

使用原則

以單色建立層次;黎明橘只用於連結、編者按的直線、小型標記。

DON'T

用黎明橘填滿大面積背景、按鈕或插圖;把 success 當作第二重點色。

WHY封面是黑白的,只有編輯的聲音帶有溫度。重點色越少,它說話時越有力量。

SEMANTIC ALIASES

值不變，語意更清楚

基礎代幣描述材料，語意別名描述任務。元件優先用角色；切換模式時，只換基礎值，不在每個元件重寫顏色。

角色	CSS 別名	對映
Text	--text-primary / --text-secondary / --text-meta	ink / inkSoft / muted
Surface	--surface-page / --surface-inset / --surface-raised	paper / paperDeep / card
Line	--line-subtle / --line-strong	border / strong
Accent	--accent	dawn → 連結、編者聲音、小標記
Status	--status-success	success → 狀態圖形，文字仍用 ink

CSS

:root {
  --text-primary: var(--ink); --text-secondary: var(--ink-soft);
  --text-meta: var(--muted); --surface-page: var(--paper);
  --surface-inset: var(--paper-deep); --surface-raised: var(--card);
  --line-subtle: var(--border); --line-strong: var(--strong);
  --accent: var(--dawn); --status-success: var(--success);
}

PAIRING

配對與面積

用途	前景 / 背景	限制
閱讀	inkSoft / paper	長文不降低透明度
圖說	muted / paper	faint 不作必要文字
主要按鈕	paper / ink	不改成橘色填底
狀態	ink 文字 + success 圖形	不以顏色單獨傳遞資訊

讓墨紙占據版面；曙光橘只作節制的語意訊號。

DON'T

用橘色鋪滿背景、卡片或插圖；將歷史配色帶回主題。

CSS

複製代幣

CSS

:root {
  --ink: #1A1A1A;  --ink-soft: #333333;
  --paper: #FAF8F3; --paper-deep: #EFEBE2;
  --card: #FFFFFF;  --muted: #6E6A62; --faint: #B3AEA4;
  --border: rgba(0,0,0,.10);
  --accent: #A94700; --tan: #B49A7C; --success: #2BAB9F;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F0EB;  --ink-soft: #D4D1CC;
    --paper: #161513; --paper-deep: #26261F;
    --card: #282826;  --muted: #A39E96; --faint: #676460;
    --border: rgba(255,255,255,.14);
    --accent: #E59B5B;
  }
}