Design System.
Keskeinen viite VGS:n brändiohjeille, komponenttikirjastolle ja suunnittelumalleille, joita käytetään kaikilla julkisilla sivuilla.
Väripaletti
Brändi- ja käyttöliittymävärit, määritelty Tailwind-konfiguraatiossa. Käytä näitä luokkia johdonmukaisesti kaikilla sivuilla.
Brändi
brand-500
#F0E6C8
brand-400
#F4ECCE
brand-300
#FAF6E7
brand-600
#B5A87F
brand-700
#B45309
brand-800
#92400E
Harmaasävyt
gray-900
#18181b
gray-800
#27272a
gray-700
#3f3f46
gray-600
#52525b
gray-500
#71717a
gray-400
#a1a1aa
Tilavärit
emerald-400
Success
rose-500
Danger
sky-400
Info
amber-500
Warning
Typografia
Kaksi fonttiperhettä muodostaa typografiajärjestelmän. Audiowide otsikoihin ja display-tekstiin, Inter (groteski) leipätekstiin ja käyttöliittymään.
Otsikot font-audiowide uppercase tracking-tight
Otsikko Taso 1
text-4xl md:text-6xl font-audiowide uppercase
Otsikko Taso 2
text-3xl md:text-4xl font-audiowide uppercase
Otsikko Taso 3
text-xl font-audiowide uppercase
Leipäteksti Default sans-serif (Inter), text-gray-400 for secondary
Leipäteksti käyttää Interiä eri kokoisina. Oletusväri on valkoinen ensisijaiselle sisällölle ja gray-400 toissijaisille kuvauksille ja tukitekstille.
text-lg text-gray-400 leading-relaxed
Otsakkeet & Kuvatekstit text-xs uppercase tracking-wider text-gray-500
Osion Otsake
Painikkeet
Painikkeet yhdistävät kolme asiaa: variantin (värin), koon ja valinnaisen tehosteen.
Variantit
Koot
Tehosteet
.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.
Käyttö
<!-- 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); }Pinnat
Lasi, kortit, merkit ja välilehdet. Samppanjansävyinen lasi on VGS:n tunnusomainen pinta.
Lasi
.glass
Standard glass surface. Champagne-tinted backdrop blur, 16px radius. Best for full-width sections and hero overlays.
.glass-card
Slightly stronger explicit variant with a 12px blur. Drop-in replacement when .glass feels too soft.
Kortit
.card
Base translucent card. Padding 6, radius sm.
.card-elevated
Adds a subtle shadow. Use sparingly for elevation.
.card-interactive
Pointer cursor + hover state. Use when the entire card is clickable.
.card-compact
Tighter padding (p-4) — for dense rows and grids.
.card-minimal
Resets background, padding, and border. Used as a wrapper that should not visually exist.
Merkit
Animaatiot
Vierityksen laukaisemat animaatiot ovat valinnaisesti käytössä. Ne kunnioittavat aina vähennetyn liikkeen asetusta.
Vieritysanimaatiot
Fade Up
data-animate (default)
Fade Left
data-animate="fade-left"
Fade Right
data-animate="fade-right"
Scale
data-animate="scale"
Staggered Delays
Add data-stagger="100" on a parent container. Child elements with data-animate will automatically receive incremental delays (in 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>Kuvakkeet
Julkiset sivut käyttävät Font Awesome Etch -kuvakepakettia — kuratoitua noin 280 kuvakkeen osajoukkoa yhtenäisellä tyylillä.
house
gamepad
trophy
arrow-down-to-line
angle-right
arrows-rotate
Käyttö
<!-- HTML -->
<i class="fa-etch fa-solid fa-gamepad text-2xl text-brand-500"></i>
<i class="fa-brands fa-discord text-xl"></i>Klassisen FA:n → Etch Uudelleennimeämiset
Several common classic-FA names do not exist in Etch and have different replacements. Check the CLAUDE.md icon list before adding a new icon.
chevron-down → angle-down
download → arrow-down-to-line
circle-check → check
shield-halved → shield
hard-drive → compact-disc
spinner → arrows-rotate fa-spin