Login Screen Design

1. Login Screen Design

   Style the login, register and password screens your customers see: the layout, brand panel, background, texts and promo cards. The live preview also shows the social login buttons you have set up. This tour walks through each section.

2. Save your design

   Changes show in the preview instantly, but your real login, register and password screens only change after you click Save.

3. Choose a layout

   Pick Two-panel (animated), Split panel or Centered card. The two-panel layouts place a brand panel next to the form; Centered card shows the form alone, so the brand panel and decorative icon settings are hidden.

4. Brand panel

   Set which side the panel sits on and its background: brand color, gradient or an uploaded image (PNG, JPG or WebP). The heading and tagline can be translated into each language and styled with their own text settings.

5. Form background

   Choose the background behind the sign-in form: Plain, Muted or a light Brand tint.

6. Panel pattern

   Adds a decorative texture to the login panel. Click the selected pattern again, or choose None, to remove it.

7. Biometric sign-in

   Lets customers sign in with Face ID, a fingerprint or a device PIN instead of a password. While off, the passkey button is hidden on your login screen; devices already registered are not deleted.

8. Decorative icons

   Show small icons on the brand panel and pick up to 4 of them. This section only appears for the two-panel layouts.

9. Cross-sell and campaign cards

   Add up to 4 cards to promote bundles or campaigns on the login and register panel, each with a title, badge, short description, button text and link. Titles and texts can be translated into each language.

10. Live preview

    A mock of your login screen that follows every change, including the social login buttons you have set up. Switch between desktop and mobile, or open your login page in a new tab to see the saved live page.