Design System.

Fasiten for VGS-merkevareretningslinjer, komponentbibliotek og designmønstre som brukes på tvers av alle offentlige sider.

Fargepalett

Merkevare- og UI-farger definert i Tailwind-konfigurasjonen. Bruk disse klassene konsekvent på tvers av alle sider.

Merkevare

brand-500

#F0E6C8

brand-400

#F4ECCE

brand-300

#FAF6E7

brand-600

#B5A87F

brand-700

#B45309

brand-800

#92400E

Gråskala

gray-900

#18181b

gray-800

#27272a

gray-700

#3f3f46

gray-600

#52525b

gray-500

#71717a

gray-400

#a1a1aa

Statusfarger

emerald-400

Success

rose-500

Danger

sky-400

Info

amber-500

Warning

Typografi

To skriftfamilier utgjør typesystemet. Audiowide for overskrifter og displaytekst, Inter (sans-serif) for brødtekst og UI.

Overskrifter font-audiowide uppercase tracking-tight

Overskrift nivå 1

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

Overskrift nivå 2

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

Overskrift nivå 3

text-xl font-audiowide uppercase

Brødtekst Standard sans-serif (Inter), text-gray-400 for sekundær

Brødtekst bruker Inter i ulike størrelser. Standardfargen er hvit for primært innhold og gray-400 for sekundære beskrivelser og støttetekst.

text-lg text-gray-400 leading-relaxed

Etiketter og bildetekster text-xs uppercase tracking-wider text-gray-500

Seksjonsetikett

Knapper

Knapper settes sammen av tre ting: en variant (farge), en størrelse og en valgfri effekt. Alle tre lagene stables på .btn-basen.

Varianter

Størrelser

Effekter

.btn-glow er standard CTA-glorie. .btn-glow-intense dobler den for den aller viktigste CTA-en på en side. .btn-shimmer legger til et engangs lyssveip ved hover. .btn-press legger til en mikro-nedskalering ved klikk for taktil tilbakemelding.

Bruk

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

Overflater

Glass, kort, merker og faner. Det champagnefargede glasset er den signaturpregede VGS-overflaten — bruk det til opphøyd innhold over mørke bakgrunner.

Glass

.glass

Standard glassoverflate. Champagnefarget bakgrunnsuskarphet, 16px radius. Best for seksjoner i full bredde og hero-overlegg.

.glass-card

Litt sterkere eksplisitt variant med 12px uskarphet. Erstatning rett i når .glass føles for mykt.

Kort

.card

Grunnleggende gjennomskinnelig kort. Polstring 6, radius sm.

.card-elevated

Legger til en subtil skygge. Bruk sparsomt for opphøyning.

.card-interactive

Pekermarkør + hover-tilstand. Bruk når hele kortet er klikkbart.

.card-compact

Strammere polstring (p-4) — for tette rader og rutenett.

.card-minimal

Tilbakestiller bakgrunn, polstring og kantlinje. Brukes som en innpakning som ikke skal eksistere visuelt.

Badges

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

.badge-sm(default).badge-lg

Animasjoner

Rulleutløste animasjoner er valgfrie via data-animate. Hero-seksjoner legger på ekstra effekter for dramatikk. Begge respekterer prefers-reduced-motion.

Rulleanimasjoner

Ton inn opp

data-animate (standard)

Ton inn venstre

data-animate="fade-left"

Ton inn høyre

data-animate="fade-right"

Skalér

data-animate="scale"

Forskjøvede forsinkelser

Legg til data-stagger="100" på en overordnet beholder. Underordnede elementer med data-animate får automatisk inkrementelle forsinkelser (i 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>

Ikoner

Offentlige sider bruker Font Awesome Etch-ikonpakken — et kuratert undersett på ~280 ikoner med en konsekvent etset estetikk. Kit-ID 66eef93df2 lastes i den offentlige layouten. FA Brands er også tilgjengelig for merker for sosiale plattformer.

house

gamepad

trophy

arrow-down-to-line

angle-right

arrows-rotate

Bruk

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

Klassisk FA → Etch-omdøpinger

Flere vanlige klassiske FA-navn finnes ikke i Etch og har andre erstatninger. Sjekk ikonlisten i CLAUDE.md før du legger til et nytt ikon.

chevron-down → angle-down

download → arrow-down-to-line

circle-check → check

shield-halved → shield

hard-drive → compact-disc

spinner → arrows-rotate fa-spin