Day 3: Text, Layout, Spacing and Auto Grid Improvements

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.