Design Guide
SS – STARTER v2.0 – 2022
Colors
Palette
Primary
Grey
White
Black
Background Colors
Heading – Styles
heading-style-h1
Heading
heading-style-h2
Heading
heading-style-h3
Heading
heading-style-h4
Heading
heading-style-h5
Heading
heading-style-h6
Heading
heading-style-accent
Heading
Text – Classes
text-size-xlarge
Lorem ipsum dolor sit amet.
text-size-large
Lorem ipsum dolor sit amet.
text-size-medium
Lorem ipsum dolor sit amet.
text-size-regular
Lorem ipsum dolor sit amet.
text-size-small
Lorem ipsum dolor sit amet.
text-size-xsmall
Lorem ipsum dolor sit amet.
Text Styles
text-style-strikethrough
Lorem ipsum dolor sit amet.
text-style-italic
Lorem ipsum dolor sit amet.
text-style-muted
Lorem ipsum dolor sit amet.
text-style-caps
Lorem ipsum dolor sit amet.
text-style-link
Text LinkText Weights
text-weight-bold
Lorem ipsum dolor sit amet.
text-weight-semibold
Lorem ipsum dolor sit amet.
text-weight-medium
Lorem ipsum dolor sit amet.
text-weight-regular
Lorem ipsum dolor sit amet.
text-weight-light
Lorem ipsum dolor sit amet.
Text Alignment
text-align-left
Lorem ipsum dolor sit amet.
text-align-center
Lorem ipsum dolor sit amet.
text-align-right
Lorem ipsum dolor sit amet.
Text Color
text-color-white
Lorem ipsum dolor sit amet.
text-color-grey
Lorem ipsum dolor sit amet.
text-color-black
Lorem ipsum dolor sit amet.
text-color-accent
Lorem ipsum dolor sit amet.
Structures
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Max Widths
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
Directional Padding
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-xlarge
padding-huge
padding-xhuge
padding-xxhuge
Margins
Directional Padding
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-xlarge
margin-huge
margin-xhuge
margin-xxhuge
Icons
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Utility Systems
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-lanscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
Webflow Elements
form
text-rich-text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Sample text with a link 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. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.
- 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.
- 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.
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 that is normally present.
