作品集設計系統
此網站擁有一個設計系統。在進行任何樣式修改之前，請先閱讀儲存庫根目錄下的 DESIGN.md，並以此為基礎進行工作。
規則
- 每個顏色、字型大小、間距尺度、圓角半徑和持續時間，都應是位於
index.html頂端:root區塊中的 CSS 自訂屬性（Token）。在規則中使用 Token。切勿撰寫任何 Token 已涵蓋的原始十六進位值、像素尺寸或持續時間。 - 新的值需要在
:root中建立新的 Token，並在DESIGN.md中新增對應的行，所有變更應在同一組修改中完成。 設計系統也以 Design System artifact 的形式存在於 Claude (https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1)。當此處的 Token、模式或規則發生變更時，必須在同一項工作中同時更新該 artifact 的project/tokens.json和project/README.md，以確保三個副本永不偏離。 - 文字和背景必須成對出現。新增的面板顏色類別必須同時設定兩者。請根據
DESIGN.md中的 AA 清單檢查配對情況，並在提出 pull request 前執行README.md中提到的 axe 掃描。 - 本網站沒有深色模式。請勿新增
prefers-color-scheme: dark規則。頁面有意將color-scheme設定為light。 - 動畫效果使用
--ease和--dur-*Token，並且必須在prefers-reduced-motion: reduce啟用時停止。 - 測試時需在 390px 和 1280px 兩種寬度下進行，並分別在減少動畫效果開關開啟和關閉的狀態下，使用
webapp-testing技能進行測試。樣式重構前後應產生像素級別完全一致的螢幕截圖。
各項資源位置
- Token：位於
index.html的:root區塊 - 參考資料與模式目錄：
DESIGN.md - Three.js 顏色：
scene.js中的十六進位文字，需手動與色板保持同步 - Claude 中的副本：https://claude.ai/artifact/2iPwsVBSqA9gs8nkaYC5g1（Token、品牌手冊、元件預覽）