Auth Page (Sign In / Sign Up)
Minimal focused layout for authentication — the highest-friction point in onboarding.
Layout
Centered single column, max-width 400px, vertically centered or top-aligned. Logo above form. Social auth above email/password (reduces friction). No sidebar, no navigation — pure focus.
Content Slots
Logo
Brand mark at top, links to marketing home.
Heading
"Sign in to [Product]" or "Create your account" — clear, specific.
Social auth
Google / GitHub / SSO buttons first — highest conversion path for most products.
Divider
"or" divider between social and email/password.
Email + Password fields
Autocomplete attributes set. Password field has show/hide toggle.
Primary CTA
"Sign in" or "Create account" — full width button.
Switch link
"Don't have an account? Sign up" — below the form.
Forgot password
Text link near password field — not in the footer.
Hierarchy Rules
- Interaction cost must be minimal — every extra field halves conversion
- Social auth > email/password in visual hierarchy (try it first)
- CTA button full-width — large target, clear intent
- Error messages appear inline below the relevant field, not in a banner
- No navigation, no sidebar — every exit link reduces conversion