設計系統 | Brian Huang

01 / 設計靈魂

它把作品集裡實際用到的 token、共用元件與案例頁模式整理成清楚的規則，讓每個畫面都能維持穩定的節奏，也保留不同專案自己的個性。從顏色、間距到元件邊界，每一次調整都有可以回頭檢查的依據。

細緻有溫度穩定有個性

先定「細緻、有溫度、穩定有個性」的調性，才加視覺元素。首頁靠 cursor tag、便利貼營造個性，而不是堆特效。

每個案例有自己的主色 tone，但卡片、資訊架構、排版全站一致；三個案例頁共用同一套 Case Study pattern，只換 `tone-xxx`。

紫色只留給 CTA 與 active，不大面積出現。面試官的視線該落在作品本身，不被 accent 或裝飾搶走。

動畫分場合：首頁與 About 有入場動畫營造生命感，案例頁幾乎收手，讓注意力留在案子上。

資訊量大的案例頁仍守住留白底線（文字最少 24px 內距），高密度不等於擁擠。

每個顏色、字級、間距都有 token 名字，改一次全站跟著改。設計交付的是可維護的規格，不是一張圖。

hover / active / focus / disabled 都要處理；未上線案子用 disabled 底色不讓人誤點——完整度看的是邊角狀態。

不是所有看起來重複的 layout 都該抽成共用元件。可複用層負責 token、穩定外框與 contract；跟故事綁在一起的幾何，留在 route-local。

Layer 01

包含 runtime token、UI primitives、導覽、ProjectCard 行為，以及案例頁的 card、grid、media、section header、before / after frame 等穩定外框。

Layer 02

流程圖、矩陣、connector 端點、scenario board 與媒體裁切規則，如果幾何本身承載案例故事，就可以留在 local。