品牌規範

這是 ColoureDev Studio 自己的設計系統，也是內部標準文件。公開的理由很簡單：與其形容我們怎麼做設計系統，不如直接讓你看一份。

色彩

品牌本色維持中性，把所有色彩表現力保留給案例。主背景不用純白：#FAF8F5 帶極淡暖調，能降低長時間閱讀的刺眼感。

--ink#1A1A1A主文字、深色區塊

--ink-soft#3A3A3A次要文字

--grey#6B6B6B說明文字、圖說

--grey-light#9A9A9A停用狀態、佔位符

--line#E4DFD7分隔線、邊框

--surface#F2EEE8卡片、次要區塊背景

--paper#FAF8F5主背景（不用純白）

--success#2E7D5B成功狀態

--warning#8F6708警告

--danger#C0392B錯誤

--info#2C6E9B提示

「彩」如果直接翻譯成彩虹漸層，那是 2015 年的視覺。真正該做的是把它變成一套系統規則。

每一個案例頁的強調色，由該案的主視覺決定。連結、按鈕、區塊標記、進度指示全都跟著換色。訪客滑過十件作品，會看到網站跟著作品變色 — 他不需要讀任何文字，就理解了「ColoureDev Studio」在做什麼。

關鍵技術決定：色票在建置階段預先算好，不在瀏覽器端做影像取樣。瀏覽器端取樣要等影像載入，會造成色彩閃爍；Canvas 取樣是主執行緒同步操作，會拖累 INP；而且建置期才做得了無障礙校正。

步驟	做法
1　色群抽取	k-means (k=5)，取樣前降採樣至 200px 寬
2　排除	亮度 L > 92 的近白、L < 12 的近黑、佔比 < 5% 的雜訊色群
3　選擇	剩餘色群中彩度最高者為候選主色
4　對比校正	與 `--paper` 對比度 < 4.5:1 時，在 OKLCH 空間每次降 L 0.03，保持 H 與 C，最多 12 次
5　衍生色	weak：L +0.25 / C ×0.6　strong：L −0.10 / C ×1.05　on-accent：白或墨取對比高者
6　退回	仍未達標則退回品牌預設 #C75B39，並在 CMS 標記「待人工指定色票」

為什麼用 OKLCH 而非 HSL：HSL 的亮度不符合人眼感知，同樣的 L 值在黃色與藍色上的視覺亮度差異極大，會導致校正結果不一致。

可以用於：案例頁的連結底線、主要按鈕背景、區塊標記、引言區塊的左側線條、資料視覺化的主色。

不能用於：內文文字色、大面積背景、導覽列、錯誤／成功狀態。動態色是調味，不是主食。用得太多，網站會失去統一感。

內文最小 16px（否則 iOS Safari 會在表單聚焦時自動縮放）。段落最大寬度 68 個中文字，約 720px。行高不得低於 1.7 — 中文字密度高，行高不足會造成「字牆」。兩端對齊在中文網頁上禁用：中文沒有連字符，justify 會產生極大的字間空隙。

英文字級補償 5–8%，中文字距 0.02em（標題可到 0.04em），西文字距 0。全大寫英文加 0.08em 字距。中英之間插入細空格。

「韻」在版面上不是動畫特效，是留白與密度的交替。多數網站的問題是節奏均勻 — 均勻的東西沒有節奏，只有單調。

首頁的節奏：疏 → 密 → 疏 → 中 → 中 → 疏 → 疏。柱高代表內容密度。區塊之間的垂直間距只能用 --s-9 / --s-10 / --s-11 三個值 — 這個限制就是節奏的來源。

全站只有一種動作。十種特效叫吵，一種特效叫韻。

屬性	opacity: 0 → 1 + translateY: 8px → 0
時長	320ms
緩動	cubic-bezier(0.16, 1, 0.3, 1)
觸發	IntersectionObserver, threshold 0.15
重播	否
交錯	同組元素延遲 60ms 遞增，最多 5 個

視差捲動、捲動劫持、自動輪播、游標跟隨效果、入場即播的影片、載入動畫、逐字打字效果。每一項都有具體理由：效能、暈眩風險、無障礙災難，或單純沒有人會看到第二張。

對客戶用「你」不用「您」，建立平等的專業關係。原則：每一句話都要能被驗證，無法驗證的形容詞一律刪除。

這些數字寫進 CI，超標則建置失敗。對設計工作室這是必須的，不是加分 — 你的網站就是你的履歷。

服務線 03 交付的就是這種東西：代幣、元件庫、Storybook 與交接文件。