Patterns
Authentication
Two accepted layouts: split screen (contextual image + form card) and a simple modal, centred on a plain background. Both share the same field and button rules.
Format 1 — split screen
Format 2 — centred modal, plain background
For a lighter-weight sign-in — no contextual image, just the form on its own card.
Do
- Keep the submit button visually muted/disabled until every required field validates.
- Put "Remember me" and "Forgot Password?" on the same row.
- Use UPPERCASE/small-caps field labels — this is a deliberate auth-only convention, not used elsewhere.
Don't
- Enable the submit button before validation, relying on a click-time alert instead.
- Use a fullscreen background image without checking overlay contrast against both its darkest and lightest regions.