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.
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 will appear.
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?
1) Primary: side navigation, banner image, bolded words such as names
2) Accent: icons, headers
3) Base: background
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.
*Note: If the admin isn't quite sure of the exact shade or hue of their logo, the organization's design team usually has these 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 will live on top of the Base color. Using a florescent or unique color (as fun as it might be) probably wouldn't be ideal for your users. 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.