We have some guidelines on how to make BankID buttons look correct on your own platforms. It would be great if you could take a moment to get familiar with them.
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)
In cases where you offer a call to action button, such as 'Log in' or 'Sign,' you must meet the following requirements:
Example: Call to action button
Download: DNA icon for primary buttons (.zip)
Norsk | 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 |
Color (light mode)
Color (dark mode)
Height
Radius
Padding
Font
Font is Roboto, medium, 18 px.
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.
Example: Vertical placement of BankID buttons
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.
Example: Horizontal placement of BankID buttons
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)