BankID buttons in your channels
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, such as 'Log in' or 'Sign,' you must meet the following requirements:
- In web applications, a button or anchor tag (<a> or <button>) should be used. This complies with 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.
Last ned: DNA-ikon for primærknapper (.zip)
The text should be one of the following:
Logg in 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
Color (light mode)
- Background color (BankID purple): #39134C
- Background color hover: #470D70
- Text color: #FFFFFF
Color (dark mode)
- Background color: #F6F6F9
- Background color hover: #EFEEF3
- Text color (BankID purple): #39134C
- Recommended: 48 px
- Minimum: 48 px
- Recommended: Rounded
- Minimum: 6 px
- Between logo/button textt og button left/right: 24 px
- Between logo and button text: 14 px
Font is Roboto, medium, 18 px.
Design - method selector
Text in buttons
Text in parantheses is a description of where the link leads.
BankID with app
(To BankID app).
BankID med code unit
(Entry for code units or OTP apps.)
BankID on mobile
(ITo BankID on mobile)
BankID on mobile is being phased out, and we want other methods to be more visually prominent. We also want end-users to recognize the BankID app button and choose it once they have downloaded the app. Therefore, we want the buttons to be placed in the following order, as shown below.
The buttons should be displayed in this order. The use of icons is optional. Here is an example of how to achieve vertical placement.
The buttons should be displayed in this order. The use of icons is optional. Below is an example of how to achieve correct horizontal placement.
It is desirable, but not mandatory, to use icons on the entries. If icons are used, only the icons in this design manual should be used. Icons should not be used for BankID on mobile to place BankID on mobile lower in the hierarchy.
We prefer that icons with primary colors are used, but if they are placed on a dark background, negative icons can be used.
The icons are provided in two different sizes, small and normal.
In a design where the icon is displayed larger than 48 pixels in width, the normal size should be used. If the icon is to be displayed smaller than 48 pixels in width, the small icon should be used. We have made some small adjustments here to ensure that the details are displayed well. We do not recommend using the small icon in a size smaller than 32 pixels.
Under no circumstances should the icons be altered in terms of color or design.
Download: Icons for method selector (.zip)