Designmanual

Når du henviser til BankID i tjenesten din, både på web eller i app, skal språk og utseende oppfylle våre krav.

Last ned: Logoer for Bankid (.zip)

Call to action

I tilfeller der du tilbyr en call to action-knapp, for eksempel "logg inn" eller "signer", må du oppfylle følgende krav:

• I webapplikasjoner skal det brukes en button- eller anchor-tag (<a> eller <button>). Dette oppfyller kravene til tilgjengelighet for tastaturnavigasjon eller skjermlesere etter WCAG 3.0-standarden.
• Knappen må ha korrekt lillafarge med hvit tekst. Se under for detaljer om styling.
• Knappteksten skal være en av de godkjente som er listet opp under.

Last ned: DNA-ikon for primærknapper (.zip)

Tekst i knappen

Teksten skal være en av disse:

Styling

Farge (light mode)

• Bakgrunnsfarge (BankID-lilla): #39134C
• Bakgrunnsfarge hover: #470D70
• Tekstfarge: #FFFFFF

Farge (dark mode)

• Bakgrunnsfarge: #F6F6F9
• Bakgrunnsfarge hover: #EFEEF3
• Tekstfarge (BankID-lilla): #39134C

Høyde

• Anbefalt: 48 px
• Minimum: 48 px

Radius

• Anbefalt: Rounded
• Minimum: 6 px

Padding

• Mellom logo/knapptekst og knapp venstre/høyre: 24 px
• Mellom logo og knapptekst: 14 px

Font

Font er Roboto, medium, 18 px.

Design av metodevelger

Tekst i knappene

Tekst i parentes er ikke en del av tekst til inngangen, men en beskrivelse av hvor lenken fører.

BankID med app
(Inngang til BankID-app).

BankID med kodebrikke
(inngang for kodebrikke eller apper for Sparebank1, Nordea eller Danske bank).

BankID på mobil
(Inngang til BankID på mobil)

Plassering

BankID på mobil skal fases ut, og vi ønsker at andre metoder skal være mer fremtredende visuelt, samt at sluttbrukerne gjenkjenner BankID app-knappen og velger denne når de har lastet ned appen. Derfor ønsker vi at plassering av knappene skal plasseres i denne rekkefølgen, vist under.

Vertikal plassering

Knappene skal vises i denne rekkefølgen. Bruk av ikoner er valgfritt. Her er et eksempel på hvordan man kan løse vertikal plassering.

Horisontal plassering

Knappene skal vises i denne rekkefølgen. Bruk av ikoner er valgfritt. Under er et eksempel på hvordan man kan løse horisontal plassering.

Ikoner

Det er ønskelig, men ikke noe krav om, å bruke ikoner på inngangene. Om ikoner skal brukes, er det kun ikonene i denne designmanualen som skal brukes. Det skal ikke brukes ikoner på BankID på mobil, dette for å plassere BankID på mobil lavere i hierarkiet.

Vi foretrekker at ikonene med primærfarger blir brukt, men skal de plasseres på mørk bakgrunn, kan ikonene i negativ brukes.

Ikonene leveres i to forskjellige størrelser, small og normal.

Ved et design som viser ikon som er større enn 48 piksler i bredde skal størrelsen normal brukes. Om ikonet skal vises som mindre enn 48 piksler i bredden skal ikonet small brukes. Her har vi gjort noen små justeringer som sikrer at detaljene kommer frem på en god måte. Vi anbefaler ikke å bruke ikonet small i mindre størrelse enn 32 piksler.

Ikonene skal på ingen måte endres, verken i farger eller utforming.

Last ned: Ikoner for metodevelger (.zip)