Designsystem
Style Guide
Single source of truth för alla designbeslut i Räntekollen. Alla nya sidor och komponenter ska följa dessa riktlinjer.
01 — Colors
Färgpalett
brand-paper
--brand-paper
brand-deep
--brand-deep
brand-mint
--brand-mint
brand-gold
--brand-gold
Semantiska tokens
background
foreground
primary
secondary
muted
accent
card
destructive
Gradienter
from-brand-deep → to-brand-mint
from-brand-gold → to-brand-mint
from-background → to-muted
02 — Typography
Typografi
Display / font-serif
Sparande med förtroende
H1 / font-serif 5xl
Rubrik nivå 1
H2 / font-serif 3xl
Rubrik nivå 2
H3 / font-serif xl
Rubrik nivå 3
Body / font-sans base
Kroppstext i Inter. Används för brödtext, beskrivningar och de flesta gränssnitt.
Small / muted
Sekundär text för hjälpinformation och metadata.
Eyebrow / uppercase
Etikett över rubrik
03 — Buttons
Knappar
04 — Forms
Formulär
05 — Badges
Badges & Tags
PrimärSekundär RekommenderadNeutralOutlineVarning Verifierad
06 — Shadows
Skuggor
shadow-sm
shadow
shadow-lg
shadow-2xl
07 — Animations
Animationer
animate-bounce-subtle
animate-pulse
animate-spin
hover:scale-105
08 — Cards
Kort
Standardkort
Ren yta
Använd för informations- och listinnehåll.
Emphasized
Fokuskort
Använd för CTA-sektioner och toppresultat.