Brand Guide

Introduction to Your Style Guide

This style guide ensures that your website has a consistent, professional look by defining the key design elements—such as colors, fonts, and spacing—that create a polished and user-friendly experience.

Why Use a Style Guide?

A well-structured website follows a set of design rules to maintain visual consistency. This guide provides those rules, helping you apply styles effectively in Elementor without needing to make design decisions every time you add content.

Understanding Variables & Classes

To keep styling flexible and consistent, we use two main approaches:

1. CSS Variables

Variables store reusable design values such as colors, spacing, and dimensions. They help keep styles consistent and easy to update.

On there own they do not do anything, they do not directly effect a style until they are applied to a style. In our example below we have a variable called “–space-m”, we could name this anything we want, it’s is not important it should just make sense to anyone reading it. It’s value is “16px” which means this variable can be used anywhere we set a px(pixel) value so; width, height, font size but the common use for a variable named “–space-*” is in properties where we are creating space so; padding, margin and gap.

An important thing is, below is how we define a variable but to use it we must say “var(variable-name)” e.g. “var(–space-m)”. In element an example would be in padding. but to do so we must first change the unit of measure from px to custom (a pencil icon). I common approach is to use t-shirt sizes so the “m” in –space-m means medium and it’s common to define sizes ranging from 4xs to 4xl but you can extend this further if you wish. However it is worth noting m(medium) is typically the base size.

Here’s an example of how variables are used in css which is where they are defined (or within the CoreFramework plugin):

				
					:root {
  --space-m: 16px;
  --primary-color: hsl(220, 90%, 56%);
  --border-radius: 4px;
}

Where We Use Variables in Elementor

Spacing – You can set padding, margins and gaps using variables like var(–space-m).
Borders & Radius – You can ensure consistent rounding of buttons, cards, or other elements.
Font Size – You can ensure consistent font sizes across the site by assigning variables to your font sizes using variables like var(–text-m).

Because variables store values centrally, any change to a variable will automatically update all elements and classes using it, reducing manual adjustments across your site.

2. CSS Classes

Classes apply a predefined set of styles to an element. While variables control individual design values. To apply a class to an element in Elementor, select the element go to the “Advenced” tab and enter the class/es to the “CSS Class” field under the “Layout” section.

Again, by themselves a class does nothing, until it is applied to an element. but once you do, all style properties applied to the class are applied to the element.

It is common practice to define to types of class:

Utility Classes: These define a single property like padding. In Elementor this is any more useful than appling a variable but a colour utility class is the only way you can apply a colour to an element in elementor.
Component Class: These are more commonly used in Elementor to define whole element styles. An example is a button where we define, font size, colour and weight, border colour and thickness along with padding. So a button class would provide everything you need to define a buttons appearance.

A few key points:

Classes do not define variables, but they can use variables within their styles for consistency.
Class names follow a common sense approach but you can define a class with any name. For example buttons are usually defined with “button” or “btn” but “bacon” is just as valid but less intuitive.

				
					.button {
  padding: var(--spacing-md);
  background-color: var(--primary-color);
  color: white;
  font-weight: bold;
  border: 2px solid var(--primary-color);
  border-radius: var(--radius-m);
}

/* this is not a separate class but the state when the mouse hovers over it */
.button:hover {
  background-color: hsl(220, 90%, 46%); /* Slightly darker for hover */
}

When to Use Variables vs. Classes

How This Works in Elementor

Variables can be assigned directly to properties like margin, padding, width, and height.
Classes can be applied to elements, but you do not use a class to define a variable value—instead, classes use variables for consistency.

By following this guide, you’ll have a clear framework for applying styles efficiently, making your site easier to manage and more visually cohesive. Let’s explore each section in detail!