This article shows you how to set up a basic website design system in Divi 5 using the Divi 5 Theme Customizer. You’ll set global layout, colors, typography, buttons, and mobile styles so every new page you build starts from a clean, consistent foundation.
Setting up the Basic Website Design System
You build your basic website design system in Divi 5 by setting global styles in the Theme Customizer. You define your core layout, colors, typography, and buttons once, then reuse that system everywhere you design.
Divi 5 still uses the same Theme Customizer as Divi 4, so if you’ve seen it before, it will look familiar. This guide focuses on the minimum you need to set up a simple, solid design system.
Where are you setting global styles in Divi 5
Divi 5 has a few different "layers" of design control:
Theme Customizer - sets your basic website design system and site's information
Site title, Tagline, and Site Icon
Layout
Site backgroun
Typograph
Button styles and some global colors.
Theme Options – handles things like logo, global color palette for the builder, and performance.
Divi Builder and Theme Builder - handles per-page designs and advanced templates.
Step 1: Open the Theme Customizer
Log in to your WordPress Dashboard.
Go to Divi → Theme Customizer.
The Customizer opens with a live preview on the right and a list of panels on the left, such as General Settings, Header & Navigation, Footer, Buttons, Blog, Mobile Styles, and Color Scheme.
You’ll work mainly in General Settings, Buttons, Mobile Styles, and Color Scheme.
Step 2: Set Site's Identity
Open the Theme Customizer
Click General Settings → Site Identity
Fill out:
Site's Title
Tagline
Site's icon (also known as the favicon)
⚠︎ Tip: The Site's name, Tagline, and the site's favicon icon can also be set up in the WordPress Settings → General page.
Step 3: Set basic layout and background
In the Customizer, click General Settings → Layout Settings.
Set:
Enable Boxed Layout - Enable this option if you want your entire website to use a boxed layout.
Site Width - Controls how wide your content area is.
Website Gutter Width - Defines the space between columns.
Use Custom Sidebar Width - If you use sidebars, choose a width that each of the default sidebars is going to use.
Section / Row Height - Choose the top/bottom spacing or Sections and Rows. Try to keep modest values so pages don’t look cramped or huge.
Go back and click General Settings → Background.
Choose:
A Background Color for the site (usually a light neutral).
Or a Background Image if you want a boxed layout feel.
⚠︎ Note: The Website Gutter Width and the Section/Row Height options are applicable only if you are using the Block Layout Styles.
Step 4: Define your core colors
Consistent color is a big part of your basic website design system.
In the Customizer, go to General Settings → Layout Settings (same panel as before).
Find the Primary and Secondary colors.
Set Primary to your main accent color (buttons, links, key highlights).
Set Secondary to a supporting accent.
These two become global colors that Divi uses across many areas. When you change them here later, elements that use those colors update automatically.
Now your links, text, and accents follow the same color logic everywhere.
Step 5: Set global typography (body and headings)
Next, you decide how the text looks across the entire site.
In the Customizer, go to General Settings → Typography.
Start with body text:
Body Font – pick a clean, easy-to-read font.
Body Text Size – choose a base size that feels comfortable on desktop (often 16–18px).
Body Line Height – increase slightly so paragraphs breathe.
Body Text Color – should already match what you set earlier.
Set headings:
Header Font – you can reuse the body font or pick a contrasting font for headings.
Header Text Size – adjusts overall heading scale (H1–H6).
Header Line Height and Style – tweak letter spacing and weight so headings stand out.
Divi modules use these defaults for titles and text, so every new page you build will follow your typographic system unless you override it.
A simple rule for a beginner design system:
One font for body, one font for headings.
Clear contrast between heading size and body size.
Step 6: Style your global buttons
Buttons carry your calls to action, so bake them into the basic website design system.
In the Customizer, go back to the main panel and click Buttons.
Open Button Style and set:
Button Text Size
Button Text Color (often white)
Button Background Color (often your primary accent)
Border Radius (for sharp vs rounded corners)
Font, icon, and letter spacing
Open Button Hover Style and set a simple, clear hover effect:
Slight color change, border change, or subtle background shift.
These settings apply to Divi’s default buttons site-wide, so all your buttons look consistent by default, even before you tweak anything in the builder.
Step 7: Save and test your design system in the builder
When you’re happy with your basic website design system:
Click Publish at the top of the Customizer to save your changes.
Exit the Customizer.
Create a new page and click Use Divi Builder.
Add a few standard modules:
Text module with headings and paragraphs
Button module
A simple layout with sections and rows
You should see:
Fonts and colors match what you set in the Theme Customizer.
Buttons using your global button style.
Spacing and text sizes that feel consistent across the page.
If something looks off, go back to Divi → Theme Customizer, tweak, and publish again. Over time, this basic website design system becomes the stable foundation for everything you build in Divi 5.