Steven J. Hu

Tailwind 定制視覺,而不是套組件庫

用 design tokens 建立品牌感,避開預設 UI kit 的千篇一律。

  • 設計
  • Tailwind

很多個人站一開始就裝完整元件庫,結果品牌訊號被按鈕樣式蓋過。

先定色票與字體

這個站用深夜墨藍底與冷青強調色,顯示字用 Fraunces,內文用 Noto Sans TC。變數集中在 global.css,之後改主題不必翻遍元件。

第一視口只做一件事

首頁只放品牌、一句定位、一組 CTA,以及一塊全寬氣氛視覺。統計列、行程卡、貼紙徽章一律留給後面區塊——或乾脆不要。

動效服務層級

進場用 CSS + IntersectionObserver;需要敘事張力才上 GSAP。prefers-reduced-motion 一律提供靜態後備。