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