Design Guideline

Deverust Design System for Elementor Template Kit

A set of assets and guidelines for building a consistent and good user experience across elementor template kits by deverust

Version:

light-dds

v4.0.0

The color palette with various color tones allows you to create a beautiful User Interface to match your website. You can simply import this template and save it without needing to modify anything. Changes are only enough to be done through the global style elementor. Everything will change automatically

Brand Color
Primary

This color is used for all important interactive elements like Buttons, CTAs, links

10 %
30 %
50 %
70 %
90 %
Secondary

Secondary colors come from alternative brand colors. This color is used for variation

10 %
30 %
50 %
70 %
90 %
Neutral
Greyscale

Gray tones are the essence of the UI. Used for text or cards, etc

10 %
30 %
50 %
70 %
90 %
System
Alert

Alerts are four colors used to indicate certain situations

Success
Danger / Error
Warning
Info
Base
Background

Base color used for the background color of sections, cards

Main Background
Variant Background
Border

Base color used for divider, border, etc

Border

Flexible typography scale works perfectly for all breakpoints – desktop, tablet and mobile. You can simply import this template and save it without needing to change anything. Changes are simply made via the global style element. Everything will change automatically

Heading 1

Pack my box with five dozen liquor jugs.

Heading 2

Bright vixens jump; dozy fowl quack.

Heading 3

John quickly extemporized five tow bags.

Heading 4

Viewing quizzical abstracts mixed up hefty jocks.

Heading 5

My girl wove six dozen plaid jackets before she quit.

Heading 6

Monsieur Jack, vous dactylographiez bien mieux que votre ami Wolf.

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque tellus vitae lorem laoreet, nec dapibus ex vehicula. Etiam malesuada justo non molestie sollicitudin

Caption

Vivamus finibus congue arcu et ullamcorper. Sed eget condimentum neque.

Sub Title

Alve bazige

Quote

Curabitur non est sed urna facilisis aliquam. Pellentesque vel commodo ex, eget tristique augue. Quisque pharetra bibendum elit eget commodo. Ut eu imperdiet massa

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 

Huge

Quel vituperabile xenofobo zelante assaggia il whisky ed esclama: alleluja!

Tiny

Nulla nec ante nec enim maximus cursus sit amet vel nunc. Cras eu massa nisl. Donec ac elementum tortor

A collection of widgets used as sample of the use of color and typography. You can simply import this template and save it without needing to change anything. Changes are simply made via the global style element. Everything will change automatically

Button

Collection of buttons used in website ui design with variations

Counter

Counting numbers that rotate and stop at a certain value to show an achievement in numbers

Registered Clients
0 K
Branch Offices
0 +
Total Revenue
0 M
Awards
0 +
Form

The form widget shows you several components like datepicker, time picker, textarea, radio button, etc

Quote

Highlighted special sentences that form a series as an expression or statement

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet consectetur adipiscing elit dolor

An example of using a style guide and some globally managed components

This is a subtitle

The place where you can write the main title of a section

Examples of placement and use of a short description of the title of a particular section which will provide more detailed information to the reader

You can either experience the pain of discipline or the pain of regret. The choice is yours
Adelynn Lindsey
Street Artist