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.
Headings
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
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 for more information.
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
Text Button
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.
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
Each tab button uses a base class and can be styled to reflect different backgrounds or interface variants.
Slider
Sliders use arrows for navigation. These arrows are styled using a base class, and surface modifiers can be added to adapt to different backgrounds.
Accordion
The accordion component is used to toggle the visibility of content in a vertically stacked format.
Dropdown
The dropdown component is used to display a list of options that appear on interaction.
Rich Text
The Rich Text component is used for long-form content such as blog posts, CMS fields, or documentation. It ensures consistent formatting of text elements like headings, paragraphs, links, and lists.
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.
- 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!
