Login page design examples: what the best ones do, and what to steal
The login page is the most visited page of most products and the least designed. These examples are worth studying not for how they look but for the decisions they record. Here is what each one is actually doing.
Why login pages are worth studying
A login page is a complete product in miniature: one goal, one form, real constraints, and consequences for getting trust wrong.
Everything a designer claims to be good at shows up here. Hierarchy, because there are two audiences (new and returning) competing for the same pixels. Copy, because three words on a button change conversion. Systems, because errors, loading and lockouts all need states. And judgment, because the page has to feel like the product behind it.
The examples, annotated
Linear
The quietest page on this list and the most confident. One input, one primary action, SSO present but visually subordinate. The decision to steal: restraint is a feature, because a login page with three equal buttons is a page with no opinion.
Vercel
Git-first login: the GitHub button is primary because their users arrive with a GitHub identity. The decision to steal: order your auth options by how your users actually think of themselves, not alphabetically.
Stripe
Split layout with product proof on one side and a sparse form on the other. Error handling is inline and specific. The decision to steal: the form side stays almost empty, because every extra element is a reason to leave.
Figma
Email first, password revealed only when needed, social options below a clear divider. The decision to steal: progressive disclosure keeps the first impression to one field even when the full flow has more.
Notion
Treats login and signup as one flow: enter an email, get a code, account created if none exists. The decision to steal: removing the new versus returning split removes an entire class of user error.
GitHub
Conventional form, but the passkey option sits exactly where muscle memory looks. The decision to steal: introduce new auth methods as upgrades inside the familiar pattern, not as a separate door.
Apple
One field, centered, nothing else on the page. The decision to steal: total commitment to a single action is a brand statement. It only works when the brand can carry the silence.
Slack
Workspace-first login acknowledges that users think in teams, not accounts, and offers a magic link for people who forgot which email they used. The decision to steal: model the page on how users remember themselves.
Linear-style CLIs and dev tools
Many developer products skip the page entirely and authenticate in the terminal. The decision to steal: the best login page is sometimes no login page. Question whether the web form is the right surface at all.
Your own product, last
Study these after you have sketched yours, not before. Copying a reference before knowing your constraints produces a page that looks familiar and converts poorly.
Patterns that repeat across the good ones
- One primary action, visually louder than everything else on the page.
- Social or SSO buttons ordered by the audience's actual identity, with a clear divider before the email form.
- Errors inline, specific, and placed where the eye already is. Never a red banner at the top of the page.
- The password field offers a show toggle, and forgot password is one tap from where the failure happens.
- Loading states on the button itself, so the page never appears frozen during the request.
- The page loads fast and works on a phone held in one hand, because that is where most logins happen.
The recurring mistakes
| Mistake | Why it happens | What it costs |
|---|---|---|
| Two forms on one page | Login and signup treated as equal citizens | Returning users, the majority, get a worse experience every day |
| A carousel of marketing slides | Someone decided the page should sell | Slower load, split attention, and a page that fails its one job |
| Generic error copy | Errors designed as an afterthought | Users cannot tell a wrong password from a wrong email from an outage |
| Four equal social buttons | No decision about who the user is | Choice paralysis at the exact moment you want momentum |
| No distinct lockout and rate-limit states | Engineering handled it with a toast | Real users locked out with no explanation and no path back |
A checklist for your own
- 01
Pick the primary action
One button wins. If two feel equal, you have not decided who the page is for.
- 02
Design every failure state
Wrong password, unknown email, expired link, locked account, network down. Each gets copy and a next step.
- 03
Write the microcopy last, then cut it in half
Button labels, field help, error text. Shorter almost always converts better here.
- 04
Test on a real phone on real wifi
Thumb reach, keyboard overlap, autofill behavior. The simulator hides all of it.
- 05
Measure the drop-off
This is one of the few pages where the success metric is unambiguous. Instrument it from day one.