Design System Showcase
Et elegant og konsistent design-system bygget fra portal.tryggevedtak.no, med fokus på sikkerhet, brukervennlighet og visuell eksellens.
Fargepalett
Inspirert av portal.tryggevedtak.no - profesjonell, elegant og tilgjengelig.
Gold Primary
#d8b982
Gold Light
#f0d9aa
Green Accent
#55b4a6
Panel Background
#22323d
Buttons
Primary Button
<button class="btn btn-primary">
Secondary Button
<button class="btn btn-secondary">
Outline Button
<button class="btn btn-outline">
Cards & Components
Standard Card
En vanlig kort med hvit ramme og subtle hover-effekter.
Feature Card
Fremhevende kort med gull-gradient bakgrunn for viktige komponenter.
Card with Sections
Kort kan deles inn i header, body og footer seksjoner.
Badges & Alerts
Badges
Primary
Success
Warning
Danger
Alerts
✓ Success: Operasjonen ble fullført vellykket.
⚠ Warning: Vær oppmerksom på denne informasjonen.
✗ Error: Noe gikk galt. Prøv igjen.
ℹ Info: Her er noe nyttig informasjon.
Forms
Design Prinsipper
Visuell Eksellens
- Elegant gull- og grønn-palett
- Playfair Display + Open Sans typografi
- Soft shadows og avrundede hjørner
- Gradient-knapper med hover-animasjoner
Sikkerhet & Tilgjengelighet
- WCAG 2.1 AA-kompatibilitet
- Keyboard navigation-støtte
- Screen reader-kompatibel
- Tilstrekkelig fargekontrast
Implementering
Kom i gang
Design-systemet er bygget med moderne CSS-variabler og kan enkelt integreres i Laravel-applikasjonen:
<link rel="stylesheet" href="/resources/css/design-system.css">
Alle komponenter er responsive og fungerer perfekt på mobil, tablet og desktop.