Style Guide | HERO Design System & Brand Guidelines

Style Guide

Typography

Typography encompasses the various styles of text used throughout the design system, including headings, body text, captions, and labels. It specifies fonts, sizes, weights, and line heights, ensuring textual consistency and readability.

Heading classes

Headings are used to establish a clear visual hierarchy and organize content. They draw attention and guide users through the page structure. Typically, they vary in size, weight, and prominence, from the largest (Display) to the smallest (H6).

Heading Style Display

Display

Heading Style H1

Heading 1

Heading Style H2

Heading 2

Heading Style H3

Heading 3

Heading Style H4

Heading 4

Heading Style H5

Heading 5

Heading Style H6

Heading 6

Text classes

Paragraphs provide the main body of text and are designed for readability and clarity. They should have appropriate line spacing and comfortable line length to ensure a pleasant reading experience.

Text styles

Text Style Large
Sample text is being used as a placeholder for real text that is normally present.

Text Style Main
Sample text is being used as a placeholder for real text that is normally present.

Text Style Small
Sample text is being used as a placeholder for real text that is normally present.

Text Style Eyebrow
Eyebrow Sample text

Text alignment

Text Align Left
Sample text is being used as a placeholder for real text that is normally present.

Text Align Center
Sample text is being used as a placeholder for real text that is normally present.

Text Align Right
Sample text is being used as a placeholder for real text that is normally present.

Rich Text styles

The Rich Text Element in Webflow is a versatile content block designed to handle large amounts of text or mixed content like paragraphs, headings, images, quotes, videos, and more. It is an ideal tool for creating blog posts, articles, help documentation, or any other content-heavy sections of a website.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Image caption example

Block quote

Ordered list

Item 1
1. Item 1.1
Item 1.2
Item 2
Item 3

Unordered list

Item A
- Item A.1
- Item A.2
Item B
- Item B.1
- Item B.2
Item C
Item D

Text link

Bold text

Emphasis

Superscript

Subscript

Colors

Color palettes

Brand Color Palette

Brand 300
#BBB4FE

Brand 400
#998AFB

Brand 500
#775BF7

Brand 600
#693DEF

Dark Color Palette

Dark 800
#232024

Dark 900
#161418

Dark 950
#0A080C

Light Color Palette

Light
#FFFFFF

Utility Colors

Dark Fade 1
Dark 70%
Dark Fade 2
Dark 10%
Dark Fade 3
Dark 6%
Light Fade 1
Light 70%
Light Fade 2
Light 10%
Light Fade 3
Light 6%
Transparent
0%

Text colors

Text Color Primary
Sample text is being used as a placeholder for real text that is normally present.

Text Color Secondary
Sample text is being used as a placeholder for real text that is normally present.

Background colors

BG Color Primary
BG Color Secondary
BG Gradient Top
BG Gradient Bottom

Components

Buttons

Buttons are interactive elements that prompt users to take action. The design system defines their styles, including size, shape, color, hover states, and disabled states, ensuring buttons are easily identifiable and consistent in appearance and behavior.

button Primary
Start building

button Primary
Small
Button Text

button Secondary
Book a demo

button Secondary
Small
Button Text

Form

Name
Email Address
Message

Checkbox

Radio 1
Radio 2
Radio 3

Select FieldSelect one...
First choice
Second choice
Third choice

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Accordion

FAQ header text

Icons

Structure classes

Sections

Padding Top Tiny
Padding Bottom Tiny
Padding Top Small
Padding Bottom Small
Padding Bottom Main
Padding Top Main
Padding Top Large
Padding Bottom Large
Padding Top None
Padding Bottom None
Padding Top Hero

Containers

Section Container Main
Section Container Large
Section Container Full Width

Grid

Grid 1 Cols
Grid 2 Cols
Grid 3 Cols
Grid 4 Cols
Grid 12 Cols

Spacing & Sizes

Spaces

The template's spacing is based on Tailwind numeric spacing scale. One spacing unit is equal to 0.25rem which translates to 4px by default in common browsers. To learn more about the Tailwind spacing system, please visit the Tailwind's site here.

0.5

Sizes

0.125

0.25

0.5

0.75

1.25

1.5

1.75

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

Miscellaneous

Display properties

Hide
Tablet Hide
Landscape Hide
Mobile Hide