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
Button
Blurb
Big Data Analytics
Big Data Analytics
Contact form
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.
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
Enhancing Sales Performance with the Help of Pricing Analytics for a Wine and Spirits Manufacturer
What You'll Find in this Case Study: Industry Overview Maximizing Business Outcomes With the Help of Sales Performance Optimization and Custom Dashboards Sales Performance Optimization Challenges Key Takeaways of Sales Performance Optimization Industry Overview In a...
Supply Chain Network Optimization For a Food Manufacturing Company Enhances Operational Efficiency and Reduces Inventory Costs by 65%
What You'll Find in this Case Study: Industry Overview The Business Challenge Solutions Offered and Value Delivered Our Supply Chain Network Optimization Capabilities Industry Overview A leading food manufacturing company in the U.S was facing several operational and...
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.
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.