HCYDS：謝承邑個人網站設計系統

隨著本網站內容的不斷豐富，原先於2022年規劃的一代設計系統已無法有效地管理新需求。除此之外，該設計系統亦有受限於本人當時的設計、開發能力等歷史因素，導致一代設計系統無論是在色彩規劃、功能擴展性、可及性方面，皆有極大的限制或缺陷。

因此，本專案的目標即爲盤點現有之功能需求與設計系統限制，並規劃新一代設計系統。

一代設計系統限制

色彩

一代設計系統中，僅確立土耳其藍（Turkish Blue）為主色，而森綠色（Mori Green）和沙色（Sand Orange）兩色則作為輔色使用。然而，當時的主色僅規劃淺、中、深三種變體，再加上缺乏明確的語意token架構，致使實際使用時不易辨識各色用途、用色混亂、無法對應多樣化的設計元件情境（如：元件的Hover、Active狀態）等問題。另一方面，森綠色、沙色等輔色僅規劃作為裝飾用途的淺色及幾個零星、不規則的變體，潛在性地限制了該輔色本應發揮的定位，導致該色彩定義曖昧。

於本網站中作為文字顏色所使用的灰色色盤，亦有數個問題。首先，是該色盤採用了13階設計，然由於缺乏準確的色彩明度控制，導致前段提及的輔色無法對應至灰色色盤中。此缺點嚴重地影響了深色模式下的色彩轉換規劃。其次，是當初用色時並未考慮WCAG對比度標準、缺乏語意token架構，使得鄰近的灰色被錯誤使用於相同意圖的情境中，或是無法滿足無障礙標準。

第一代謝承邑個人網站設計系統 HCYDS 色盤 — 原先規劃之灰色色盤缺乏準確的明度控制，其他的輔色亦缺乏完整色階，導致泛用性受到限制

字型學（Typography）

本網站所使用之字型大小遵循4倍數設計規律。然而，現有規則中亦有少數不屬於常見倍數的規則（如：100、120）。另外，現存之36、40二者就大小而言已屬於標題層級的範圍，但字號卻相當接近，實際使用時不易區分，形同無效設計。

第一代謝承邑個人網站設計系統 HCYDS 文字大小 — 舊版的文字大小規劃有數個不符合慣例的規則

其他

當初未有考慮間距、圓角、筆畫粗細、陰影等面向，導致相關的設計元素缺乏一致的規則可依循。

Token架構

一代設計系統中，雖存在如--gray-50、--mori-green等CSS變數，然這些變數只集中於「色彩」方面，並未考慮到如間距、圓角、筆畫粗細……等網頁設計中的必要面向。另一方面，現存的變數只能視為基礎token，按理不應直接被使用，衍生出用途不易辨識、設計擴展性低的隱憂。

二代設計系統規劃

規劃理念

延續現有之設計語言與風格，在最小程度視覺變化的前提下，建立具一致邏輯、清晰、易用的設計系統以改善現有體驗，同時使設計與開發負擔最小化。
盤點現行關於色彩、字型學、間距、圓角……等方面之應用案例，並統整規則、針對不合規的設計進行相應調整。
新設計系統應具備高度的擴展彈性，以因應未來可能的多樣化需求。
新設計系統應考慮可及性，建立更友善的瀏覽體驗。

基底規劃

二代設計系統以業界常用的「Tailwind CSS」的規格為基礎，於其上加入自定義設計。此作法對於設計、開發皆有極大的好處：於設計方面，此作法可避免凡事皆需從頭做起的沈重負擔，亦可確保在超出自定義範圍外之需求，仍有可靠的準則供依循；於開發方面，則可預留開發時的彈性。

新版設計系統採用tailwind css為基礎，在提供客製化彈性的同時，也可使超出規範外的設計有可靠的參考

二代設計系統內容一覽

色彩

「色階不足」是一代設計系統的主要痛點。因此，二代設計系統將本網站所使用的土耳其藍、沙色、森綠色等全數擴充至11階，並追加紅色、黃色、紫色三色相，以規範網頁中的錯誤狀態、警告狀態、特殊用途等需求。

第二代謝承邑個人網站設計系統 HCYDS 色盤一覽 — 二代將所有色階皆擴增至11階，並以OKLCH色彩模型為基礎，加入了準確的明度控制，使顏色互換成為可能

為了確保不同色相之間的同一色階都具有一致的明度，並最終創造出具有良好可及性的色彩搭配，本設計系統採用了OKLCH色彩模型來控制色彩明度。選擇OKLCH而非HSL的優勢在於，OKLCH的明度代表色彩的「感知明度」。這意味著即使色相不同，只要色階相同，兩種顏色的明度就會非常接近，自然也就有相似的對比度。因此，使用時即可自由地替換色彩，而無需擔心影響可及性。

色彩明度獲得妥善控制後，設定設計元素的Hover、Active、Disabled等狀態就變得非常地容易。「Surface」語意token中規範了關於不同表面的狀態，以常用的surface-brand為例，該表面索引了土耳其藍600號（主色）的數值。若需索引該表面的hover、active狀態顏色，只需加上相應的後綴，索引surface-brand-hover及surface-brand-active即可。

借助OKLCH的感知明度特性，以往所難以實現的「動態色彩」設計亦成為可能。本網站中的「推廣內容」區塊即採用動態色彩設計，只需指定該內容的主色，後續程式即可自動計算對應區域所需使用的色階，提供更沈浸、客製化的體驗。

第二代謝承邑個人網站設計系統 HCYDS 動態推廣內容色彩設計 — 借助前述的明度控制規劃，即可以程式自動計算不同主色下的對應區域顏色，同時不影響可及性

※為方便於Figma中使用，所有的顏色規範皆以軟體有支援的HEX值表示。本色彩規劃並無使用超出sRGB色彩空間之顏色，因此此舉不會影響最終視覺呈現。

字型學（Typography）

於基礎token中，本網站採用Tailwind CSS所規範之字體大小數值。建立在此基礎之上，二代設計系統開發了自定義的「動態字級」語意token，所有的文字數值會於窗口大小低於1024px時，重新映射至最大48px的範圍。這些動態字級被應用於本網站的14種不同文字樣式所對應的語意css class中，有效地減少開發時不知道該套用何種class的困惑，又可自動擁有良好的RWD設計。