색상 팔레트

Tailwind 설정에 정의된 브랜드 및 UI 색상. 모든 페이지에서 이 클래스를 일관되게 사용하세요.

브랜드

그레이 스케일

상태 색상

타이포그래피

두 글꼴 패밀리가 타입 시스템을 구성합니다. 제목과 디스플레이에는 Audiowide, 본문과 UI에는 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>