Working with colours

An essential aspect of your design is Colour. Style Kits provide an intuitive method for managing color, through the controls located at the  Global Colors tab in the Style Kits panel.


Any color that has been manually added on individual elements/widgets, will always override the Style Kit Global Color values. For the Global Colors to work, make sure that the elements are free of manually added styles.

The Global Colors Panel

Currently, in the Global colors you will find the following controls:

Controlling Accents and texts

The three first controls affect the Accent and Typography colors, throughout your template(s).

Primary Accent

This is the color that will apply on your links. Make sure it is consistent with your brand, and has the proper contract in color.

Secondary Accent

The secondary accent color will apply on your buttons, and will replace their default color. You can customize further the color of each individual button size, through the Buttons Tab. Search this knowledge base for editing Buttons for more details.

Text and Headings Color

This is essentially the color that applies on the main text and the headings / titles.

Using Dynamic Background colors

The next group of controls offers the possibility to apply dynamic background colors to any section or column. For example, in your layouts, you might have certain sections that use a light or a dark background-color, and you want this to be consistent to all the layouts. Even better, you can control these colors dynamically from the style kits panel, by applying intuitive classes on the Sections you want. This way, if you want at some point to change the color of your light or dark background color globally, you dont need to browse through your pages and copy / paste styles among your sections. 

Let's see how this works.

Light Background

You can define a color for sections with a light background color. For example, if your body background color is white, you might want some of your sections in the layout to be differentiated by a light, background color. 

You can apply this color to any section or column via the class: sk-light-bg

Remember to add the class without the dot, so it's simply sk-light-bg instead of .sk-light-bg

Any text elements inside a section with the light background class will inherit the color that you have defined for Typography and Headings.

Dark background

Apart from sections with light background color, you almost definitely use sections that have a dark background color. In the same logic, the Dark background color option allows you to add color to such sections, with consistency and dynamic site-wide control.

In order to apply this color to a column or section, you just need to apply the class:  sk-dark-bg

Text over Dark background

In the context of a section with a dark background, you will most likely need to define a color for the text that appears over it, because normally it will not be the default text color you are using. The Text over Dark background control does just that. It allows you to set a color that will be applied by default to any Typographic element that is nested in a section with the  sk-dark-bg class applied on it.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us