Style
Guide

Color Palette

Indian
Red
#ff4c60
Medium
Turquoise
#54cbca
Lemon
Chiffon
#fffacd
White
#fffff
Gray
#333333
Black
#000000

Text Colors

text-color-black
text-color-grey
text-color-black
text-color-grey
text-color-white

Background Colors

background-color-black
background-color-grey
background-color-white
background-color-white
background-color-white

Headings

All H1 Headings

Etiam faucibus iaculis pellentesque.

All H2 Headings

Etiam faucibus iaculis pellentesque.

All H3 Headings

Etiam faucibus iaculis pellentesque.

All H4 Headings

Etiam faucibus iaculis pellentesque.

All H5 Headings
Etiam faucibus iaculis pellentesque.
All H6 Headings
Etiam faucibus iaculis pellentesque.

Heading Styles

Heading Xlarge

Etiam faucibus iaculis pellentesque.

Heading Large

Etiam faucibus iaculis pellentesque.

Heading Medium

Etiam faucibus iaculis pellentesque.

Heading Small

Etiam faucibus iaculis pellentesque.

Heading Xsmall

Etiam faucibus iaculis pellentesque.

Typography

All Paragraph

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All Link
Text Link
All Block Quotes
All Quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Classes

Text Size Large

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

Text Size Medium

Sample text is being used as a placeholder for real text that is normally present on your website.

Text Size Regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Text Size Small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Size Tiny

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

TextWeight

text-weight-xbold
Text Weight Xbold
text-weight-xbold
Text Weight Bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Weight Semibold
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Weight Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ttext Weight Normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Weight Light
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Styles

Text Size Tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Style Allcaps

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Style Muted

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Style Underline

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List Style

All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Text Colors

Text Color White

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Color Gray

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Color Black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Primary Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Secondary Color

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Buttons

Primary Button
Button Text
Secondary Button
Button Text

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Direction Classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Size Classes

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group

Margins

Utility spacing system - padding classes. [margin-direction] + [margin-size].

Direction Classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Size Classes

margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in.

Povered by Webflow Designed by Udesly

Why We Love Webflow (And You Should, Too!)
November 25, 2022
Designers Who Changed the Web
November 25, 2022
Popular
Services
Premium
Blog
Pricing
Contact
Licensing
Style Guide
Changelog
Facebook
Instagram
Twitter
Linkedin
Dribble
Follow