Get In Touch

Style Guide

Home
Style Guide

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

Version:
Light-EDS.v1.0.0

Grid System

Device Width
≥ 1024px
< 1024px
< 767px
< 479px
Max Width
1280px
100%
100%
100%

Spacing System

Spacing - Desktop
60px
56px
60px
  • Paddings Tops and Bottom for blocks - 60px
  • Inside of Blocks (between headlines and inside a content block) - 56px
Spacing - Tablet
40px
32px
40px
  • Paddings Tops and Bottom for blocks - 40px
  • Inside of Blocks (between headlines and inside a content block) - 32px
Spacing - Mobile
30px
24px
30px
  • Paddings Tops and Bottom for blocks - 30px
  • Inside of Blocks (between headlines and inside a content block) - 24px

Color System

Primary
lightest
light
main
dark
darkest
Secondary
lightest
light
main
dark
darkest
Foreground
primary
secondary
placeholder
disabled
inverse
Background
primary
secondary
placeholder
disabled
inverse
Border
primary
secondary
placeholder
disabled

Typography

Headline
Display
The five boxing wizards jump quickly.​
Heading 1

The five boxing wizards jump quickly.​

Heading 2

The five boxing wizards jump quickly.​

Heading 3

The five boxing wizards jump quickly.​

Heading 4

The five boxing wizards jump quickly.​

Heading 5
The five boxing wizards jump quickly.​
Heading 6
The five boxing wizards jump quickly.​
Text
Subtitle
The five boxing wizards jump quickly.​
The five boxing wizards jump quickly.​
Button
The five boxing wizards jump quickly.​
The five boxing wizards jump quickly.​
Label
The five boxing wizards jump quickly.​
The five boxing wizards jump quickly.​
Testimonial 1
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products
Testimonial 2
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products
Paragraph X-Large
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products
Paragraph Large
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products
Paragraph Medium
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products
Paragraph Small
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products
Paragraph X-Small
A design system is a collection of standards, guidelines, and reusable components that help teams create consistent visual design and user experiences across digital products

Buttons

Primary Button
Button Text
Secondary Button
Button Text
Ghost Button
Button Text
Text Button
Button Text
Primary Button
Button Text
Secondary
Button Text
Ghost Button
Button Text
Text Button
Button Text

Let's Work Together

We have established ourselves as a trusted partner for leading solar energy providers, green renewable energy companies, major utilities, retailers, and other sustainable energy stakeholders.

Get Started

We are helping the
world to save energy

Get In Touch
About Us
Services
Case Studies
Careers
Clients
Blog

© Solarion. All Rights Reserved 2024. Licensing Envato Template Kit by Evocave Studio

Green Renewable Energy – Elementor Template Kit