Layouts · Page types
Login / Sign-up Page
Also called: Sign in, Sign up, Login page, Registration page, Auth page
The page where users log in or create an account. A small, narrow form card sits in the middle with only the essentials like the account, password and submit button, often paired with a brand illustration.
Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.
How to tell AI
Swap in your own content firstBuild a login page with a split screen. On the left, a gray brand illustration and a one-line tagline. On the right, a centered 360px-wide form with, from top to bottom: the logo, the title "Welcome back", an email input, a password input with a show/hide toggle, a "Forgot password?" link, a full-width "Log in" button, third-party login icons and a "Sign up" link. Support submitting with Enter, show error messages below the inputs, and hide the illustration on mobile.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Login / Sign-up Page is what you need.
Use Login / Sign-up Page when
- Users need to enter an account and password or a verification code to get into the product
- Sign-up only needs a little required info and fits on one screen
- You want users to focus on logging in without other content getting in the way
Pick something else when
Sign-up requires lots of info filled in over several stages
Use insteadWizardAccount security actions for signed-in users, like changing the password or phone number (these belong on the Settings Page)
The page's goal is to introduce the product and win over new visitors
Use insteadLanding Page
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
The sign-up page asks for a dozen-plus fields right away
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
- 02
A failed login only says "Something went wrong" and doesn't say whether the account doesn't exist or the password is wrong
- 03
The login button has no loading state after clicking, so users click several times and submit more than once
- 04
Site-wide navigation and all kinds of recommendations are kept, and the form gets squeezed into a corner
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A narrow form card in the center of the page (or on the right half). From top to bottom it has the logo and title, the account and password inputs, the primary button, third-party login and a sign-up link. The left half can hold a brand illustration.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
The login and sign-up page is the front door to the product. There are two common layouts. One is a light full-page background with a card about 360–400px wide right in the center. The other is a split screen, with a brand illustration or tagline on the left and the form on the right. From top to bottom, the form has the logo and title, the account input, the password input, a "Forgot password?" link and the primary "Log in" button, followed by third-party login icons and "Don't have an account? Sign up".
The principle is to stay out of the way. No site-wide navigation and no unrelated recommendations, so users can focus on logging in. Keep sign-up fields to a minimum too; things like an avatar and a display name can be added after signing in.
Details to watch: give the password field a show/hide toggle; make error messages say what went wrong ("Wrong password", not "Something went wrong"); show a loading state on the login button while submitting to prevent repeat clicks; and support submitting with Enter.
Developer infoTerm ID, DOM cues, match priority
- Term ID
layout-auth- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
form:has(input[type="password"])
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026