Branding: Customize your Engage with your company colors
Introduction:
The Engage platform is delivered using a default color scheme.
When adding new modules each design has elements that are defined and mapped to a color rule. There are three primary colors used to customize your Contact Interface: Main, Accent and Tertiary.
These colors are used primarily for visual elements such as backgrounds, headers, and call to action items (links and buttons). These colors can be customized using your organization’s color branding but the usage of these colors must remain within the module configuration rules.
While this guide does not provide all of the module options it will provide a visual representation of the most frequently used elements and the elements that are displayed in the Contact interface. Once you’ve decided on the three primary colors for your organization, submit a ticket through our support portal. The colors should be represented by RGB codes.
Primary Element Colors:
Color-brand-main:
This is the color that will be used most often throughout your Engage site.
Where you’ll see it:
Contact View’s banner
Text of the group names, contact names, and rep names within the workspace
Background of any Module buttons and Scheduling button.
Color-brand-main-dark:
This color should be set to a darker version of your “color-brand-main” color.
For example, the heading text for modules is important to be legible against the white background of a module, therefore if a client’s “color-brand-main” color does not read well against a white background, this color will be used in substitute of the “color-brand-main.”
Where you’ll see it:
All module headings
Action buttons (add to-do, add comment, share module)
Color-brand-accent:
This color is used as an accent to several module elements.
Where you’ll see it:
Background of a quote in the welcome and/or bio modules.
Numbers within a stat strip asset type
The option for the contact to add a new document to a document sharing module (the box fill color).
Document type symbols within the document sharing module
Color-brand-tertiary:
This color is only used in 3 places within an Engage site. Usually to call out items that are small in size, but used in big ways by the contact. We want these elements to be easily noticeable among all the other colors.
Where you’ll see it:
The “I want to” button on the contact’s view
Text at comment text at the bottom of every module that notifies you of a comment or (if it’s blank) will say “Respond to {primary rep} and team here”
Sample: Views with Color Identifiers
Key:
Color-brand-main, Color-brand-main-dark, Color-brand-accent, Color-brand-tertiary
Workspace Edit View
Private Group
Templated Welcome Module
If you’d like to change the colors for your organization's Engage site, lease click the "HELP?" button in the upper right corner of your Engage screen or contact support to submit a request.