Understand the split-screen sign-in and sign-up layout
Learn how the split-screen authentication layout presents marketing content alongside the sign-in or sign-up form on desktop and mobile.
This guide is designed for project manager.
Steps
Step 1: See how the split layout appears on desktop
On larger screens, users see a centred, rounded card split into two equal columns, with the brand or reassurance content on the left and the sign-in or sign-up form on the right.
Step 2: Review the brand panel experience
The left-hand brand panel presents marketing messages or a welcome-back state to reassure users while they complete authentication.
Step 3: Check the form-first mobile view
On mobile screens, the layout collapses so the authentication form appears first, ensuring it is always visible above the fold for faster access.
Step 4: See the condensed mobile value strip
A short mobile value strip is shown above the form on small screens, giving a concise version of the brand messaging without pushing the form down.
Step 5: Understand consistent visual styling
The entire auth surface uses an Arial-first font stack, with a cream brand panel and white form panel, matching the wider design system for a seamless transition from the marketing site.
Last updated: 2026-07-09