Understand the split-screen sign-in and sign-up layout
This task explains how the split-screen authentication layout behaves on desktop and mobile, so you can plan and review sign-in and sign-up experiences effectively.
This guide is designed for project manager.
Steps
Step 1: View the desktop split-screen layout
On a desktop-sized screen, open the sign-in or sign-up page to see the split layout, with the reassurance or marketing brand panel on the left and the white form area on the right.
Step 2: Review the mobile form-first experience
On a mobile or narrow screen, open the same page to confirm that the form appears first and the condensed value strip is shown above it, ensuring the form is always visible without scrolling past marketing content.
Step 3: Check consistency between sign-in and sign-up
Switch between the sign-in and sign-up flows to see how each reuses the same layout shell while presenting different messaging in the brand panel and mobile strip.
Step 4: Confirm visual alignment with the design system
Inspect the authentication pages to ensure they use the Arial font stack, cream brand panel, white form panel, and consistent headings and CTAs as specified by the design system.
Last updated: 2026-07-09