實驗 1 · 設計規則手冊

專案與結構

這一頁本身就是用這套技術棧寫的：

視覺風格

頁面背景、噪點、滾動條就是規則本身；色板 / 字體 / 描邊直接看下面：

佈局與響應式

把視窗從窄拉到寬——間距和標題字號是連續變化的，沒有斷點跳變。

樣式組織

globals.css 只放設計令牌；組件樣式用同名 CSS Module 就近維護：

/* globals.css — design tokens only */
@theme {
  --color-paper: …;
  --color-ink: …;
  --font-display: "Patrick Hand", "ZCOOL KuaiLe";
}
:root { --gutter: min(6rem, 2.5vw); }

站點定位

這是個個人實驗網站，不是部落格；不寫學歷、經歷、職業頭銜：

多語言 · 三語是規則

導航欄與頁面工具列切換語言——這本身就是演示。

視覺移植

裝飾、按鈕、卡片、圖標都是移植規則的結果：