Style Guide
Foundations

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

Core Colors
Accent Tertiary
Accent Tertiary Hover
Core Color Tints
Accent Primary
A90
A80
A70
A60
A50
A40
A30
A20
A10
Accent Secondary
A90
A80
A70
A60
A50
A40
A30
A20
A10
Neutral Inverse
A90
A80
A70
A60
A50
A40
A30
A20
A10

Type

Foundation colors is a set of variables that should be applied to components.
Update colors by selecting an element (style panel) or in the variables panel

Heading
Title
Preview
Heading 1
All H1 Headings
H1 Heading

Headings embody the voice of a brand

Headings embody the voice of a brand

Heading 2
All H2 Headings
H2 Heading

Headings embody the voice of a brand

Headings embody the voice of a brand

Heading 3
All H3 Headings
H3 Heading

Headings embody the voice of a brand

Headings embody the voice of a brand

Heading 4
All H4 Headings
H4 Heading

Headings embody the voice of a brand

Headings embody the voice of a brand

Heading 5
All H5 Headings
H5 Heading
Headings embody the voice of a brand
Headings embody the voice of a brand
Heading 6
All H6 Headings
H6 Heading
Headings embody the voice of a brand
Headings embody the voice of a brand
Body
Title
Preview
Paragraph XX Large
Paragraph XXL

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.

Paragraph X Large
Paragraph XL

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.

Paragraph Large
Paragraph L

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.

Paragraph Default
Body
All Paragraphs
Paragraph

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.

Paragraph Small
Paragraph S

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.

Text
Title
Preview
Topheading
Topheading
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.
Quote
All Block Quotes
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.
List Unordered
All Unordered Lists
  • Make typography responsive for all screen sizes.
  • Use proper line spacing for easy readability.
  • Use white space to improve text legibility.
List Ordered
All Ordered Lists
  1. Use white space to improve text legibility.
  2. Make typography responsive for all screen sizes.
  3. Use proper line spacing for easy readability.
Text Alignment
Title
Preview
Left
[Utility] Text Align Left
Your site should do more than look good
Center
[Utility] Text Align Center
Your site should do more than look good
Right
[Utility] Text Align Right
Your site should do more than look good

Buttons

Every type of buttons have 2 properties: color and size.
Size: default, small, large
Place: default, invert, on accent.

Button
Primary
Button
Secondary
ButtonSecondary Button
Button / On accent
Primary
Button Primary On Accent Button
Secondary
ButtonSecondaryButton Secondary Button On Accent
Button / On accent tertiary
Primary
Button Primary Button On Accent Tertiary
Secondary
ButtonSecondary ButtonSecondary Button On Accent Tertiary
Text Button
Primary
Text Button
Secondary
Text ButtonSecondary Text Button
Text
Text ButtonText Button On Inverse
On Accent Primary
Text ButtonText Button On Accent Primary
Link Text
On Inverse
Text LinkText Link On Inverse
On Accent Primary
Text LinkText Link On Accent Primary
On Accent Secondary
Text LinkText Link On Accent Secondary
Button group
Align
Preview
Align Left
Button Group
Align Center
Button GroupAlign Center
Align Right
Button GroupAlign Right
Vertical Stretch
Button GroupVertical Stretch

Image Ratio

Horizontal 16 : 9
[Utility] Aspect 16x9
Horizontal 3 : 2
[Utility] Aspect 3x2
Horizontal 4 : 3
[Utility] Aspect 4x3
Square 1 : 1
[Utility] Aspect 1x1
Vertical 2 : 2.5
[Utility] Aspect 2x2.5
Vertical 2 : 3
[Utility] Aspect 2x3
Image Ratio / Responsive
Tablet
Horizontal 3 : 2
[Utility] Tablet Aspect 3x2
Square 1 : 1
[Utility] Tablet Aspect 1x1
Mobile Landscape
Reset to Auto
[Utility] Mobile Landscape Aspect Auto

Avatars

Small Avatar
AvatarSmall Avatar
Avatar
Avatar
Avatar Large
AvatarLarge Avatar

Accordion

Title
Preview
Accordion
Accordion
Accordion Label
Accordion opened
Accordion Label

Rich Text

Title
Preview
Rich Text
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.

  • A rich text element can be used with static or dynamic content.
  • The rich text element allows you to create and format elements
    • Headings
    • Paragraphs
    • Media
      • Video
      • Images
  1. A rich text element can be used with static or dynamic content.
  2. The rich text element allows you to create and format elements
    • Headings
    • Paragraphs
    • Media
      • Video
      • Images
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!
Eyebrow
Heading of the section
Section Default
Section
Eyebrow
Heading of the section
Secondary Section
SectionSecondary Section
Eyebrow
Heading of the section
Accent Primary Section
SectionAccent Primary Section
Eyebrow
Heading of the section
Accent Secondary Section
SectionAccent Secondary Section