Design guidelines
- Frode Nilsen (Unlicensed)
These guidelines outline the general rules of design when offering xID as a login alternative at your website. Consistent use helps people recognise xID and understand how the product works, and this part of the documentation is ment to support this.
Logos
The xID logo is used to represent the product xID, and should be used in a digital context when writing about xID on your website or on buttons.
The logo mainly comes in two different variations:
- Primary logo: With supporting text "Av BankID" - both in English and Norwegian
- Secondary logo: Plain (without supporting text)
The background colours and the logo are in different combinations of green, grey and white. Green is the primary colour, and grey is the secondary colour.
The following formats are supported: JPG, PNG, SVG
If you need a smaller logo for special use or logos for print, please contact Head of communications at hege.steinsland@bankidnorge.no
Primary logo with supporting text:
White logo:
| Green background - white logo | Grey background - white logo | |
|---|---|---|
| JPG | xID_Logo_Stottetekst_Negativ_GraSekundaerBG_RGB.jpg | |
| SVG | xID_Logo_Stottetekst_Negativ_GronnBG_RGB.svg | xID_Logo_Stottetekst_Negativ_GraSekundaerBG_RGB.svg |
Coloured logo:
| White background - green logo | White background - grey logo | |
|---|---|---|
| JPG | xID_Logo_Stottetekst_RGB.jpg | xID_Logo_Stottetekst_SekundaerGra_RGB.jpg |
| PNG | xID_Logo_Stottetekst_RGB.png | xID_Logo_Stottetekst_SekundaerGra_RGB.png |
| SVG | xID_Logo_Stottetekst_RGB.svg | xID_Logo_Stottetekst_SekundaerGra_RGB.svg |
Secondary logo without supporting text:
White logo:
| Green background - white logo | Grey background - white logo | |
|---|---|---|
| JPG | xID_Logo_Negativ_GraSekundaerBG_RGB.jpg | |
| SVG | xID_Logo_Negativ_GronnBG_RGB.svg | xID_Logo_Negativ_GraSekundaerBG_RGB.svg |
Coloured logo:
| White background - green logo | White background - grey logo | |
|---|---|---|
| JPG | xID_Logo_RGB.jpg | xID_Logo_SekundaerGra_RGB.jpg |
| PNG | xID_Logo_RGB.png | xID_Logo_SekundaerGra_RGB.png |
| SVG | xID_Logo_RGB.svg | xID_Logo_SekundaerGra_RGB.svg |
Design guidelines document
This is a document that describes how to use the logos, colours and fonts in more detail. Please read the document for more instructions on design.
Only in Norwegian
Login button
The preferred design for the login button is to use only the logo without the supporting text. Please follow the guidelines below to build your own login button.
Logo
In genereal, use the logo files without supporting text for buttons.
Colour
Use the following combinations if you want to use the logo on the button:
- Green background with white logo
- Grey background with white logo
- White background with green logo
Please use the colours as specified in the design guidelines.
Another option is to not use the logo. Then you will have to write xID with letters instead of the logo, but you can use the background colour of your choosing.
Text
We recommend that you use one of the following texts for the button, depending on which usecase for xID you are considering.
Norwegian | English |
|---|---|
| Logg inn med xID | Login with xID |
| Fortsett med xID | Continue with xID |
| Fyll ut med xID | Prefill with xID |
| Registrer deg med xID | Sign up with xID |
Among social login buttons
When xID is presented with other login alternatives e.a. social logins, the following design ensures a consistent design and experience:
