Framework
Global Presets UI Style Guide
01. Color palette
In this part of the style guide, you can modify each color inside the Text Module’s background settings. Use that same color code inside the Text Module below it to have a written version of the color code too. Use these color codes inside your Divi Theme Builder default color palette afterward.
#000000
#444444
#888888
#EEEEEE
#10537F
#34a5b1
#374E7A
#4E6FAD
#6F93CC
#34A5B1
#10537F
#444444
#000000
02. Text styles
These are our text styles that will be applied throughout the website. There are primary and secondary options for use in specific situations. This will help ensure consistency on all pages of the site.
Primary
Secondary
Heading 1
Heading 1
48px – Bold
Heading 1
38px – Bold
Heading 2
Heading 2
38px – Semi-bold
Heading 2
32px – Semi-bold
Heading 3
Heading 3
32px – Regular
Heading 3
24px – Regular
Heading 4
Heading 4
24px
Heading 4
20px
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
18px
List
- Lorum Ipsum
- Lorum Ipsum
- 22px
- Lorum Ipsum
- Lorum Ipsum
- 18px
All in one
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
Heading 1
Heading 2
Heading 3
Heading 4
Lorum ipsum dolor sit amet.
- Lorum Ipsum
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
Button
Blurb
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.
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.
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.
Email optin
Contact form
Image
Call to action
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.
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.
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.
Divider
Person
Name Goes Here
Position
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 Goes Here
Position
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 Goes Here
Position
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.
Social Media Follow
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.
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.
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.
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.
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.
Video
Accordion
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.
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.
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.
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.
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.
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.
Blog
Wearable Enterprise Reports Now Available
As a member of the Augmented Reality for Enterprise Alliance (AREA) and chair of the AREA's Security Committee, we are pleased to announce that two reports that Brainwaive was commissioned to develop for the AREA, are now publicly available. Wearable Enterprise AR...
Why Open Standards for Open AR
Although around for a couple decades, Augmented Reality (AR) is a technology that is receiving a great deal of attention through growing implementations, fueled by developments in supporting technologies, improved network speeds and increasing user interest and...
Open Standards. Open AR. Open Innovation.
Global standards help the world achieve essential goals, including enhanced public health and safety, increased education, technology innovation and market expansion. In short, global standards—those developed in an open, bottom-up and market driven paradigm—are the underpinnings of innovation and their value and necessity are coming into even sharper focus.
Brainwaive to Lead Security Session at AREA and DMDII Workshop
Brainwaive will be leading the Security Session at the AREA and DMDII (Digital Manufacturing and Design Innovation Institute) Workshop on the future of Augmented Reality (AR) in the industrial setting, to be held 7-8 February in Chicago. The event provides an...
Brainwaive to Chair the AREA Security Committee
The Augmented Reality for Enterprise Alliance (AREA) has selected Brainwaive to chair its new Security Committee. AREA is the only global member-based organization dedicated to widespread adoption of interoperable AR-enabled enterprise systems. “It is an honor to...
Brainwaive Joins AREA
Brainwaive is pleased to announce that it has joined the Augmented Reality for Enterprise Alliance (AREA) to work with the AREA members to help achieve greater operational efficiency through the smooth introduction and widespread adoption of interoperable AR-assisted...
Wearable Enterprise Reports Now Available
As a member of the Augmented Reality for Enterprise Alliance (AREA) and chair of the AREA's Security Committee, we are pleased to announce that two reports that Brainwaive was commissioned to develop for the AREA, are now publicly available. Wearable Enterprise AR...
Why Open Standards for Open AR
Although around for a couple decades, Augmented Reality (AR) is a technology that is receiving a great deal of attention through growing implementations, fueled by developments in supporting technologies, improved network speeds and increasing user interest and...
Open Standards. Open AR. Open Innovation.
Global standards help the world achieve essential goals, including enhanced public health and safety, increased education, technology innovation and market expansion. In short, global standards—those developed in an open, bottom-up and market driven paradigm—are the underpinnings of innovation and their value and necessity are coming into even sharper focus.
Brainwaive to Lead Security Session at AREA and DMDII Workshop
Brainwaive will be leading the Security Session at the AREA and DMDII (Digital Manufacturing and Design Innovation Institute) Workshop on the future of Augmented Reality (AR) in the industrial setting, to be held 7-8 February in Chicago. The event provides an...
Brainwaive to Chair the AREA Security Committee
The Augmented Reality for Enterprise Alliance (AREA) has selected Brainwaive to chair its new Security Committee. AREA is the only global member-based organization dedicated to widespread adoption of interoperable AR-enabled enterprise systems. “It is an honor to...
Brainwaive Joins AREA
Brainwaive is pleased to announce that it has joined the Augmented Reality for Enterprise Alliance (AREA) to work with the AREA members to help achieve greater operational efficiency through the smooth introduction and widespread adoption of interoperable AR-assisted...
Wearable Enterprise Reports Now Available
As a member of the Augmented Reality for Enterprise Alliance (AREA) and chair of the AREA's Security Committee, we are pleased to announce that two reports that Brainwaive was commissioned to develop for the AREA, are now publicly available. Wearable Enterprise AR...
Why Open Standards for Open AR
Although around for a couple decades, Augmented Reality (AR) is a technology that is receiving a great deal of attention through growing implementations, fueled by developments in supporting technologies, improved network speeds and increasing user interest and...
Open Standards. Open AR. Open Innovation.
Global standards help the world achieve essential goals, including enhanced public health and safety, increased education, technology innovation and market expansion. In short, global standards—those developed in an open, bottom-up and market driven paradigm—are the underpinnings of innovation and their value and necessity are coming into even sharper focus.
Brainwaive to Lead Security Session at AREA and DMDII Workshop
Brainwaive will be leading the Security Session at the AREA and DMDII (Digital Manufacturing and Design Innovation Institute) Workshop on the future of Augmented Reality (AR) in the industrial setting, to be held 7-8 February in Chicago. The event provides an...
Brainwaive to Chair the AREA Security Committee
The Augmented Reality for Enterprise Alliance (AREA) has selected Brainwaive to chair its new Security Committee. AREA is the only global member-based organization dedicated to widespread adoption of interoperable AR-enabled enterprise systems. “It is an honor to...
Brainwaive Joins AREA
Brainwaive is pleased to announce that it has joined the Augmented Reality for Enterprise Alliance (AREA) to work with the AREA members to help achieve greater operational efficiency through the smooth introduction and widespread adoption of interoperable AR-assisted...