Forms

Forms include many design elements users interact with that need to fall in alignment with usability guidelines.

FORMS / INTRO

Forms designed in this section outline the correct contrast ratio in each state and are usable on light and dark backgrounds.

Please be advised that the ADA legal landscape is constantly evolving. You are required to ensure your business is in full compliance and we encourage you to consult with your attorney.

FORMS / USAGE

Forms are used to capture user data and require the highest level of priority in usability standards.

Example of a form on an obsessed grey background

FORMS / ANATOMY

Forms are made up of (4) parts: Title, Headline, Input Fields, and a Submit Button.

1
Title
2
Input Fields
3
Consumer Acknowledgment
4
Submit Button

FORMS / TEXT INPUTS

Text inputs have an outline that increases the discoverability of text fields.

Example of a call to action tonal button with an icon.

Use sentence case for all headlines, taglines, and buttons greater than 2 words.

Don't add excessive horizontal spacing between the letters in sentence case headlines.

FORMS / TEXT INPUTS / TYPES

Outlined Filled and Outlined inputs allow forms to be most usable on light, dark, and medium backgrounds.

2 INPUT TYPES

1
Outlined Filled (Primary)
2
Outlined (Secondary)

FORMS / TEXT INPUTS / ANATOMY

There are 6 elements to a text input that can be utilized to help users identify their purpose and take action appropriately.

1
Input Text
2
Label Text
3
Trailing Icon (optional)
4
Activation Indicator
5
Character Counter (optional)
6
Helper/Error Text (optional)

FORMS / TEXT INPUTS / SPECS

All label fonts are the same weight however, input sizes may vary.

FORMS / TEXT INPUTS /STATES

DARK BACKGROUNDS

Forms placed on dark backgrounds use white labels and tones of primary colors to remain on brand and in compliance.

The style defined is available for use on dark backgrounds listed below.

OBSESSED GREY

(#252526)

FORM ELEMENTS - DEFAULT STATE

Label Text:

#FFFFFF

Input Background:

#3B3B3C

Border:

#83775E

User Input Text:

#FFFFFF

ACTIVE STATE

Input Background:

#2D2D2E

Glow:

9px #83775E

ERROR STATE

Error Text:

#D37D78

LIGHT BACKGROUNDS

Forms placed on light backgrounds use tones of primary colors to remain on brand and in compliance for outlines.

The style defined is available for use on dark backgrounds listed below.

OBSESSED GREY LIGHT TINT

(#F4F4F6)

RELENTLESS GOLD LIGHT TINT

(#F8F7F2)

FORM ELEMENTS - DEFAULT STATE

Label Text:

#121212

Input Background:

#FFFFFF

Border:

#83775E

User Input Text:

#121212

ACTIVE STATE

Input Background:

#FCFBF9

Glow:

9px #83775E

ERROR STATE

Error Text:

#8D312E

WHITE BACKGROUNDS

Forms placed on white backgrounds can use the default styles to the right or a neutral palette.

WHITE

(#FFFFFF)

FORM ELEMENTS - DEFAULT STATE

Label Text:

#121212

Input Background:

#F8F7F2

Border:

#83775E

User Input Text:

#121212

ACTIVE STATE

Input Background:

#FCFBF9

Glow:

9px #83775E

ERROR STATE

Error Text:

#8D312E

OUTLINE

Outline forms elements can placed on any background using the corresponding brand text color for your background. Do not mix outline and filled form elements.

ANY
FORM ELEMENTS - DEFAULT STATE

Label Text:

#121212

Input Background:

Transparent

Border:

#121212

User Input Text:

#121212

ACTIVE STATE

Input Background:

Transparent

Glow:

9px #121212

ERROR STATE

Error Text:

#8D312E