Divi 5 Design System
This design system is not just about looks - it’s about efficiency, clarity, and growth. It helps teams build faster, maintain consistency, and deliver a premium user experience across every page.
Typography
HTML All Heading
Heading 01
Heading 01
Heading 01 - Outfit | 64px or 4rem font-size / Bold
Heading 02
Heading 02
Heading 02 - Outfit | 40px or 2.5rem font-size / Semi Bold
Heading 03
Heading 03
Heading 03 - Outfit | 38px or 2.375rem font-size / Semi Bold
Heading 04
Heading 04
Heading 04 - Outfit | 26px or 1.625rem font-size / Semi Bold
Heading 05
Heading 05
Heading 05 - Outfit | 24px or 1.5rem font-size / Semi Bold
Heading 06
Heading 06
Heading 06 - Outfit | 22px or 1.375rem font-size / Semi Bold
H2 Heading
Available H2 Size Variants
We use multiple H2 sizes to support different layouts
while maintaining correct SEO and accessibility.
The heading tag controls meaning,
and the size preset controls appearance.
H2 / Large(26px)
Heading 02
H2 / Large(24px)
Heading 02
H2 / Large(24px)
Heading 02
H2 / Large(22px)
Heading 02
H2 / Default (20px)
Heading 02
H2 / Compact (18px)
Heading 02
H2 / Small (16px)
Heading 02
H2 / Micro (14px – optional)
Heading 02
Typography
HTML All Paragraph
Paragraph-Large
Paragraph - Outfit | 20px or 1.25rem font-size / 1.6em line-height / Semibold
Paragraph - Outfit | 20px or 1.25rem font-size / 1.6em line-height / Medium
Paragraph - Outfit | 20px or 1.25rem font-size / 1.6em line-height / Regular
Paragraph-Medium
Paragraph - Outfit | 18px or 1.125rem font-size / 1.6em line-height / Semibold
Paragraph - Outfit | 18px or 1.125rem font-size / 1.6em line-height / Medium
Paragraph - Outfit | 18px or 1.125rem font-size / 1.6em line-height / Regular
Paragraph-Small
Paragraph - Outfit | 16px or 1rem font-size / 1.5em line-height / Semibold
Paragraph - Outfit | 16px or 1rem font-size / 1.5em line-height / Medium
Paragraph - Outfit | 16px or 1rem font-size / 1.5em line-height / Regular
Paragraph-Extra small
Paragraph - Outfit | 14px or 0.875rem font-size / 1.5em line-height / Semibold
Paragraph - Outfit | 14px or 0.875rem font-size / 1.5em line-height / Medium
Paragraph - Outfit | 14px or 0.875rem font-size / 1.5em line-height / Regular
Colors
Color Pattle
“This section padding system is built on an 8-point grid, ensuring consistent spacing, better readability, and perfect alignment across all screen sizes.”
Primary color
Primary color
Primary is the loudest voice - we use it carefully
Primary color is reserved for the most important actions and brand moments. We limit its usage so it always feels intentional and strong.
Primary Color – Usage Rules
-
Used for brand identity and main actions
-
Limited to one primary CTA per section
-
Used for active states and key highlights
-
Never used for large repetitive backgrounds
Primary-900
Primary-800
Primary-700
Primary-600
Base Color
Primary-500
Primary-400
Primary-300
Primary-200
Primary-100
Primary-50
Primary-25
Primary-0
Neutral colors
Neutral colors
Neutral colors are the canvas; brand colors are the paint.
Neutral colors make content readable and layouts calm. They allow brand colors to stand out without overwhelming the user
Neutral Color – Usage Rules
-
Used for all major backgrounds and surfaces
-
Used for all long-form text
-
Used for layout separators and borders
-
Never used for emphasis or CTAs
-
Forms the majority of the UI
Neutral-900
Neutral-800
Neutral-700
Neutral-600
Base Color
Neutral-500
Neutral-400
Neutral-300
Neutral-200
Neutral-100
Neutral-50
Neutral-25
Neutral-0
Secondary color
Secondary color
Secondary adds balance; Accent adds focus
Secondary color gives structure and variation to the layout without overpowering the brand. It helps users scan content more easily.
Secondary Color – Usage Rules
-
Used for layout grouping and section separation
-
Used for secondary actions
-
Used in large surfaces where Primary would feel heavy
-
Never used for urgent actions or emphasis
Sec-900
Sec-800
Sec-700
Sec-600
Base Color
Sec-500
Sec-400
Sec-300
Sec-200
Sec-100
Sec-50
Sec-25
Sec-0
Accent Color
Accent Color
Accent color is used only to guide user attention.
We use it sparingly for prices, highlights, and interactions so important actions stand out without overwhelming the design.
Accent Color – Usage Rules
- Used for layout grouping and section separation
- Used for secondary actions
- Used in large surfaces where Primary would feel heavy
- Never used for urgent actions or emphasis
Acc-900
Acc-800
Acc-700
Acc-600
Base Color
Acc-500
Acc-400
Acc-300
Acc-200
Acc-100
Acc-50
Acc-25
Acc-0
Semantic Color
Semantic Color
We reuse brand-approved colors for system states to maintain visual consistency, reduce palette overload, and improve usability. Meaning is defined by context, not by adding unnecessary colors.
Semantic Colorsr – Usage Rules
- Brand colors can appear anywhere
- Semantic colors can appear only in system feedback
Success
Warning
Error / Danger
Info
Disabled / Muted State
Surface
Space
8PT Grid System
We use an 8pt grid system to ensure consistent spacing, better readability, and a scalable design. This approach is used by top design systems and ensures your website stays clean, responsive, and easy to maintain in the future
Space 0.25
4px or 0.25rem
Space 0.5
8px or 0.5rem
Space 1
16px or 1rem
Space 1.5
24px or 1.5rem
Space 2
32px or 2rem
Space 2.5
40px or 2.5rem
Space 3
48px or 3rem
Space 3.5
56px or 3rem
Space 4
64px or 4rem
Space 4.5
72px or 4.5rem
Space 5
80px or 5rem
Space 5.5
88px or 5.5rem
Space 6
96px or 6rem
Space 6.5
104px or 6.5rem
Space 7
112px or 7rem
Space 7.5
120px or 7.5rem
Space 8
128px or 8rem
Sections
Section Size Variants
“This section padding system is built on an 8-point grid, ensuring consistent spacing, better readability, and perfect alignment across all screen sizes.”
Section 01
Section/Primary
Section 02
Section/Default
Section 03
Section Optional / Utility
Section 04
Section/Subtle
Row
Row Size Variants
Why Row uses Left & Right padding, NOT Top & Bottom
Section controls vertical rhythm
Row controls content width
Row padding protects content from screen edges
No duplication of spacing responsibility
Row 01
Row Size Normal
Row size Normal / 1024px or 64rem
Row 02
Row Size Default
Row size Defaultl / 1,280px or 80rem
Row 03
Row Size Wide
Row size Wide / 1,440px or 90rem
Text Column
Text Column Sizes
Using 50ch for paragraph measure is best-practice typography, and it’s exactly what modern design systems (Material, GOV.UK, Apple HIG, Framer, Stripe, Medium) follow.
50ch - Compact / UI text
Use when clarity and scanning are more important than long reading.
Using 60ch for paragraph measure is best-practice typography, and it’s exactly what modern design systems (Material, GOV.UK, Apple HIG, Framer, Stripe, Medium) follow.
60ch - Default paragraph (MOST IMPORTANT)
Use when clarity and scanning are more important than long reading.
Using 70ch for paragraph measure is best-practice typography, and it’s exactly what modern design systems (Material, GOV.UK, Apple HIG, Framer, Stripe, Medium) follow.
70ch - Long-form / storytelling
Use when clarity and scanning are more important than long reading.
Space
Margin & Padding
Top Margin
Top Margin: no
0px or 0rem
Top Margin: xxs
4px or 0.25rem
Top Margin: xs
8px or 0.5rem
Top Margin: md
16px or 1rem
Top Margin: lg
24px or 1.5rem
Bottom Margins
Bottom Margin: no
0px or 0rem
Bottom Margin: xxs
4px or 0.25rem
Bottom Margin: xs
8px or 0.5rem
Bottom Margin: md
16px or 1rem
Bottom Margin: lg
24px or 1.5rem
Left Margins
Left Margin: no
0px or 0rem
Left Margin: xxs
4px or 0.25rem
Left Margin: xs
8px or 0.5rem
Left Margin: md
16px or 1rem
Left Margin: lg
24px or 1.5rem
Right Margins
Right Margin: no
0px or 0rem
Right Margin: xxs
4px or 0.25rem
Right Margin: xs
8px or 0.5rem
Right Margin: md
16px or 1rem
Right Margin: lg
24px or 1.5rem
All Padding
All Padding: no
0px or 0rem
All Padding: xxs
4px or 0.25rem
All Padding: xs
8px or 0.5rem
All Padding: md
16px or 1rem
All Padding: lg
24px or 1.5rem
Top Padding
Top Padding: no
0px or 0rem
Top Padding: xxs
4px or 0.25rem
Top Padding: xs
8px or 0.5rem
Top Padding: md
16px or 1rem
Top Padding: lg
24px or 1.5rem
Bottom Padding
Bottom Padding: no
0px or 0rem
Bottom Padding: xxs
4px or 0.25rem
Bottom Padding: xs
8px or 0.5rem
Bottom Padding: md
16px or 1rem
Bottom Padding: lg
24px or 1.5rem
Left Padding
Left Padding: no
0px or 0rem
Left Padding: xxs
4px or 0.25rem
Left Padding: xs
8px or 0.5rem
Left Padding: md
16px or 1rem
Left Padding: lg
24px or 1.5rem
Right Padding
Right Padding: no
0px or 0rem
Right Padding: xxs
4px or 0.25rem
Right Padding: xs
8px or 0.5rem
Right Padding: md
16px or 1rem
Right Padding: lg
24px or 1.5rem
Border Radius
All Radius
Radius: xs
4px or 0.25rem
Radius: sm
6px or 0.375rem
Radius: md
8px or 0.5rem
Radius: lg
12px or 0.75rem
Radius: xl
16px or 1rem
Radius: xxl
32px or 2rem
Radius: xxxl
40px or 2.5rem
Radius: xxxl
40px or 2.5rem
Buttons
Buttons
Btn-primary-sm
Btn-primary-md
Btn-primary-lg
Btn-primary-xl
Btn-secondary-sm
Btn-secondary-md
Btn-secondary-lg
Btn-secondary-xl
Btn-outline-sm
Btn-outline-md
Btn-outline-lg
Btn-outline-xl
Borders
All Border
Border 1px
Border 1px