Three-Color Design is a quick and simple way to add character to a brand and ensure a cohesive experience for users. Below are the steps for setting up this feature as well as tips on choosing the three colors to represent the associated brand.
This article outlines the following concepts:
Configure Three Color Design
Go to Design > click Brands > select an existing brand or click New
In the Site Details tab > toggle Yes for the option "Three Color Design"
The three color options of Primary, Accent, and Base colors appear.
When Three Color Design is enabled, the following color selectors in the User Portal editor are overridden:
- Navigation Bar tab
- Navigation bar color
- Navigation bar icon color
- Main View Area tab
- Title bar color
- Tile bar text color
- Submit button background color
- Submit button text color
- Submit button hover background color
- Submit button hover text color
Three Color Design Tips
While the decisions for each of these colors are up to the admin of each brand, Tovuti would like to offer tips on how these three colors can work best to create a cohesive experience for both users and other admins.
Tip #1: What's the difference between Primary, Accent, and Base color?
- Primary: side navigation, banner image, bolded words such as names
- Accent: icons*, headers
- Base: background
The accent color is used to designate the color of the badge background in a Course Complete Alert.
Tip #2: Choosing a Primary color.
The Primary color in many cases will be a backdrop for your Accent. In the above image, the Accent-colored icons live on the Primary-colored side-nav. With this in mind, make sure to pick a dark/light combination with your Primary/Accent colors to ensure everything is viewable.
Tip #3: The Accent color is typically the color that is most associated with your brand.
As seen in the screenshot above, the Accent color in the dashboard is our custom "Tovuti" orange. If the logo of your company or organization frequently uses a custom color, Accent is the perfect place to put this color on display.
If the admin isn't quite sure of the exact shade or hue of their logo, the organization's design team usually has various color hex codes on file so the color can be matched exactly.
Tip #4: Base = background. Make sure to use a color that doesn't distract.
Most of the brand's content lives on top of the Base color. Using a florescent or unique color (as fun as it might be) probably wouldn't be ideal for the user experience. When in doubt, white or black are often the best options.
Tip #5: Orchestrate the three colors.
When choosing the three colors of this design, the best practice in most cases is to choose three unique colors. If two (or all) of the three colors are similar, it can cause a blending together of the user area and confuse visitors to the site. Using unique colors creates crisp lines and designs within the user area.
As mentioned above, choosing the colors in the Three Color Design is the responsibility of the admin. While these tips may be helpful, they are by no means rules. Feel free to experiment with colors and designs to find exactly what best represents the brand.