手帳風設計系統:配色、字體與卡片規則
整理本次 blog 視覺語言的 Token 設計與元件落地方式。
先定義 Token,再做元件,最後才組頁面。這樣改版成本最低。
— Paper Tape Notes
三個層次
| 層級 | 目的 | 輸出 |
|---|---|---|
| Token | 建立視覺語言 | CSS 變數 |
| Component | 封裝互動與樣式 | 可重用元件 |
| Page | 組裝內容與導覽 | 最終頁面 |
整理本次 blog 視覺語言的 Token 設計與元件落地方式。
先定義 Token,再做元件,最後才組頁面。這樣改版成本最低。
— Paper Tape Notes
| 層級 | 目的 | 輸出 |
|---|---|---|
| Token | 建立視覺語言 | CSS 變數 |
| Component | 封裝互動與樣式 | 可重用元件 |
| Page | 組裝內容與導覽 | 最終頁面 |