Login page

Use the login page pattern when your users are requested to authenticate in order to access products or sensitive data.



The login page consists of a form defined by the product with required input from the user, a logo, actions and support links. Here is an image which is used in desktop mode to represent the solution.

Structure of a login page

How it workslink

Use as the login template for retail or corporate application login page. You can extend the number of input fields and actions and replace the image and branding logo for white labelling.

Default view
Default desktop login page
Active and error state
Active and error states for login page
Corporate banking example
Usage of corporate id in login form
Preview of login page structure on mobile

Tools to build the login pagelink

You can use the app starter kit or get the login pattern XD resource.

App starter kit