手帳風設計系統:配色、字體與卡片規則

整理本次 blog 視覺語言的 Token 設計與元件落地方式。

先定義 Token,再做元件,最後才組頁面。這樣改版成本最低。

— Paper Tape Notes

三個層次

層級目的輸出
Token建立視覺語言CSS 變數
Component封裝互動與樣式可重用元件
Page組裝內容與導覽最終頁面
設計系統封面圖
以色彩與排版建立一致性