Design Manual
We have some guidelines for how to make BankID buttons look correct in your own interfaces. It would be great if you could take a moment to get to know them better.
When you refer to BankID in your service, whether on the web or in an app, the language and appearance must meet our requirements.
Download: Logos for BankID (.zip)
Call to action
In cases where you offer a call-to-action button, for example "log in" or "sign", you must meet the following requirements:
- In web applications, you should use a button or anchor tag (<a> or <button>). This meets the accessibility requirements for keyboard navigation or screen readers according to the WCAG 3.0 standard.
- The button must have the correct purple color with white text. See below for styling details.
- The button text must be one of the approved options listed below.
Example of a call-to-action button
Download: DNA icon for primary buttons (.zip)
The text must be one of these
Norwegian | English |
|---|---|
Logg inn med BankID | Log in with BankID |
Fortsett med BankID | Continue with BankID |
Registrer med BankID | Register with BankID |
Signer med BankID | Sign with BankID |
Autentiser med BankID | Authenticate with BankID |
Godkjenn med BankID | Approve with BankID |
Bekreft betaling med BankID | Confirm payment with BankID |
Styling
Color (light mode)
- Background color (BankID purple): #39134C
- Background color on hover: #470D70
- Text color: #FFFFFF
Color (dark mode)
- Background color: #F6F6F9
- Background color on hover: #EFEEF3
- Text color (BankID purple): #39134C
Height
- Recommended: 48 px
- Minimum: 48 px
Radius
- Recommended: Rounded
- Minimum: 6 px
Padding
- Between logo/button text and button left/right: 24 px
- Between logo and button text: 14 px
Font
The font is Roboto, medium, 18 px.
Did you find what you were looking for?