配色方案

在 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>