Buttons and form fields
—

Floating action buttons
—

Floating action buttons (FAB) are used to highlight primary CTAs. FABs should be different than other buttons used on the page to highlight their importance.

Filters
—

Filters are used to organize information into categories. They exist in active state and inactive state.

Text fields
—

Text fields appear in a variety of states. In an active/hover state, a user can type directly into the field. In a disabled state, the field is grayed out and inactive. An error state appears when a user enters invalid text.

Text areas

—

Text areas are fields that allow for lengthy user responses or multi-line text input. These fields should have a clearly stated character limit.

Select menu

—

Select menus appear on entry forms, allowing users to choose from a list of pre-populated responses. 

Form fields

—

Make forms as clean and scannable as possible. Only collect the most relevant information from users to reduce the number of input fields. 

Tooltips

—

Tooltips offer additional, important website content. (E.g., How to find your Group Number) Icons will appear as an “?” inside a circle. A modal window will then pop up displaying the additional information.