Design manual
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)
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.
Example: Call to action button
Download: DNA icon for primary buttons (.zip)
Text should be one of the following
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 |
Styling
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
Height
- Recommended: 48 px
- Minimum: 48 px
Radius
- Recommended: Rounded
- Minimum: 6 px
Padding
- Between logo/button textt og button left/right: 24 px
- Between logo and button text: 14 px
Font
Font is Roboto, medium, 18 px.
Did you find what you were looking for?