MitID user interface requirements

When supporting MitID in your application, you must adhere to a few style requirements, both in your application and on the MitID landing page hosted by Criipto.

As long as you follow the guidelines below, you must comply with the UX requirements from MitID. Please reach out to our support if you have questions about this or if you want us to verify that your buttons and landing page comply.

The MitID landing page

With MitID everything happens on a page hosted by Criipto. Specifically, MitID cannot be iframed, only shown in full page view.

You will therefore redirect the current page to Criipto, or you may open up a popup window. The latter is only relevant on the desktop and typically not recommended by Criipto.

Styling the landing page

In general, the landing page for MitID may styled by following the general guide on styling. In essence you can modify the page any way you like using CSS.

As illustrated below, the default landing page has the MitID box - the red rectangle - at the center. It is important that you do not, under any circumstances, change the styling or layout of anything inside the red rectangle.

MitID default landing page

MitiD branding in your application

When referring to MitID in your application, web or native alike, you must make sure your language and styling matches the requirements.

Criipto currently provides required assets, such as the MitID logo, upon request.

Call to Action

When providing a call to action, for example, log in or sign, make sure you follow these requirements:

  • Always use a button or anchor tag, <a> or <button>, to make sure it is accessible for keyboard navigation and screen readers according to the WCAG 3.0 standard.
  • The button must be the right color of blue with the white text. See the exact style guide below.
  • The button text must be exactly one of the five allowed phrases as listed below.

The MitID button should be shown with lightly rounded corners:

Default MitID button

The key elements of the default styling are shown below, but we suggest to also simply inspect the buttons in the MitID applet and copy the corresponding styles.

{
    background: #0060e6;
    color: #ffffff;
    font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    border-radius: 4px;
    height: 48px;
    padding: .25rem .75rem .25rem 1rem;
}

The text inside the button must be from the set of approved texts:

  Danish   English
Log ind med MitID Log on with MitID
Godkend med MitID Approve with MitID
Bekræft med MitID Confirm with MitID
Acceptér med MitID Accept with MitID
Underskriv med MitID Sign with MitID