カラーパレット

Tailwind 設定で定義されたブランドと UI のカラー。すべてのページでこれらのクラスを一貫して使用してください。

ブランド

グレースケール

ステータスカラー

タイポグラフィ

2つの書体ファミリーがタイプシステムを構成します。見出しとディスプレイには Audiowide、本文と UI には Inter（サンセリフ）。

ボタン

ボタンは3つの要素を組み合わせます。バリアント（色）、サイズ、任意のエフェクト。

バリアント

サイズ

エフェクト

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