Global Presets

UI Style Guide

This global presets style guide is a great way to start a new web design project and keep brand consistency in our visual language

01. Logos

The first part of this style guide shares some of the visuals that are included inside the layout pack. By importing the layout to your Divi Library, these visuals have automatically been added to your media library, ready for you to use.

download PNG / SVG

download PNG / SVG

download PNG / SVG

download
PNG / SVG

download
PNG / SVG

download
PNG / SVG

download
PNG / SVG

download
PNG / SVG

download
PNG / SVG

02. Colors

In the second part of the style guide, you can find the color palette that’s been used for the visual language. Use these colors on all your business channels.

Main Theme Colors

Main Blue

#245fff

Main Yellow

#ffd355

Dark & Light Colors

Main Heading

#1d2b36

Main Body

#495057

Muted Heading

#adb5bd

03. Text Styles

In this part of the style guide, you’ll find the different text styles that were used throughout the website and others businnes channels. There’s a block code in case you want to know the font family name, size and others customization data.

All in one 

h1.Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Lorem ipsum dolor sit amet.

Display headings

Display 1

Display 2

Display 3

Display 4

Body Lead

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.

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.

Text Style Codes

04. Buttons

Here, you’ll find the buttons that have been used in website.

05. Blurbs

Up next, we have some blurbs modules that have been frequently used in the layout.

Card Icon 1

Card

Receba visitantes em seu site. Fazemos sua empresa aparecer no Google para as pessoas certas.

Learn More

Card

Encante e converta visitas em oportunidades. Unimos ciência e design para gerar conversões.

Learn More

Card

Transforme oportunidade em novos clientes. Ajudamos a monitorar e otimizar o seu investimento.

Learn More

Card Icon 2

Card

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Learn More

Card

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Learn More

Card

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Learn More