Sign In & Sign Up Auth Screens
A polished two-panel authentication layout with sign in and sign up forms, social OAuth buttons, and a branded illustration panel — suitable for any web app.
Compatible with:ChatGPTv0Bolt.newCursorGitHub Copilot
Patterns:form
Prompt
Create a split-panel authentication UI with two screens: Sign In and Sign Up.
**Overall layout:**
Split 50/50 horizontally. The **right panel** is a branded illustration/marketing panel — dark blue background, a product screenshot or abstract illustration, a headline ("Join 10,000+ teams building better software."), and 3 bullet points with icons. This panel is hidden on mobile.
The **left panel** contains the auth form, centered vertically and horizontally within the panel.
---
**Sign In screen (left panel):**
- Product logo at the top.
- Heading: "Welcome back"
- Subheading: "Don't have an account? Sign up →" (link)
- Two social sign-in buttons stacked: "Continue with Google" (with Google icon), "Continue with GitHub" (with GitHub icon). Full-width, outlined style.
- A horizontal divider: "or continue with email"
- Form fields: Email (text, autofocus), Password (password field with show/hide toggle icon).
- A "Forgot password?" link aligned right beneath the password field.
- "Sign in" primary button (full width, blue).
- Footer: small text "By signing in, you agree to our Terms and Privacy Policy."
---
**Sign Up screen (left panel):**
- Same logo.
- Heading: "Create your account"
- Subheading: "Already have an account? Sign in →" (link)
- Same two social buttons.
- Same divider.
- Form fields: Full Name, Work Email, Password (with strength meter below), Confirm Password.
- A checkbox: "I agree to the Terms of Service and Privacy Policy"
- "Create account" primary button (full width, blue).
---
**Forgot Password screen (left panel):**
- Heading: "Reset your password"
- Subheading: "We'll send a magic link to your email."
- Email field.
- "Send reset link" button (full width).
- "← Back to sign in" link.
---
Use white background for the left panel. Inputs should have a zinc-200 border that turns blue on focus. Soft drop shadow on the card on small screens where the form fills the viewport.Mockdown
[SPLIT LAYOUT — 50/50, hide right on mobile]
┌─────────────────────────────┐ ┌────────────────────────────────┐
│ LEFT — Auth Form │ │ RIGHT — Brand Panel (dark blue)│
│ │ │ │
│ [Logo: Acme] │ │ [Product illustration / hero │
│ │ │ screenshot] │
│ Welcome back │ │ │
│ No account? Sign up → │ │ "Join 10,000+ teams building │
│ │ │ better software." │
│ [G] Continue with Google │ │ │
│ [GH] Continue with GitHub │ │ ✓ Free 14-day trial │
│ │ │ ✓ No credit card required │
│ ────── or continue ────── │ │ ✓ Cancel anytime │
│ │ │ │
│ Email │ │ │
│ [user@example.com______] │ │ │
│ │ │ │
│ Password Forgot?│ │ │
│ [••••••••••••••• 👁] │ │ │
│ │ │ │
│ [Sign in ] │ │ │
│ │ │ │
│ By signing in, you agree │ │ │
│ to our Terms & Privacy. │ │ │
└─────────────────────────────┘ └────────────────────────────────┘
[SIGN UP VARIANT — left panel]
Create your account
Already have an account? Sign in →
[G] Continue with Google
[GH] Continue with GitHub
────── or continue ──────
Full Name [________________________]
Work Email [________________________]
Password [________________________]
[Strength: ████████░░ Strong]
Confirm Password [________________________]
☑ I agree to the Terms of Service and Privacy Policy.
[Create account ]
[FORGOT PASSWORD VARIANT — left panel]
Reset your password
"We'll send a magic link to your email."
Email [________________________]
[Send reset link]
← Back to sign inSign In & Sign Up Auth Screens
┌───────────────────────────────────────────────┐
│ │
│ ◉ LayoutPrompts │
│ │
│ ┌──────────────────────────┐ │
│ │ │ │
│ │ Sign In │ │
│ │ │ │
│ │ Email │ │
│ │ [____________________] │ │
│ │ │ │
│ │ Password │ │
│ │ [____________________] │ │
│ │ │ │
│ │ [□] Remember me │ │
│ │ │ │
│ │ [■■■■ Sign In ■■■■■■] │ │
│ │ │ │
│ │ ── or continue with ── │ │
│ │ [ G ] [ 🍎 ] [ GH ] │ │
│ │ │ │
│ │ Don't have an account? │ │
│ │ Sign up → │ │
│ └──────────────────────────┘ │
│ │
└───────────────────────────────────────────────┘UI Patterns Used
Learn more about the UI patterns used in this layout.