Framework

Global Presets UI Style Guide

01. Color palette

Colours used across the site design.

Charcoal
#222222
Deep Blue
#2E4A93
Cornflower
#7395CB
Light Steel Blue
#C0D0E9
Forest Green
#19675A
Lime Green
#DADB74
Red
#EF572B
Pink
#F4D0E3
Pale Yellow
#FDEDB4
Light Nectarine
#FFE4C4
Cream
#FDFBF9

02. Text styles

A list of all the font styles found on the site.

H1 Header

P22 Mackinac Pro | Font-Size: 56 | Line-height: 1.2

H2 Header

P22 Mackinac Pro | Font-Size: 36 | Line-height: 1.2

H3 Header

P22 Mackinac Pro | Font-Size: 28 | Line-height: 1.2

H4 Header

P22 Mackinac Pro | Font-Size: 22 | Line-height: 1.3

Small Body

Nunito Regular | Font-size: 12 | Line Height: 1.5

Body Copy

Nunito Semi Bold | Font-size: 16 | Line Height: 1.5

Subtitle

Nunito Semi Bold | Font-size: 14 | Line Height: 1.5

03. Modules

The last part of this style guide handles some of the most-used modules inside Divi. Here, we’re also providing you with a primary, secondary and tertiary version of each module which you can style and add as a global preset. Feel free to create more alternative designs for each module.

Primary

Secondary

Tertiary

Email optin

Bottom CTA

Have a topic you’d like us to write about?

Let Us Know

Contact form

13 + 9 =

Toggle

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Testimonial

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Name of Person

Mom of #

Blog

Title Of Category

Title Goes Here

Title Goes Here

Pricing etc. goes here

Title Goes Here

Title Goes Here

Pricing etc. goes here

Title Goes Here

Title Goes Here

Pricing etc. goes here

Loading...