Grunnleggende
Farger dakside
Velkommen til dokumentasjonen for farger fra Aksel 🎉. Denne dokumentasjonen er laget for å hjelpe både designere og utviklere med å forstå og bruke fargepaletten på en konsistent og effektiv måte. Om du leter etter beskrivelsen av design tokens finner du det på token-oversikten.
Navnestruktur
Fargene har en navnestruktur som skal gjøre det enklere å skjønne hva de skal brukes til. Fargenavnene bygget opp av 3 ledd: UI-element - Rolle - Variant/Tilstand. Noen fargenavn består bare av 2 ledd.
Fargene er spesifikke, men også fleksible nok til at de passer forskjellige løsninger.
Fargene er navngitt etter hvor og hva de skal brukes til. Ta denne bakgrunnsfargen som eksempel: bg-neutral-soft. Ut fra navnet kan du lese:
- bg: Fargen skal brukes på bakgrunner.
- neutral: Fargen er nøytral og har ikke en bestemt rolle.
- soft: Fargen til noe som er nedtonet eller ment for dekor. Dekker ikke WCAG-krav for kontrast.
Dette gjør det mye tydeligere å skjønne hvordan fargen skal brukes enn om navnet hadde vært gray-100.
Forklaring av leddene i fargenavnene
UI-element
Første ledd i fargenavnet refererer til elementet som fargelegges.
| UI-element | Forklaring |
|---|---|
| Background | Farge på en bakgrunn. |
| Border | Fargen på en ramme (stroke). |
| Text | Fargen på tekst og ikoner. |
Rolle
Andre ledd i fargenavnet beskriver rollen.
| Rolle | Forklaring |
|---|---|
| Neutral | Standard farge uten en bestemt mening. Gråskalaen til Nav. |
| Accent | Standard farge for handlinger i Nav. Brukt på knapper, linker og primære handlinger. |
| Success | Fargen til positiv informasjon. |
| Danger | Fargen til «farlig» eller negativ informasjon og handlinger. |
| Warning | Fargen til usikker informasjon eller advarsler. |
| Info | Fargen til opplysninger eller informasjon som trenger oppmerksomhet. |
| Brand Magenta | Primær brand-farge. |
| Brand Beige | Sekundær brand-farge. |
| Brand Blue | Tertiær brand-farge. |
| Meta Purple | Farge du kan definere meningen til. |
| Meta Lime | Farge du kan definere meningen til. |
Variant/Tilstand
Tredje ledd i fargenavnet beskriver varianten eller tilstanden til et element. Det kan også være en kombinasjon av variant/tilstand (eks. Moderate.Hover)
| Variant/Tilstand | Forklaring |
|---|---|
| Default | Fargen til standard variant eller tilstand. |
| Subtle/Soft | Fargen til noe som er nedtonet eller dekor. |
| Moderate | Fargen til noe som skal fremheves litt og fortsatt dekke kontrastkrav til standard tekstfarge. |
| Strong | Fargen til noe som skal fremheves. |
| Hover | Fargen som vises når musepekeren svever over elementet. |
| Pressed | Fargen som vises når du klikker på eller har valgt et element. |
| Icon | Farge som kan brukes på ikoner/grafikk, men ikke tekst. |
| Contrast | Farge som brukes på ikoner/tekst som ligger oppå Strong-farge. |
Tips
Se alle fargene med forklaringer i Token-oversikten.
Theming
Aksel leverer farger for lightmode og darkmode. Fargenavnene du bruker i grensesnittet er de samme uavhengig av "mode". Endring av "mode" bytter fargene automatisk.
Les mer om