Design Guidelines

Deal Studio design guidelines for
The Wright Company template

Set of assets and guidelines for building a consistent and good user experience across elementor template kits

version:

twc

v1.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
Grayscale

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

Pack my box with five dozen liquor jugs

Heading 3

Pack my box with five dozen liquor jugs

Heading 4

Pack my box with five dozen liquor jugs

Heading 5

Pack my box with five dozen liquor jugs

Heading 6

Pack my box with five dozen liquor jugs

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

Subtitle

Lorem ipsum dolor sit amet

Menu

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

Submenu

Sed eget condimentum neque

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. Curabitur non est sed urna facilisis aliquam. Pellentesque vel commodo ex, eget tristique augue. Quisque pharetra bibendum elit eget commodo. Ut eu imperdiet massa.

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