Hệ thống Thiết kế.

Nguồn tham chiếu chuẩn cho bộ quy chuẩn thương hiệu VGS, thư viện thành phần và các mẫu thiết kế được sử dụng trên tất cả các trang công khai.

Bảng màu

Màu thương hiệu và giao diện được định nghĩa trong cấu hình Tailwind. Hãy sử dụng các lớp này một cách nhất quán trên tất cả các trang.

Thương hiệu

brand-500

#F0E6C8

brand-400

#F4ECCE

brand-300

#FAF6E7

brand-600

#B5A87F

brand-700

#B45309

brand-800

#92400E

Thang xám

gray-900

#18181b

gray-800

#27272a

gray-700

#3f3f46

gray-600

#52525b

gray-500

#71717a

gray-400

#a1a1aa

Màu Trạng thái

emerald-400

Success

rose-500

Danger

sky-400

Info

amber-500

Warning

Kiểu chữ

Hai họ phông chữ tạo nên hệ thống kiểu chữ. Audiowide cho tiêu đề và chữ hiển thị, Inter (sans-serif) cho phần thân và giao diện.

Tiêu đề font-audiowide uppercase tracking-tight

Tiêu đề Cấp 1

text-4xl md:text-6xl font-audiowide uppercase

Tiêu đề Cấp 2

text-3xl md:text-4xl font-audiowide uppercase

Tiêu đề Cấp 3

text-xl font-audiowide uppercase

Chữ Thân Sans-serif mặc định (Inter), text-gray-400 cho chữ phụ

Chữ thân sử dụng Inter ở nhiều kích cỡ khác nhau. Màu mặc định là trắng cho nội dung chính và gray-400 cho mô tả phụ và chữ hỗ trợ.

text-lg text-gray-400 leading-relaxed

Nhãn & Chú thích text-xs uppercase tracking-wider text-gray-500

Nhãn Mục

Nút

Nút kết hợp ba thứ: một biến thể (màu sắc), một kích thước và một hiệu ứng tùy chọn. Cả ba lớp đều xếp chồng trên nền .btn.

Biến thể

Kích thước

Hiệu ứng

.btn-glow là vầng hào quang CTA tiêu chuẩn. .btn-glow-intense tăng gấp đôi nó cho CTA quan trọng nhất trên một trang. .btn-shimmer thêm một vệt sáng quét một lần khi hover. .btn-press thêm hiệu ứng thu nhỏ nhẹ khi nhấp để tạo phản hồi xúc giác.

Cách dùng

<!-- 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); }

Bề mặt

Kính, thẻ, huy hiệu và tab. Lớp kính ánh sắc champagne là bề mặt đặc trưng của VGS — hãy dùng nó cho nội dung nổi bật trên nền tối.

Kính

.glass

Bề mặt kính tiêu chuẩn. Nền mờ ánh sắc champagne, bo góc 16px. Tốt nhất cho các mục toàn chiều rộng và lớp phủ hero.

.glass-card

Biến thể rõ nét hơn một chút với độ mờ 12px. Thay thế trực tiếp khi .glass cảm thấy quá nhẹ.

Thẻ

.card

Thẻ mờ cơ bản. Đệm 6, bo góc sm.

.card-elevated

Thêm một bóng đổ nhẹ. Dùng tiết chế để tạo độ nổi.

.card-interactive

Con trỏ kiểu nhấn + trạng thái hover. Dùng khi toàn bộ thẻ có thể nhấp.

.card-compact

Đệm chặt hơn (p-4) — cho các hàng và lưới dày đặc.

.card-minimal

Đặt lại nền, đệm và viền. Dùng làm lớp bao bọc không nên hiện diện về mặt thị giác.

Huy hiệu

.badge-success.badge-warning.badge-danger.badge-info.badge-brand.badge-secondary

.badge-sm(default).badge-lg

Hiệu ứng

Các hiệu ứng kích hoạt khi cuộn được bật tùy chọn qua data-animate. Các mục hero xếp chồng thêm hiệu ứng để tạo kịch tính. Cả hai đều tôn trọng prefers-reduced-motion.

Hiệu ứng Cuộn

Hiện lên

data-animate (mặc định)

Hiện từ Trái

data-animate="fade-left"

Hiện từ Phải

data-animate="fade-right"

Phóng

data-animate="scale"

Độ trễ So le

Thêm data-stagger="100" trên một vùng chứa cha. Các phần tử con có data-animate sẽ tự động nhận độ trễ tăng dần (tính bằng ms).

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

Biểu tượng

Các trang công khai dùng bộ biểu tượng Font Awesome Etch — một tập con ~280 biểu tượng được tuyển chọn với phong cách khắc nhất quán. Kit ID 66eef93df2 được nạp trong bố cục công khai. FA Brands cũng có sẵn cho các biểu trưng nền tảng mạng xã hội.

house

gamepad

trophy

arrow-down-to-line

angle-right

arrows-rotate

Cách dùng

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

Đổi tên FA Cổ điển → Etch

Một số tên FA cổ điển phổ biến không tồn tại trong Etch và có cách thay thế khác. Hãy kiểm tra danh sách biểu tượng trong CLAUDE.md trước khi thêm một biểu tượng mới.

chevron-down → angle-down

download → arrow-down-to-line

circle-check → check

shield-halved → shield

hard-drive → compact-disc

spinner → arrows-rotate fa-spin