A complete authentication UI design system with login, signup, and forgot password pages. Split-screen layout with a green brand panel on the right featuring testimonials and social proof, and a clean white form on the left. Every detail is designed to reduce sign-up friction.
What Is Auth Pages UI?
Auth Pages UI is a complete design system for the authentication experience — login, sign up, and forgot password. It uses a split-screen layout that solves the hardest problem in auth UX: building enough trust for a new user to commit their email and password.
The right panel does the trust-building: brand identity, a testimonial, client logos. The left panel does the conversion: a frictionless form with minimal fields and social auth options first.
The Vibe
The first impression that earns the second click.
Clean white on the left. Vibrant green on the right. The split is not decorative — it is functional. Users need to feel that the product is real, trusted, and worth signing up for. The testimonial and client logos on the right answer that question before the form on the left asks anything.
Core Pages
Sign Up Page
The signup page leads with social auth — Google first (most trusted), then Apple, then email as the fallback. This ordering reduces friction: most users have Google or Apple accounts and can sign up without creating a new password.
The "Continue with Email" button expands to show email + password fields. This progressive disclosure keeps the initial view clean.
Login Page
The login page goes directly to email + password fields (users who return know their credentials). The logo and brand wordmark appear at the top of the form column. "Forgot Password?" is right-aligned below the password field — exactly where users look for it.
Forgot Password Page
Single field: email only. No extra complexity. A confirmation message replaces the form after submission: "Check your email — we've sent a reset link to [email]."
Design Rules (Deep Dive)
The Green Panel Is Not Decoration
The right panel earns its screen real estate. Every element has a conversion purpose:
- Testimonial — social proof from a real user
- "Exactly what I needed!" — specific, believable quote
- Client logos — authority signals (Chase, Google, BuzzFeed, Walmart)
The decorative leaf shapes in the background add organic depth without distraction — they are rendered at rgba(255,255,255,0.12), barely visible, purely atmospheric.
Input Field Design
Inputs use background: #F5F5F5 with no border — this is a deliberate choice. The filled background communicates "this is a form field" without the visual noise of a border. On focus, a 2px green border appears — confirming action without being aggressive.
Button Hierarchy
The color system enforces hierarchy:
- Green (
#3DBE6C): one primary action per screen (Sign In, Sign Up, Send Reset Link) - Black: Apple auth (uses Apple's brand convention)
- White/bordered: Google auth (uses Google's brand convention)
- Orange (
#F5A623): cross-links only (Sign In, Sign Up in the "don't have an account?" line)
Mobile Behavior
On mobile the split collapses: the green panel moves to the top and stretches full width, with rounded bottom corners only (top corners flush with the screen edge, like a header). The form appears below with generous padding. The panel shows the full testimonial and client logos — users scroll through brand proof before reaching the form.
This is intentional. On mobile, trust signals come before the ask.