Global Presets UI Style Guide

01. Color palette

Quantzig’s color palette is a simply array of 2 colors with a range of greys to support text and neutral alternatives.

Please note the following rules about colors:

  • Do not introduce additional colors to the palette
  • Colors designated HOVER can olny be used for HOVER interactions
  • #444444 is the darkest color and should only be used for body text and headings where applicable
  • Blue Default is the standard button colour. Orange default is only for critical CTA buttons and should only be used once per page.
  • Accent colors can be further reduced to lighter tints with the use of transparency.
  • Gradients are generally used for backgrounds where an image is used and needs an extra layer to obscure one side so that content can be placed with clear, readable text.

 

#6787b7

Blue Default

#3B72C6

Blue Hover

#cfdff8

Blue Accent

#fb7a57

Orange Default

#fc4a1a

Orange Hover

#fbad98

Orange Accent

#FFFFFF

#F9F9F9

#f2f2f2

#e0e0e0

#666666

#444444

#F9F9F9

#e0e0e0

#cfdff8

#6787b7

02. Text styles

In the second part of this style guide wireframe, you can style your different text types. You’re also provided with a primary, secondary and tertiary option, each of which you can afterwards turn into individual presets.

All textstyles must be selected from the presets menu to maintain consistency throughout the site.

Primary

Secondary

Tertiary

Heading 1

Heading 1

Heading 1

Heading 1

Heading 2

Heading 2

Heading 2

Heading 2

Heading 3

Heading 3

Heading 3

Heading 3

Heading 4

Heading 4

Heading 4

Heading 4

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.

List

  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • Lorum Ipsum
  • 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 additional versions of each module which you can style and add as a global preset.

Primary

Secondary

Tertiary

Blurb

Big Data Analytics

Button

Big Data Analytics

Contact form

Check Box

Radio Buttons

Image

Black and White

Sepia

Background and Gradient

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.

Divider

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.

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 Goes Here

Job Title, Company Name

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.

Blog

CUSTOM ACCORDIAN

Heading

Sub-Heading

Paragraph Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus non nulla non dignissim. Praesent at eleifend enim, non aliquam eros. Pellentesque eleifend dui neque, eu semper est condimentum et. Maecenas laoreet gravida risus ac sollicitudin. Proin vitae ultrices tellus. Ut mollis elit eu maximus eleifend. Nunc a ligula nulla. Ut lobortis risus ante, sit amet iaculis quam mattis ac.

Pellentesque interdum, risus et ultricies varius, mi diam euismod leo, vel porttitor diam ex non eros. Nulla feugiat vel purus sed viverra. Morbi vehicula nulla ac quam hendrerit congue. Nam pellentesque facilisis turpis. Duis molestie neque et urna gravida, vitae fringilla ex egestas. Suspendisse potenti. Aliquam cursus laoreet consequat. Fusce ultrices, quam et consequat pellentesque, nisi sem luctus dui, sed accumsan orci massa sed quam. Nullam pulvinar arcu id sapien tempor viverra. Nam sem urna, rhoncus sed dui non, accumsan placerat ante.

Heading – 2

Sub-Heading

Paragraph Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus non nulla non dignissim. Praesent at eleifend enim, non aliquam eros. Pellentesque eleifend dui neque, eu semper est condimentum et. Maecenas laoreet gravida risus ac sollicitudin. Proin vitae ultrices tellus. Ut mollis elit eu maximus eleifend. Nunc a ligula nulla. Ut lobortis risus ante, sit amet iaculis quam mattis ac.

Pellentesque interdum, risus et ultricies varius, mi diam euismod leo, vel porttitor diam ex non eros. Nulla feugiat vel purus sed viverra. Morbi vehicula nulla ac quam hendrerit congue. Nam pellentesque facilisis turpis. Duis molestie neque et urna gravida, vitae fringilla ex egestas. Suspendisse potenti. Aliquam cursus laoreet consequat. Fusce ultrices, quam et consequat pellentesque, nisi sem luctus dui, sed accumsan orci massa sed quam. Nullam pulvinar arcu id sapien tempor viverra. Nam sem urna, rhoncus sed dui non, accumsan placerat ante.

CUSTOM TABS

Discover Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Design Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Develop Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Deliver Lorem Ipsum

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.

Example 1: Show More Toggles Using Toggle Module

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.

Show More

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.

Example 2: Show More Toggles for Any Module or Row

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.

6 + 8 =

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.

2 + 5 =

[showmodule id=”239854″]
[showmodule id=”239827″]

Industries

Our advanced analytics expertise spans across industries, sectors, and functions, which enables us to deliver robust, agile solutions to all our clients. These are our core competencies, formed through years of experience.

Insights

Our free resources shed light on our extensive expertise and equip you with information to accelerate decision-making, growth, and innovation.