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
Background color
Heading
Heading
Heading
Heading
Heading
Heading
Typography
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
Headings embody the voice of a brand
Components
Buttons
Text Button
Tags
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.
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.
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!
Divider
