Keystone Themes Design System for Elementor Template Kit
A collection of assets and guidelines designed to ensure a consistent and high-quality user experience across all Elementor template kits by Keystone Themes
Version:
User
v9.9.1
- Foundation
- Colors
This color palette offers a range of tones to help you craft a visually appealing user interface that aligns with your website’s design. Just import the template and save it—no manual edits needed. Any adjustments can be made through Elementor’s global styles, and the changes will apply automatically across your site
This color is used for all important interactive elements like Buttons, CTAs, links
Secondary colors come from alternative brand colors. This color is used for variation
Gray tones are the essence of the UI. Used for text or cards, etc
Alerts are four colors used to indicate certain situations
Base color used for the background color of sections, cards
Base color used for divider, border, etc
- Foundation
- Typography
The flexible typography scale is optimized for all breakpoints—desktop, tablet, and mobile. Just import the template and save it—no manual adjustments needed. Any changes can be easily made through Elementor’s global styles, and they’ll update automatically site-wide.
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
Five quick foxes juggled twelve velvet hats by noon.
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
Blockquote
Curabitur non est sed urna facilisis aliquam. Pellentesque vel commodo ex, eget tristique augue. Quisque pharetra bibendum elit eget commodo. Ut eu imperdiet massa
Big Quote
Design is not just how it looks—it’s how effortlessly it works.
Title
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
- Foundation
- Components
A curated set of widgets showcasing the use of color and typography. Simply import the template and save—no manual edits required. Any changes can be made through Elementor’s global styles, and updates will apply automatically across all elements.
Collection of buttons used in website ui design with variations
Button Size Variant
Button Type Variant
Button Icon
Counting numbers that rotate and stop at a certain value to show an achievement in numbers
The form widget shows you several components like datepicker, time picker, textarea, radio button, etc
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
John Doe
- Foundation
- Overview
An example demonstrating the use of a style guide along with globally managed components for consistent design.
This is a subtitle
A designated area to add the main heading for 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 choose the pain of discipline or the pain of regret — but either way, you’ll feel pain. Choose wisely.