如果我們要手刻一個部落格，而不依賴現有的 UI Libraries，勢必有相當多的樣式要自己考慮。

絕大部分的 UI Libraries，舉凡 Bootstrap、Ant Design、Material UI 等等，都有自己的「設計系統」，包含 Spacing、Typography、Components 等等不勝枚舉的元素。

那麼，什麼是設計系統，我們如果要自己做一套設計系統，又有什麼要考慮的呢？這講就來聊聊這個話題。

何謂設計系統、為什麼要有設計系統？

當我們開始打造一個完整的部落格，當中就會涉及到相當多的頁面，如果要給人一種「一致」的感覺，整體網站的設計就需要統一。

試想一下，一個有相同功用的按鈕如果在頁面 A 有圓角、頁面 B 卻是方方正正的；標題的顏色在 C 頁面是紅的、在 D 頁面卻變成綠的；甚至文字、元件大小在整個網站中都參差不齊，就很容易給人雜亂的感覺。

*不一致的設計感（產自 ChatGPT）

尤其現在（2025-09）的 AI 產出的頁面更是給我這樣的感覺！我蠻常透過 AI 產出一個又一個的頁面，這雖然是一個提供靈感很不錯的方式，並且產生單一頁面的效果也可以說相當棒，但當涉及多個頁面的建構、又不斷修改時，最終就會得到我難以承受的 HTML + CSS，這是因為相同功能的程式碼重複寫了很多遍。

這時設計系統就登場了，其重要功能之一就是實踐 DRY（Don’t Repeat Yourself）原則，把頁面設計中容易重複的部分抽出；並且在收斂的過程中，定義一套規範，指導整體網站的一致性。

除此之外，設計系統也有一個關鍵作用：限制自由度以換取一致性和效率，例如我們在選擇要用什麼顏色的時候，由於色碼的組合有百萬等級以上，太多選擇反而難以選擇，如果限縮成僅數種可選項，就相對容易達成。

設計系統的元素

要制定一個自己的設計系統，最基本的就是先定義設計 Tokens，此處的 Token 可以理解為設計系統中的最小單位，例如色彩、字級、間距、陰影等等，而我認為最常用到、CP 值最高的當屬色彩及字級了。

一旦這兩種 tokens 定義完畢後，體感上在部落格的使用中完全符合二八法則，也就是說色彩和字級大致能覆蓋 80% 的使用情境。基於這兩種 tokens，繼續建構各種元件便能夠輕鬆許多。

那麼，我們便來聊聊色彩和字級。

色彩

一般來說，在設計系統裡面會定義 主色調（Primary） 和 輔助色調（Secondary） 兩種基礎色調。

主色調常用來做主要按鈕（例如 CTA，立即購買這樣的按鈕）、重點連結、活躍標籤等等，使用量頂多佔比網站中的一到兩成。簡單來說，其目的就是用來強調，讓瀏覽者第一眼就能注意到，並可以用這個色彩來建立所謂的「品牌記憶」。

而輔助色調顧名思義就是輔助、不要搶戲，所以一些次要動作的按鈕就可以使用此色調，例如稍後再看、儲存草稿這樣的動作（相對「發布」，儲存草稿就顯得次要）。

*主色調及輔助色調範例

另外一種色彩是功能色調，常見的有成功、警示和錯誤這三種類型。其使用時機就更為明瞭一些，像是表單送出後的 Toast 就可以用 Success、載入資料有問題時就可以使用 Error 色調。

*功能色調範例

雖然定義了多種色調，但好不好看還是得把元素都擺好然後上色，很主觀的實際看一看成果才行。我在產生不同色調的方式，都是先設計一個展示頁面，請 AI 幫我產出 10 種不同的色調組合，最後再憑感覺選出比較滿意的。

字級

至於在字級的定義上，比較需要注意的就是明確不同的小的字要用在哪裡，以及在 RWD 中的使用。

由於 HTML 的標籤中就已經明確制定了 H1 到 H6 這幾個層級，再加上段落、連結，就已將文字類常用標籤涵蓋在內了，接下來對他們定義大小、行高、色彩即可。

*字級範例

使用上，H1 標題主要用在文章和頁面標題、H2 和 H3 分別用在大小段落標題等處。會特別在這些地方使用不同的 HTML 標籤，而不自己用 <div> 或 <p> 設定不同大小來做標題或其他應用，其中一個原因也是因為明確的使用 HTML 有涵義的標籤有利於 SEO。

再來提到 RWD 中的字級，由於不同尺寸的裝置能塞進字的數量本來就不一樣，距人眼閱讀的距離也不相通，通常越小尺寸的裝置中顯示的字就越小一些。

所以在定義字級的實際大小時，就可以是一個範圍，例如 H1 能定義成 24px - 30px 之間，透過 font-size: clamp(24px, 3vw, 30px) 來根據視窗尺寸調整大小。

參考資料

1. Ant Design - Colors
2. Ant Design - Typography
3. Material UI - Color