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. You can apply Style Kit Colors via the "global" icon in the same way you apply Elementor Global Colors. All of the available Style Kits colors will be included in the list.

The Style Kit colors panel

The Style Kit Colors are located below Elementor Global Colors, under Site-Settings \ Global Colors.

Quick-access from the right-click menu

Right-click on any element in the editor to open the contextual menu. You can find a text link to teleport you to the Style Kit Colors.

Panel Overview

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 that is used by the patterns makes use of the first panel that includes the following 16 color variables.

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 16 slots of the first panel. Pro version allows for up to 48 variables, and facilitates wider design systems.

All the patterns in Style Kits are using a shared setup of this color pallete.

Background / Surface Colors

These are 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
Background 4: A blank slot for your custom color

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
Accent 2: 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 3: Another slot for the same purpose.
Accent 4: Another slot for the same purpose.

Typographic colors

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
Inverted Text: Text that is displayed over a dark (or accent) background needs to be inverted (for example white text over black background).

Other / supportive colors

This is a set of 4 extra color variables that you can use for own purposes.

Border 1: Thin line borders are assigned this color variable
Color 14: A blank placeholder to add your color.
Color 15: A blank placeholder to add your color.
Color 16: A blank placeholder to add your color.

Renaming labels

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 )