Foundations
This style guide is a collection of elements and components with brand colors and typography applied. To change any colors or values use Variables (V) panel.
Color
Foundation colors is a set of variables that should be applied to elements classes. Update colors by selecting an element (style panel) or in the variables panel
Background color
Section classes and background utility classes are using variables to adjust background and font color of nested text elements.
Heading
Heading
Heading
Heading
Heading
Heading
Typography
Headings tags and classes are connected through the variables which helps to keep them consistent.
Voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
A well-crafted typeface is more than just a collection of letters— it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters — it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.
- Use white space to improve text legibility.
- Make typography responsive for all screen sizes.
- Use proper line spacing for easy readability.
- Use white space to improve text legibility.
- Make typography responsive for all screen sizes.
- Use proper line spacing for easy readability.
Spacing
Spacing styles such as margins, paddings, and gaps are using predefined set of REM-based variables and applied directly to component classes.
Set of variables used for grid and flex layouts.
Read docs
To keep spacing consistent, most of the text elements and components have spacing applied as margin or padding.
Headings embody the voice of a brand
Components
Buttons
Every type of buttons have 2 properties: color and size.
Text Button
Tags
Every type of tags have 2 properties: color and size.
Images
Images are wrapped into a div with a class ratio_(value). It helps to control an aspect ratio of the image, takes care of overflow behavior and has a radius applied.
Avatar size can be adjusted with combo classes.
Icons
Forms
Cards
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
A different heading, so it doesn't look repetitive.
Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tabs
Slider
Accordion
Dropdown
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- The rich text element allows you to create and format elements
- List First Level
- List Second Level
- List First Level
- A rich text element can be used with static or dynamic content.
- The rich text element allows you to create and format elements
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Divider
Dividers have two types: horizontal and vertical
