User Experience manual for Service Providers
Version: 2.2 updated 4/20/2023
This page contains recommendations and mandatory elements to help Service Providers (hereafter SeP) with the user experience for end users. For texts, the "tone of voice" of the given SeP must be respected. In the prototypes, for the sake of simplicity, the "Mock Bank" is used as the identity provider and the sample SeP.
- SeP - Service Provider - Third party, Service Provider who is registered in the Bank iD system and intends to use the banking API
- IdP - Identity Provider - a component on the bank side that handles authorization and consent and issues tokens
Bank iD graphic elements
Bank ID logo
- The logo has two basic variants, the variant in white can be used by SeP if the user interface of its application has a dark background. The minimum logo width size is 80px / 14mm. Download here.
Text "Bank iD"
In the text, the word “Bank iD” is written with a space, with a capital letter “B” and a small “i” and a capital “D”.
Bank iD button
- The text on the button can be adapted by the SeP to the given service, the buttons can be downloaded here.
- Button height and width and font size can also be adapted to the visual elements in the SeP's user interface. However, logo rules must be followed (protection zone, etc.)
- The font on the button (Poppins cut 600 semibold), the basic colors of the button (black #000000, white #FFFFFF), the logo in the button must be preserved.
- Possible texts on the button: "Sign in" / "Sign" / "Verify" / "Login" / "Continue" etc.
- Another version is button with Bank iD logo only, no text.
What is possible to have in your own design
- The IdP selection page and the button or component for re-login can be customized by SeP for its needs, subject to compliance with the established rules.
- Below are links to prototypes, the sample "Bank" and the sample SeP serve as examples in the verification process.
Links to prototypes:
- Sample login to customer care zone, authentication.
- Sample of service agreement, examples of signatures.
- Buttons, Bank iD screens, other screens and assurance elements.
When implementing your own IdP selection page, the SeP must have the following required elements:
- Bank iD logo with a click on the [Bank iD] website (https://www.bankid.cz).
- This text MUST be listed under the list of banks: "Bankovní identita, a.s. processes your personal data for the purpose of providing identification services and protecting legal claims. More information, including a list of your rights, can be found in the Personal data protection policy."
- For work with the Bank iD logo, the rules that are listed in the logo manual apply. In principle, the logo must always be clearly visible and must not be distorted or in low resolution, it must comply with the rules of use.
- IdP logos for your own IdP selection must be used with respect to the rules for the logos of the given IdP, you must load the logos via API /api/v1/banks.
- If the IdP is not available, it will not be returned as available in /api/v1/banks, it is necessary to respond to this and not show the IdP on the page for the given end client
Bank selection page in the service provider environment, possible appearance in a modal window.