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.

AuthenticationSimplesaas
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 in
Sign 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.