Forms

Fields in web app forms are generally made up a label, placeholder text and an icon, as well as a visible bottom border. The icons should be the neutral grey colour (#69788E), the label should always be uppercase and smaller in size when compared to the placeholder. The placeholder colour should be #B1B6BE.

The examples below shown form groups before and after the text inputs have been filled.

Helper Text

Some fields will have helper text that is used to guide users or to soothe their concerns. For example, they will see information telling them what they need to include when choosing their new password.