Style Kit Colors
Similar to Elementor Global Colors, Style Kit Colors are Global color variables that can be used dynamically in any element of the layout, across all pages. Style Kit introduces a flexible color system, based on a palette of up to 48 fixed slots, where each slot is assigned to a specific use of color in the layout and overall design system.
How to activate the Style Kit Colors
To activate the Style Kit Colors experiment, go to Style Kits > Settings > Experiments and activate the Style Kit Colors experiment.
You can then find the Style Kit Colors panel under the Global Colors panel in Theme Style Editor.
Accessing from Contextual menu
Anywhere in the editor, right click to open the contextual popup. You can find a text link to teleport to the Style Kit Colors.
Style Kit Colors
There are up to 48 color variable slots, which have been split into three tabs. The free version allows for 16 color variables, which corresponds to the slots of the first panel. Pro version allows for up to 48 variables, and facilitates wider design systems.
All the templates and patterns in Style Kits will be using a shared setup of this color pallete, with the same role assigned to each slot. Practically, what this means is that for example the first color slot (Background 1) will affect the site background color in every template. Accordingly, the role of each color is consistent across all the templates.
The purpose of the Style Kit Colors Panel is to have all the colors of your design system in one central place, so you can manage and maintain them with efficiency. The Style Kit Color System consists of the following 16 color roles:
Background / Surface Colors
Colors that are mainly used on surfaces and backgrounds.
- Site background: The main background / body of your site
- Light background: A light color that can be used to separate sections and surfaces
- Dark background: A dark color that requires inverted / negative text to be displayed over it
- Overlay: A transparent overlay color for popups and lightboxes
Accent / brand Colors
With accent colors we refer to colours derived from the brand’s color palette and used in the layout to add expressiveness and tone, and draw attention.
Accent colors are applied on elements like buttons, links, icons and specific “brandable” areas. They can also be used as background colours, and applied on surfaces.
- Primary Accent: Button and usually links color
- Secondary Accent: A complementary accent color that can be used on other elements like icons, dividers and more.
- Accent 3: Another color slot that can be used for a wider palette of accent/brand colors. This is a blank placeholder to add any of your brand colors.
- Accent 4: Another slot for the same purpose.
Typographic colors are applied on Text and Titles, and consist of:
- Titles: The color of the Headings.
- Text: Body text color
- Secondary Text: A variation of the body text color, usually gray
- Inverted Text: Text that is displayed over a dark (or accent) background needs to be inverted (for example white text over black background).
Other colors / supportive
- Border 1: Thin line borders are assigned this color variable
- Border 2: A blank placeholder to add your color. Keep it related to borders!
- Feedback 1: Color for showing success messages
- Feedback 2: Color for showing error messages
You can rename any of the labels by clicking on it and typing your custom label. This will not affect the color variable slug. In the backend, all Style Kit Color variables are given generic slugs in the form of:
var( --e-global-color-sk_color_XX )
Staying compatible with the Style Kits Templates and Patterns.
If you work with templates and patterns from the Style Kits template library, you must follow the same system. If you want to customise the labels, use something that is related to the role of the specific variable. For example, you may want to rename the "Site Background" into "Body BG". Both these labels convey correctly how the color is used in the templates.
What about Elementor Global Colors?
You can still use Elementor Global colors, and your current color styles will not get affected by the Style Kits Global Color Palette.
The difference between Elementor Global Colors and Style Kit Colors, is that the Style Kit Color Palette are stored on the Style Kit Level. On the contrary, the Elementor Global Colors are always stored in the Global Site Kit.
If you are working with multiple Style Kits, you can now set different values of the same global variable, per each Style Kit.
Additionally, in Elementor’s Global Colors, apart from the 4 system colors, all custom global colors can be deleted and manipulated often leading to confusion, duplicate entries and design debt.
Style Kit Colors on the other hand represent a consistent and “fixed” palette of color variables that cannot be deleted. It's up to you to develop and extend your own color system using the Style Kits Global Colors setup as the backbone of your implementation.