Today I finished rebuilding 10 more Divi 5 modules using the new design system, and honestly, the difference is huge.

What looks like a small visual change on the surface is actually solving one of the biggest problems in Divi 5: consistency.

✅ Responsive typography
✅ Responsive icons
✅ Dark mode support
✅ Adaptive forms
✅ Better spacing
✅ Consistent styling across modules
✅ Faster website builds

The biggest lesson I've learned over the last two weeks is this:

You can build a website in Divi 5 without a design system... but you'll spend countless hours adjusting fonts, spacing, sizing, colours, and module settings over and over again.

A design system removes that repetitive work and keeps everything looking professional from desktop all the way down to mobile.

I've rebuilt everything from the ground up because several Divi updates changed how parts of the old system worked. It has been a lot more work than I expected, but the results are worth it.

Tomorrow I'll be sending a pre-launch discount code exclusively to Divi University members.

If you're not a member yet, now is the time to join (it's completely free).

Question for you:

👉 Which Divi module do you spend the most time styling manually?

Let me know in the comments. I'm curious to see where everyone is losing the most time.

Today was a big milestone.

I've now completed 5 modules for the Divi 5 Design System:

✅ Blurb

✅ Bar Counter

✅ Call To Action

✅ Countdown Timer

✅ Button Updates

What's exciting isn't just how they look. It's how much time they save. One of the things I've been demonstrating today is the difference between designing a module manually versus applying a design system preset.

Without a design system, you're constantly adjusting:

• Typography

• Spacing

• Colours

• Responsive sizing

• Alignment Over and over again.

With the design system, it's often just a single click. The goal isn't to make websites look pretty. The goal is to make website building faster, more consistent, and more professional.

I've also been working through a few Divi 5 quirks and preset issues, so there's been plenty of testing happening behind the scenes. For those of you following this journey, thank you for all the support and feedback so far.

Now it's time to keep building...

I've still got a lot of modules left to redesign before launch 😅

See you tomorrow for the next update.

In today’s update, I want to walk you through the latest improvements made to the design system. A lot of this came directly from feedback, especially around how headings should work inside Divi 5.

The goal is simple: make the system more logical, easier to use, and much faster when building professional websites.

1. Text and Headings Have Been Reworked

One of the biggest changes is how text and headings are now handled.

Previously, the heading styles worked well visually, but after feedback, it made more sense to connect the H1 to H6 structure directly with the correct heading elements. This makes the system cleaner from a semantic point of view and also easier to understand when building real websites.

Now, when you select a text module, you can quickly assign different text sizes directly from the text properties.

These include:

• Extra small text
• Small text
• Normal body text
• Large body text

This makes it much easier to keep your typography consistent across the whole website without manually adjusting font sizes every time.

2. More Useful Text Presets

The system now also includes more specialised text presets for common website elements.

These include:

• Eyebrow text
• Labels
• Badges
• Inverse badges
• Success labels
• Warning labels
• Error labels

This is useful when designing things like feature sections, pricing tables, alerts, cards, dashboard areas, and callout sections.

Instead of manually styling these small text elements every time, you can now apply a preset and get a consistent result instantly.

3. Heading and Display Presets

The heading system has also been cleaned up.

Inside the heading text settings, you now have responsive presets for:

• Heading 1
• Heading 2
• Heading 3
• Heading 4
• Heading 5
• Heading 6

There are also display styles for larger hero-style typography:

• Display Large
• Display Medium
• Display Small

These are designed to look good immediately across desktop, tablet, and mobile. The idea is that you should not have to keep fixing typography at every breakpoint. The system should do most of the heavy lifting for you.

4. Responsive Section Padding

Another important part of the update is section padding.

The design system now includes standardised section padding presets, ranging from extra small to large.

This removes one of the most annoying parts of responsive design: manually setting different padding values for desktop, tablet, and mobile.

Instead of guessing pixel values or changing em sizes for every screen size, the spacing automatically scales down as the screen gets smaller.

That means your sections stay consistent, balanced, and responsive without you constantly adjusting every breakpoint manually.

5. Structured Content Widths

A common mistake in web design is allowing text to stretch too wide across the page. When paragraphs become too wide, they become harder to read and the design starts to feel unprofessional.

To fix this, the system now includes specific width utilities.

Text Width

This is designed for normal body text. It keeps paragraphs at a comfortable reading width so the content feels easier to read.

Wide Text Width

This gives you a slightly wider text area. It works well for secondary headlines, intro text, or paragraphs that need a little more space.

Content Width

This is designed for normal layout content, especially things like multi-column blurbs, cards, and general website sections.

Text Width Large

This is useful for wider content areas, dashboards, or layouts where you need to display more information while still keeping the content controlled.

Full Width

This forces an element to go completely edge-to-edge. This is useful for full-bleed images, background sections, large visuals, and more dramatic layout effects.

These width utilities help make sure your designs feel intentional instead of random.

6. Semantic Background Colours

To make section building faster, the system now includes global background presets.

These allow you to quickly create visual separation between sections without manually choosing colours every time.

The current background options include:

• Muted
• Inverse
• Primary
• Secondary
• Subtle

This is especially helpful when you have multiple sections stacked together and need to create contrast between them.

Instead of guessing which background colour to use, you can apply one of the presets and keep everything aligned with the overall design system.

7. Gap Scale and Auto Grid System

The final major improvement is around spacing and grid layouts.

The design system now includes a more structured gap scale. This helps control the spacing between items inside groups, rows, and grid layouts.

You can clear default gaps and apply consistent responsive spacing such as:

• Extra small
• Small
• Medium

This gives you much more control over layouts without relying on random margin values.

8. Auto Grid Layouts

The Auto Grid system is one of the most powerful parts of this update.

At the row level, you can turn on Auto Grid and instantly create responsive multi-column layouts.

This is especially useful for:

• Feature grids
• Service sections
• Card layouts
• Blog grids
• Pricing tables
• Icon box layouts
• Product feature sections

Once Auto Grid is enabled, you can then control the gap between the grid items using the global spacing presets.

This keeps everything aligned, responsive, and consistent across different screen sizes.

Why This Matters

The main goal of this design system is to remove the guesswork from building websites in Divi 5.

Instead of manually styling every heading, paragraph, section, background, width, and grid, you now have a structured system that helps you build faster and more consistently.

This means:

• Better typography
• Cleaner spacing
• More readable layouts
• Faster responsive design
• More consistent sections
• Less manual tweaking
• A more professional workflow

This update brings the system closer to how professional UI designers think when building websites.

It is not just about making things look good. It is about creating a repeatable workflow that helps you build better websites faster.

So, does the Divi 5 Mastery II course replace the original Divi Mastery course I purchased? The Divi Mastery course is gone from my

We're now just 5 days away from launching the Divi 5 Design System, and today's update is a big one.

In this video, I walk you through the latest additions to the system, including:

✅ Responsive heading presets

✅ Primary and secondary button styles

✅ Outline button variations

✅ A brand-new spacing scale

✅ Design system color integration

✅ Responsive typography and buttons

✅ Gradient heading support in Divi 5

Instead of manually styling every element on your website, the design system allows you to apply consistent, professional styling with just a few clicks.

You'll see how quickly a simple section can be built using presets for headings, spacing, text, and buttons. The goal is simple: build websites faster, maintain consistency, and eliminate repetitive design work.

We're getting closer to launch every day, and tomorrow I'll be working on the auto-grid system to make layouts fully responsive with even less effort.

📅 5 days until launch. If you're building websites with Divi 5, subscribe and follow the daily updates as I continue building the design system from the ground up.

We're officially 7 days away from launching the Divi 5 Design System, and today marks Day 1 of the journey.

If you've ever found yourself manually styling every heading, button, notice, and text element on a website, you already know how quickly those clicks add up. A proper design system solves that problem by helping you build websites faster, maintain consistency, and eliminate repetitive design work.

In today's video, I reveal the foundation of the entire system:

✅ 148 custom variables built from scratch
✅ Professional typography scales
✅ Semantic color system
✅ Fluid spacing and sizing variables
✅ Badges, labels, notices, and text styles
✅ Responsive clamp-based values throughout

You'll also see how these variables make it incredibly easy to build reusable components without constantly adjusting settings, colours, spacing, and typography.

This design system has been built specifically for Divi 5 and will become the foundation for future tutorials, live streams, and website builds.

There is a precise moment when technology ceases to be a simple catalog of features and becomes an instrument of identity. As a freelance writer, I observe the digital horizon not with the anxiety of someone who must chase the latest algorithm, but with a gaze focused on the weight, the measure, and the profound quality of the work we offer to the world. From this perspective, the anticipation for the release of KrafterPro 3.0 is not a mere technical curiosity; it is the confirmation of a shared vision.

In a digital and development landscape dominated by an obsessive pursuit of artificial perfection, Mak's latest message strikes a chord for one specific reason: his vulnerability. Seeing a professional choose to show himself without filters, facing the physical discomfort of allergies and the drowsiness of medications just to speak to his community, is not a minor detail. It is an act of profound intellectual honesty.

This transparency does not merely humanize a brand; it establishes an immediate, perceptual resonance with those who live the daily reality of self-employment. Justifying timelines and sharing the struggle means bridging distances, transforming a purchasing audience into a community of colleagues united by the very same ethical and professional code.

From a purely strategic perspective, the decision to rebuild the entire design system for Divi 5 from scratch reveals a rare foresight. For those who develop, this is the most arduous, laborious path, entirely devoid of shortcuts; yet, for us freelancers, it represents a genuine act of respect for our time.

Managing fragmented workflows or chasing continuous, unstable updates has become one of the greatest pain points in our profession. Offering a solid, definitive structure, conceived from the ground up for stability, means protecting the daily creative workflow of your clients.

This is beautifully combined with great commercial inclusiveness: unbundling the product, allowing the design system to be purchased separately, lowers the barrier to entry for individual professionals. It demonstrates a genuine, concrete sensitivity toward the real market, and not just toward large agencies.

If we do not wish to create digital spaces that copy one another, the human touch and creativity remain the cutting edge that will make the real difference, without ever sacrificing speed and quality of implementation.

Mak's position on Cognitive Intelligence is exemplary in its pragmatism, far removed from the hype of the moment. Today, we are witnessing a narrative that portrays computing tools as total substitutes for human ingenuity. Reality, however, demands a sharp distinction: the algorithm is a formidable assistant, an amplifier of speed, but it does not and will never possess basic architectural sensitivity.

Without a robust structure, with production-ready and exportable modules, the concrete risk is standardization: a web made of faded, soulless replicas. KrafterPro 3.0 fits squarely into this groove, offering a robust engine that optimizes time without ever taking the helm away from human creativity.

In conclusion, what makes this journey extraordinary is not only the technical excellence of the upcoming system, but the courage of its creator. I want to publicly commend Mak for his extraordinary candor and for the communicative risks he deliberately chooses to take.

Let us not look the other way; especially in an era of glossy, cold, and prepackaged corporate press releases, his choice to expose himself directly, with his current limitations and his raw business truths, is a breath of fresh air. Mak demonstrates that true leadership is built on mutual respect and transparency, charting a clear course where technological innovation goes hand in hand with the dignity and value of the human side of business.

We eagerly look forward to welcoming KrafterPro 3.0!

Here is a quick update about what's coming up on Divi University.

I have deployed my rebuilt website, and I checked it from my phone using the Firefox mobile app to make sure everything was behaving responsively. The menu was not displaying well at all. The font was too large, the spacing between items was too large and you couldn't see the full item text or the entire menu list.

I set this issue aside and I revisited it a few moments ago. What I discovered is that the website and the menu look great when using the Chrome, Edge or Vivaldi browsers on the phone, but they do not render correctly when using the Firefox or Opera browsers on the phone.

I offer this information as a point of interest and perhaps a point of discussion. Obviously, we can't know what a website visitor might prefer to use as a browser on their phone. Does anyone have a thought - good or bad - about adding a disclaimer that states "This site is best viewed on phones through Edge, Chrome or Vivaldi browsers"? Alternatively, does anyone have a thought as to what, if anything, might be done to get the same performance from Firefox and Opera?

Please suggest the best QUIZ plugin to use with Divi 5.

Thanks,