This is Part 3 of the Divi 5 Mastery Course. In Part 2, you learned where everything lives in the interface. Now you will build the foundation of your design system using Design Variables: named, reusable values that modules, presets, and templates reference instead of hardcoded numbers and colors.

By the end, you will have a complete variable set for typography, colors, spacing, borders, layout, buttons, form fields, and reusable content for a sample Coworking Space website.

A Design Variable is a named value you reference throughout your site. Instead of typing #2176ff into every module that uses your brand blue, you create a color variable called Primary Color with that value, then reference Primary Color wherever the blue appears. The hex code lives in one place, and every reference points back to it.

Divi 5 supports six variable types: colors, fonts, numbers, images, text, and links. So your system can cover more than styling - it can also store logos, business details, CTA text, and external URLs.

Build variables first because everything else depends on them. In Part 4 you will build Option Group Presets and Element Presets that reference these variables; if the variables do not exist yet, the presets cannot bind to them. Think of variables as the atoms, presets as the molecules, and pages as the organisms. The order matters.

At the top of the manager, use the dropdown to filter by type: Colors, Fonts, Gradients, Images, Links, Numbers, and Text.

To create a variable, click the + button in the matching type section, give it a descriptive name, set its value, and save.

Use names that describe each variable's role. For broad brand values, names like Primary Color, Secondary Color, and Body Text Color work well because they apply in many contexts.

For values with a specific job, use functional names such as Border – Fields Dark, Background Overlay – Dark, or Rounded Corners – Buttons. This keeps the system easy to scan when you start building presets in Part 4.

Colors define brand identity, establish hierarchy, and create contrast between sections. This palette starts from a few base colors, then extends them with Divi 5's Relative Colors system to create transparent variants, overlay tones, and contextual shades.

Primary, Secondary, Heading Text, Body Text, and Link colors are already generated for you - update them to match your design. Then add the utility colors. Black and White are rarely used directly on modules; they act as base values for the relative colors below.

With the base colors in place, build derived text colors using variable referencing and relative color filters. These create dark-on-light and light-on-dark counterparts, so a section can switch color schemes just by choosing a different preset in Part 4.

These round out the palette. Some are role-based (Border – Dark, Drop Shadow); others are flexible utilities (Black – Transparent, White – Transparent).

Create two font variables: Heading and Body. Divi makes it easy to select Google Fonts and also supports uploaded custom fonts. This build uses Inter for both.

Using a single typeface for both is not required, but it makes a first design system easier to manage - here the difference between headings and body text comes from size, weight, and line height rather than separate families. A single font family can also reduce font-loading complexity, though two well-chosen families will not hurt performance on their own.

Number variables hold values in pixels, rems, ems, or CSS functions. Build them in logical groups, starting with typography. For more on units and math functions, see Advanced Units, CSS Functions, and Variables For Divi 5.

Each heading level gets a fluid size using a CSS clamp() function, which sets a minimum size, a preferred scaling rate, and a maximum size. Headings scale smoothly between mobile and desktop without separate values per breakpoint. To add one, create a new Number Variable, copy the full clamp() value, and paste it in.

Body is the standard paragraph size. Body Small covers secondary text like footers and captions. Body XS is a fixed size for tags and fine print. Fields Text matches Body Small today but stays separate so form field text can be adjusted independently later.

Headings use tight leading because large text already provides structure. Body text uses more generous leading for comfortable reading. Small text sits in between.

Spacing variables create a consistent rhythm between elements. Rather than eyeballing padding and margins, reference a spacing variable that enforces the same distance everywhere. Spacing – Fluid scales with the viewport, and Grid Gap – Fluid is similar but capped at 60px for CSS Grid layouts.

Structural and field borders share the same value but stay separate so they can evolve independently. Button borders are 0px because this design uses filled backgrounds, not outlines.

The three 8px radii match now but are separated because images, containers, and fields are different concerns - later you might want rounder images but sharper cards. Rounded Corners – Buttons uses 500px for a pill shape.

A 2:1 horizontal-to-vertical padding ratio creates a wide, click-friendly button. With Rounded Corners – Buttons and Border Width – Buttons, these define every button's physical dimensions.

Layout variables constrain content to readable line lengths. Row Max Width is the default for standard rows; the narrower options suit blog posts, forms, and compact centered blocks.

Image variables store visual assets reused across the site. Every header, footer, and template that displays the logo can reference one of these; replace a logo later, and the change applies everywhere.

Text variables store words and phrases that repeat across pages and templates. Business details are a strong use case because they appear in headers, footers, contact sections, and templates.

CTA anchor text is also worth planning ahead, so wording stays consistent.

Link variables store URLs referenced across multiple modules. For links inside your WordPress install, dynamic content may be the better choice; for external destinations like social profiles or scheduling tools, Link Variables are convenient. When an external URL changes, update the variable once, and every module that references it follows.

The finished system contains 21 color variables (8 base, 13 relative), 2 font variables, 38 number variables, 2 image variables, 9 text variables, and 2 link variables - 74 active Design Variables before a single page module is added.

The payoff is consistency and changeability. Apply Spacing – Small to a card's padding and a list's gap, and the distances match because the variable enforces them. If a client decides the brand blue needs to shift, change Primary Color once and the update flows through every preset that references it.

Read the complete step-by-step guide on the Elegant Themes blog: Part 3: Creating A Divi 5 Global Design System With Design Variables.