配色方案

在 Tailwind 設定中定義的品牌與介面顏色。在所有頁面中一致地使用這些類別。

品牌

灰階

狀態色

排版

兩個字體家族構成排版系統。Audiowide 用於標題與展示文字，Inter（無襯線）用於內文與介面。

按鈕

按鈕組合三樣東西：變體（顏色）、尺寸與可選效果。

變體

尺寸

效果

.btn-glow is the standard CTA halo. .btn-glow-intense doubles it for the single most important CTA on a page. .btn-shimmer adds a one-shot light sweep on hover. .btn-press adds a micro scale-down on click for tactile feedback.

用法

<!-- Variant + size + effect compose freely -->
<button class="btn-primary btn-lg btn-glow">Get Started</button>
<button class="btn-secondary btn-md">Learn more</button>
<button class="btn-ghost btn-sm btn-press">Cancel</button>

/* CSS — src/styles/globals.css */
.btn-glow:hover { box-shadow: 0 0 12px rgba(240,230,200,0.15), 0 0 24px rgba(240,230,200,0.05); }
.btn-press:active { transform: scale(0.96); }

表面

玻璃、卡片、徽章與分頁。香檳色調的玻璃是 VGS 的標誌性表面。

玻璃

卡片

徽章

動畫

捲動觸發的動畫為可選啟用。它們始終遵循「減少動態效果」設定。

捲動動畫

<!-- Staggered children -->
<div data-stagger="100">
  <div data-animate>0ms delay</div>
  <div data-animate>100ms delay</div>
  <div data-animate>200ms delay</div>
</div>

圖示

公開頁面使用 Font Awesome Etch 圖示包 —— 一個約 280 個圖示、風格統一的精選子集。

<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>