Designsystem
Merkevare og designtokens
Fargene og skalaene under er importert direkte fra lib/ui/design-tokens.ts. Dette er ikke en beskrivelse av designsystemet – det er designsystemet, rendret.
Primærpalett
Violet er bærende. Grønt betyr framgang, oransje betyr noe som trenger oppmerksomhet – aldri rødt for brukerens egen økonomi.
Violet 600 – primær
Purple 600 – primær dyp
Blue 500 – informasjon
Cyan 500 – aksent
Green 500 – positiv
Green 600 – positiv dyp
Orange 500 – varsel
Orange 600 – varsel dyp
Pink 500 – oppmerksomhet
Rose 400 – mykt aksent
Bakgrunnstoner
Brukes til seksjonsflater, aldri til tekst.
Bakgrunn – violet
Bakgrunn – grønn
Bakgrunn – oransje
Typografisk skala
| Token | Størrelse | Eksempel |
|---|---|---|
| h1 | 2.25rem | Struktur og mestring |
| h2 | 1.5rem | Struktur og mestring |
| h3 | 1.25rem | Struktur og mestring |
| body | 1rem | Struktur og mestring |
| small | 0.875rem | Struktur og mestring |
Avstandsskala
Verdier i piksler.
- 14px
- 28px
- 312px
- 416px
- 624px
- 832px
Bevegelse
Kort og rolig. Økonomi skal ikke føles hektisk.
- micro200 ms
- panel300 ms
Tone
Rolig, ikke rødt
Vi bruker ikke alarmfarger på brukerens egen økonomi. Oransje markerer noe som trenger oppmerksomhet – ikke at noen har feilet.
Vi gjetter ikke
Ukjent kategori heter «Må kategoriseres», ikke «Annet». Ved datafeil viser vi heller brukeren som fattigere enn rikere.
Brukeren bestemmer
Nora forklarer og foreslår. Systemet endrer aldri økonomiske hoveddata uten at brukeren har godkjent det.