COLORS
White: #ffffff Text & secondary button color
Cultured: #FAFAFA Background for text blocks
Platinum gradient: linear-gradient(180deg, #FFFEFF 0%, #EBEBEB 100%) Primary button background
Sonic Silver: #757575 Placeholder text
Slate Grey: #717E85 Default body background
Vermilion: #EB0000 Alert text & icons
Black: #000000 Button and input color
TYPE
.h2 - Nunito SemiBold(600) 47px #FFFFFF Primary font for page messages
.h2-small - Nunito SemiBold(600) 44px #FFFFFF Primary font for page messages when .h2 is too large and text will not fit across screen.
.error .pop-up .message h3, .alert .pop-up .message h2 - Nunito SemiBold(600) 42px #000000 Text used for primary message on alert and warning/error popups. Both h2 and h3 are were made the same in this case to set the before and after icons between succes and errror/warning.
.h4 - Nunito Regular(400) 38px #FFFFFF Font used for appointment labels, .h4.semibold used for copay total
.notification.message - Nunito Regular(400) 38px #000000 Text for the alert & error popup messages, and used in the copay processed message as .notification.message.semibold
.h3 - Nunito Sans Regular(400) 32px rgba(255, 255, 255, 0.8) Secondary font to accompany the Primary font to provide further context or description
.h5 - Nunito Sans Regular(400) 32px rgba(255, 255, 255, 0.8) Text for the title to copay details
.title - Nunito Sans Regular(400) 30px rgba(255, 255, 255, 0.9) Text used in the header for both messages & button descriptions
.large-input - Nunito Semibold(600) 30px #000000 Text used in the large inputs on the DOB page
.large-input.placeholder - Nunito Semibold(600) 30px #757575 Placeholder text used in the large inputs on the DOB page
.default-input - Nunito SemiBold(600) 26px #000000 Text used in the normal inputs
.default-input.placeholder - Nunito SemiBold(600) 26px #757575 Placeholder text used in the normal inputs
.button.selector - Nunito Sans Bold(700) 26px #000000 Text used to label the Primary action button
.button.selector.secondary - Nunito Sans Bold(700) 26px #FFFFFF Text used to label the Secondary action button
.p-dark - Nunito Semibold(600) 23px #000000 Text used in copay detials
.p-light - Nunito Semibold(600) 23px #FFFFFF Text used in copay summary see staff instruction
.input-error - Nunito Semibold(600) 21px #EB0000 Input error message text large & form error warning text
.input-label - Nunito Semibold(600) 17px #757575 Input label message text
.input-error .input-label - Nunito Semibold(600) 17px #EB0000 Input label error message text
BUTTONS
Primary action button active
.selector.button

Primary action button acvtive with indicator arrow. Use arrow when button is the only desired action left for user on screen.
.selector.button
Arrow

Primary action button with icon
.selector.button

Primary action button disabled
.selector.button.disabled

Primary action button loading
.selector.button.disabled

Secondary action button
.selector.button.secondary

.button.back with .title - Page back button
Back
FORM ELEMENTS
Large input field
Arrow
.large-input

Large input field with error
Arrow
.large-input

Default input field
Arrow
.default-input

Default input field with error
Arrow
.default-input

Default input field with button
Arrow
.default-input.secure-field

Default input field with button and background image
Arrow
.default-input.credit-card.secure-field

Default input field with button, background image, and error
Arrow
.default-input.credit-card.secure-field

Messaging
Default alert popup message
.alert .pop-up .message
Success alert popup message

.alert .pop-up .message h2

Detail or instruciton text
Warning error popup message

.error .pop-up .message h3

Detail or instruciton text
Form warning or error message
.credit-card-error .form-warning .input-error
Icons
show icon for CC field
hide icon for CC field
CC cards background for CC field
warning icon for input field
warning icon for form error
success icon for processed payment confirmation
lock/secure icon for CC pay button
cash icon for copay summary button
card icon for copay summary button
back icon for back button
close icon/button for popups
Indicator arrow for prompting user action
Error icon for popups
Success icon for popups