Logo / Active / Base
Primary CTA for light backgrounds
Buttons
1. Download buttons
Select a suitable text from the drop-down menu and then download the button in SVG format. If you need a different button label, contact us.
2. Button description and states
Button variant overview
Button usage examples
2.1. Basic buttons
Fill #000000, logo, text, line #FFFFFF, radius 8 px, height 48 px
2.2. Negative design of the buttons
Fill #FFFFFF, border 1px #000000, logo #000000, radius 8px, height 48px)
- The negative design of the button can be used in the SePa environment, which has a dark background of its application.
- The contrast of the element and the background is based on the recommendations of the WCAG guideline on accessibility - see page Accessibility.
- The contrast between the button (or other component) and the background should be at least 3:1.
2.3. Inactive buttons
Buttons in dark design for light background, padding #999999, other elements #E6E6E6)
Buttons in light design for dark background, padding #F9FAFB, border and other elements #999999)
- We distinguish the inactive version for the light and dark background of the SePa application.
- The colors for the inactive buttons are basically determined as approx. 50% transparency of the original colors, while the colors defined in the section are used Colors.
- The inactive button can be used when the user must actively (compulsorily) confirm some element on the screen, without which it is not possible to start the Bank iD service.
2.4. Other button variants
Button in dark design for light background (fill #000000, logo #FFFFFF, radius 10 px, 48x48 px)
Button in light design for dark background (fill #F0EFFD, logo #000000, radius 10 px, 48x48 px)
- It can be used in cases where it matches, for example, the visual of SePa buttons or where there is not enough space for a button in the basic design.
Inactive button design
Inactive state for button in dark design for light background
Inactive state for button in light design for dark background
3. Rules for using the Bank iD button
The Bank iD button is intended for starting the Bank iD service for the purpose of logging in, verifying identity, arranging a service, signing a document, etc. After clicking the button, a guide to bank selection, IdP screen, etc. follows.
- No other visualization of the Bank iD button than shown on this page Buttons is admissible for the Bank iD service.
- For the basic Bank iD button can only be used black or white the color of the fill, text and border according to how SeP has a user interface (dark or light) of its application.
- The “Poppins” font must always be retained in the button text, see Typography.
- The Bank iD logo in the button must always be preserved. Only the version of the button with the Bank iD logo without text is allowed. Bank ID logo.
- The height and width of the button and the size of the font in the Bank iD button can be adapted by SeP to the visual elements in its user interface while maintaining the above rules.
- SeP can adapt the text on the button to its service. Allowed labels for the Bank iD button include: "Log in" / "Sign" / "Verify".
- The contrast of the button and the background should respect the recommendation WCAG guidelines and the contrast ratio should be at least 3:1.
4. Buttons on Bank iD screens
These buttons are only used for actions on Bank iD's own screens (i.e. in applications operated by Bankovní identita, a.s.), e.g. for confirmation on the pre-authorization screen in the Bank iD signature, in modal windows on the bank selection guide, etc.
button description
Primary button, fill #262626, text #FFFFFF, radius 8 px, height 48 px
button description
Secondary button, fill #FFFFFF, border 2 px #262626, text #262626, radius 8 px, height 48 px
- Primary button it is used for the main actions on Bank iD's own screens, e.g. for confirming the pre-authorization screen when signing a document.
- Secondary button is used on Bank iD's own screens in the event that there should be another button on the screen for a less important action, e.g. in modal windows or on error screens.
Buttons in Bank iD DEMO
button description
Basic state
button description
Interaction