ระบบ การออกแบบ
แหล่งอ้างอิงที่เชื่อถือได้สำหรับแนวทางแบรนด์ของ VGS ไลบรารีคอมโพเนนต์ และรูปแบบการออกแบบที่ใช้ในทุกหน้าที่เปิดให้สาธารณะเข้าถึง
โทนสี
สีแบรนด์และ UI ที่กำหนดไว้ในคอนฟิก Tailwind ใช้คลาสเหล่านี้อย่างสม่ำเสมอในทุกหน้า
แบรนด์
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
ระดับสีเทา
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
สีสถานะ
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
ตัวอักษร
ฟอนต์สองตระกูลประกอบกันเป็นระบบตัวอักษร Audiowide สำหรับหัวข้อและข้อความแสดงผล, Inter (sans-serif) สำหรับเนื้อหาและ UI
หัวข้อ font-audiowide uppercase tracking-tight
หัวข้อระดับ 1
text-4xl md:text-6xl font-audiowide uppercase
หัวข้อระดับ 2
text-3xl md:text-4xl font-audiowide uppercase
หัวข้อระดับ 3
text-xl font-audiowide uppercase
ข้อความเนื้อหา Default sans-serif (Inter), text-gray-400 สำหรับเนื้อหารอง
ข้อความเนื้อหาใช้ Inter ในขนาดต่างๆ สีเริ่มต้นเป็นสีขาวสำหรับเนื้อหาหลัก และ gray-400 สำหรับคำอธิบายรองและข้อความประกอบ
text-lg text-gray-400 leading-relaxed
ป้ายกำกับและคำบรรยาย text-xs uppercase tracking-wider text-gray-500
ป้ายกำกับส่วน
ปุ่ม
ปุ่มประกอบด้วยสามสิ่ง: ตัวแปร (สี) ขนาด และเอฟเฟกต์ทางเลือก ทั้งสามชั้นซ้อนอยู่บนฐาน .btn
ตัวแปร
ขนาด
เอฟเฟกต์
.btn-glow คือรัศมี CTA มาตรฐาน .btn-glow-intense เพิ่มเป็นสองเท่าสำหรับ CTA ที่สำคัญที่สุดเพียงปุ่มเดียวในหน้า .btn-shimmer เพิ่มแสงกวาดครั้งเดียวเมื่อ hover .btn-press เพิ่มการย่อขนาดเล็กน้อยเมื่อคลิกเพื่อการตอบสนองแบบสัมผัส
การใช้งาน
<!-- 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 — ใช้สำหรับเนื้อหายกระดับเหนือพื้นหลังสีเข้ม
กระจก
.glass
พื้นผิวกระจกมาตรฐาน เบลอพื้นหลังโทนแชมเปญ มุมโค้ง 16px เหมาะที่สุดสำหรับส่วนเต็มความกว้างและการซ้อนทับ hero
.glass-card
ตัวแปรชัดเจนที่เข้มข้นขึ้นเล็กน้อยพร้อมเบลอ 12px ใช้แทนได้ทันทีเมื่อ .glass ดูนุ่มเกินไป
การ์ด
.card
การ์ดโปร่งแสงพื้นฐาน Padding 6, radius sm
.card-elevated
เพิ่มเงาบางๆ ใช้อย่างประหยัดเพื่อการยกระดับ
.card-interactive
เคอร์เซอร์ตัวชี้ + สถานะ hover ใช้เมื่อทั้งการ์ดสามารถคลิกได้
.card-compact
Padding กระชับขึ้น (p-4) — สำหรับแถวและกริดที่หนาแน่น
.card-minimal
รีเซ็ตพื้นหลัง padding และขอบ ใช้เป็นตัวห่อหุ้มที่ไม่ควรปรากฏให้เห็น
ป้าย
แอนิเมชัน
แอนิเมชันที่กระตุ้นด้วยการเลื่อนเป็นแบบเลือกใช้ผ่าน data-animate ส่วน hero ซ้อนเอฟเฟกต์เพิ่มเติมเพื่อความตื่นตา ทั้งสองเคารพ prefers-reduced-motion
แอนิเมชันการเลื่อน
จางขึ้น
data-animate (default)
จางไปทางซ้าย
data-animate="fade-left"
จางไปทางขวา
data-animate="fade-right"
ปรับขนาด
data-animate="scale"
หน่วงเวลาแบบสลับ
เพิ่ม data-stagger="100" บนคอนเทนเนอร์แม่ องค์ประกอบลูกที่มี data-animate จะได้รับการหน่วงเวลาเพิ่มขึ้นตามลำดับโดยอัตโนมัติ (เป็น 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>ไอคอน
หน้าสาธารณะใช้ชุดไอคอน Font Awesome Etch — ชุดย่อยที่คัดสรรราว 280 ไอคอนพร้อมสุนทรียะแบบสลักที่สม่ำเสมอ Kit ID 66eef93df2 โหลดอยู่ในเลย์เอาต์สาธารณะ FA Brands ก็มีให้ใช้สำหรับเครื่องหมายแพลตฟอร์มโซเชียลด้วย
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
การใช้งาน
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>การเปลี่ยนชื่อ FA คลาสสิก → Etch
ชื่อ FA คลาสสิกทั่วไปหลายชื่อไม่มีใน Etch และมีตัวแทนที่แตกต่างกัน ตรวจสอบรายการไอคอน CLAUDE.md ก่อนเพิ่มไอคอนใหม่
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin