Build a complete V4 design system in one afternoon

What a design system is (in Elementor terms)

A design system sounds like something a team of designers spends months building. In Elementor V4, it is something you can set up in one working session. The V4 design system has three layers: Variables (single values like colors and spacing), Classes (reusable multi-property styles), and component templates (pre-built sections). Together, they ensure every page you build looks consistent without you having to remember exact hex codes or padding values.

If you are an agency building sites for clients, a design system is the difference between "every page looks slightly different because whoever built it picked their own shade of blue" and "the whole site looks like one person designed it." It also cuts build time. Once the system is set up, building a new page is assembly, not design.

This guide walks through setting up all three layers in about 4 hours. Not a theoretical framework. Actual steps you can follow with Elementor V4 open in front of you.

Hour 1: Variables

Variables are single named values. Instead of typing #1E40AF every time you need your primary blue, you create a Variable called "color-primary" and reference it. Change the Variable once, every element using it updates.

Open Elementor's Site Settings (hamburger menu, top left, Site Settings). Go to the Variables section. You are going to create the following Variables. Copy these names exactly, or adapt them to your naming convention, but be consistent.

Color Variables (8 minimum)

• color-primary - Your primary brand color. The one used for buttons, links, and emphasis.
• color-primary-dark - A darker shade of primary. Used for hover states and active states.
• color-secondary - Your secondary brand color. Used for accents, secondary buttons, badges.
• color-neutral-900 - Darkest neutral. Headings, body text on light backgrounds.
• color-neutral-600 - Medium neutral. Subheadings, secondary text.
• color-neutral-200 - Light neutral. Borders, dividers, subtle backgrounds.
• color-neutral-50 - Near-white. Section backgrounds, card backgrounds.
• color-white - Pure white. Text on dark backgrounds, card surfaces.

Two optional but useful additions:

• color-success - Green for success states, confirmations, positive indicators.
• color-error - Red for error states, warnings, destructive actions.

Spacing Variables (5 minimum)

• space-section - Vertical padding between major page sections. Typically 80-120px.
• space-block - Spacing between content blocks within a section. Typically 40-60px.
• space-element - Spacing between individual elements (heading to paragraph, paragraph to button). Typically 16-24px.
• space-component - Internal padding within components like cards and boxes. Typically 24-32px.
• space-small - Tight spacing for inline elements, icon gaps, tag padding. Typically 8-12px.

Typography Variables (4 minimum)

• font-primary - Your primary font family. Used for headings and emphasis.
• font-body - Body text font family. Can be the same as primary or a complementary font.
• text-base - Base font size. Typically 16-18px.
• text-line-height - Base line height. Typically 1.5-1.7 for body text.

That is 17-19 Variables. It takes about 30 minutes to create and name them all. Spend the remaining 30 minutes of Hour 1 setting the values for a specific client project. If you do not have a client project in mind, use Snapelement's default values as a starting point and customize from there.

Hour 2: Classes

Classes are where the system becomes powerful. A Class bundles multiple properties (font size, weight, color, margin, padding) into a single reusable name. You apply a Class to any element, and it gets all those properties at once.

Go to Site Settings, then Classes. Create the following Class library. Each Class name follows a convention: category-descriptor-variant.

Typography Classes (8)

• text-heading-xl - Page titles. Font: font-primary, Size: 48px, Weight: 700, Color: color-neutral-900, Margin bottom: space-block.
• text-heading-lg - Section headings. Size: 36px, Weight: 700.
• text-heading-md - Subsection headings. Size: 28px, Weight: 600.
• text-heading-sm - Card headings, minor headings. Size: 22px, Weight: 600.
• text-body-lg - Lead paragraphs, intro text. Size: 20px, Weight: 400, Line height: 1.6.
• text-body - Standard body text. Size: text-base, Weight: 400, Line height: text-line-height.
• text-body-sm - Captions, labels, footer text. Size: 14px, Weight: 400.
• text-overline - Category labels, section labels. Size: 12px, Weight: 600, Letter spacing: 1.5px, Text transform: uppercase, Color: color-primary.

Button Classes (4)

• btn-primary - Background: color-primary, Text: color-white, Padding: 14px 32px, Border radius: 8px, Font weight: 600.
• btn-primary-hover - Background: color-primary-dark (apply on hover state).
• btn-secondary - Background: transparent, Border: 2px solid color-primary, Text: color-primary, same padding and radius.
• btn-ghost - Background: transparent, no border, Text: color-primary, underline on hover.

Card Classes (3)

• card-base - Background: color-white, Padding: space-component, Border radius: 12px, Box shadow: 0 1px 3px rgba(0,0,0,0.1).
• card-bordered - Same as card-base but with Border: 1px solid color-neutral-200 and no shadow.
• card-dark - Background: color-neutral-900, Text: color-white, same padding and radius.

Layout Classes (4)

• section-padded - Padding top and bottom: space-section.
• section-dark - Background: color-neutral-900, Text: color-white.
• container-narrow - Max width: 720px, Margin: auto.
• container-wide - Max width: 1200px, Margin: auto.

That is 19 Classes. Building them takes about 45 minutes. Spend the remaining 15 minutes testing: apply a few Classes to elements on a blank page to verify they look right.

Hour 3: Component templates

Now you build 5-8 reusable page sections using your Variables and Classes. These become the building blocks for every page.

Create a new page called "Design System Templates" (set it to Draft so it is not publicly visible). Build the following sections on it:

1. Hero section. Full-width container with a heading (text-heading-xl), subheading (text-body-lg), and two buttons (btn-primary, btn-secondary). Background using color-primary or an image with overlay.
2. Features grid. Three-column container using Flexbox. Each column is a card (card-base) with an icon, heading (text-heading-sm), and paragraph (text-body).
3. CTA section. Dark background (section-dark), centered text, heading (text-heading-lg), paragraph (text-body-lg), and button (btn-primary).
4. Testimonials. Two or three testimonial cards (card-bordered) with quote text, name, and company.
5. Contact section. Two-column layout: left column with heading, paragraph, and contact details; right column with an Elementor form.

As an alternative to building from scratch, use Snapelement V4 components as your starting point and apply your Classes to them. This cuts Hour 3 from 60 minutes to about 20, because the layout and structure are already built. You just apply your custom Variables and Classes to match your brand.

Save each section as a template (right-click the container, Save as Template). Name them clearly: "DS - Hero," "DS - Features Grid," "DS - CTA," etc.

Hour 4: Documentation and team handoff

A design system nobody can reference is a design system nobody will use. Spend the last hour documenting what you built.

Create a page called "Style Guide" on the site (set to Draft or password-protected). On this page, display:

• All color Variables with visual swatches (colored containers showing each Variable)
• All typography Classes applied to sample text ("The quick brown fox..." in each style)
• All button Classes rendered side by side
• All card styles with sample content
• Notes on naming conventions and when to use what

If you work with a team, share the Style Guide page URL with everyone who builds pages. The rule is simple: if a style is not in the system, it does not go on the page. No one-off font sizes. No custom hex codes typed directly into elements. Everything goes through Variables and Classes.

This discipline feels annoying for the first week. After that, it saves time on every single page because nobody has to make design decisions. The decisions are already made and documented.

Maintenance

A design system is not a one-time setup. It needs occasional updates:

• When the client rebrands: update color Variables, all elements using them update automatically.
• When you discover a missing pattern: add a new Class or template. Do not work around the system.
• When responsive behavior needs tweaking: update Classes with responsive overrides rather than adding custom CSS to individual elements.

The entire setup takes one afternoon. The time saved starts accumulating with the second page you build. By the fifth page, you have already earned back the setup time. By the tenth page, you wonder how you built sites without it.