Log in flow
 |  |  |
| Log in form | Reset password form | 2FA varification |
Log in with CAPTCHA
After the system sends an error requesting a CAPTCHA security check (due to number of invalid log in attempts) the CAPTCHA element will be added after the UN/PW fields, the 'log in' button will move below the CAPTCHA element and the focus will be placed on the PW field.
 |  |  |
| Failed login | Failed login with CAPTCHA and CAPTCHA system alert | Failed login with CAPTCHA and CAPTCHA system alert + keyboard |
Create account flow
 |  |
| Create account form | Form validation example |
Dynamic text styles and colors
| Section | Type style | Color |
| Form title | Headline | #54595D |
| Form description text | Subhead | #000 |
| Label | Caption | #72777D |
| Placeholder text | Body | #EAECF0 |
| Form validation progressive | Caption | #00af89 |
| Form validation destructive | Caption | #d33 |
| Form validation warning | Caption | #fc3 |
Checklist to help me track progress...
- Move progressive buttons out of nav bar
- Update title labels and placeholder text
- Update captcha box styling adding border and side buttons
- Move invalid password alert inline if we can detect error type
- Make password alert and placeholder dots red on invalid password
- Move account creation username exists alert inline if we can detect error type
- Make username alert and placeholder dots red on username exists
- Move confirm pwd alert inline
- Make confirm pwd alert placeholder dots yellow on confirm pwd error
