Color | Black
Primary Text color.
Used for all components (unless specified) throughout entire Slate design of the site.
Color | Blue
Background color for Banner on Questionnaire pages featuring category/progress bar.
Navigation Bar background color (default throughout).
!Important! Navigation Bar is revised on Product/Questionnaire pages to #393C47 so that it doesn’t blend with background banner.
Default background color for Banners for all pages throughout (except for questionnaire pages).
Banner color for product landing pages featuring value props.
Navigation Bar background color on Product and Questionnaire pages.
Color | Green
Used for primary ‘Call To Action’ buttons.
Used for ‘Skip This Step’ action text.
FYI Hover State: #5A9669
Used for primary Text-Links throughout.
FYI Hover State: #26995D
Used for ‘Add-Repeater’ action text.
FYI Hover State: #26995D
Color | Teal
Active State for Radio Buttons.
Used for Text
Links for product landing page SEO section / Table of contents.
Complimentary color to SEO text #72818B.
FYI Hover State: #4A726F
Active state for Labels for Input Field style.
Active state for 2px solid line for Input Field style.
Used for action text for FAQ.
Color | Complimentary Colors
Used to indicate an error or to remove.
Meant to indicate a warning.
Used to indicate an attention.
Used to guide User through interface.
Indicates a Text-Link that has been visited.
Validation text under Input Fields.
Contact Information located in Footer.
Text color located on secondary ‘Call To Action’ buttons.
Primary text color for SEO content on product landing pages.
Color | Neutral Palette
Used for text on Primary / Ghost Button (Active) ‘Call To Action’ commands.
Used on page backgrounds for contrast
Used for secondary ‘Call To Action’ buttons.
FYI Hover State: #C4C4C4
Used for Radio Buttons
FYI Hover State: #EFEFEF
Used for a variety of background compositions to contrast areas.
Used for Non-Active Text on Input Fields.
Used for a variety of background compositions to contrast areas.
Light composition gray on outline borders to accentuate areas slightly.
Used on light backgrounds (such as #FFFFFF or #F2F2F2) to accentuate styles/elements.
Used for most outline borders.
Can be used on light and dark backgrounds to help accentuate styles/elements.
Boosts outline borders drastically on styles/elements if needed.
Can be used as a text-color to a lighter version of #808285 if needed (ex. Search Bar text).