Storypark Style Guide

  1. Class name ends with <...stylesheet>
  2. Use combo class to apply multiple styles to one element, eg. <h1-stylesheet><text-white-stylesheet>
  3. The class name is in the first line between <...> for each element, you can easily copy paste it for your need
  4. For more info about how Client-first system works, look here :)
  5. Always save as a copy before editing the site (ctrl + shift + s)
Structure ClassesHeadingsOther text elementstext classesColoursbox shadowsWebflow elementsButtonsPaddingsmarginsBorders & RadiusiconsDisplay - GridsDisplay - Flexutility systems

Structure Classes

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

Section

<section-stylesheet>
fullscreen width

Hero Section

<section-hero-stylesheet>
10o viewport height, fullscreen width

Content Wrapper

<content-wrap-stylesheet>
fullscreen width

Headings

HTML tags define default Heading styles.

H1

<h1-stylesheet>
Freight-sans-pro, 700-bold
placeholder text here

<h1-stylesheet><text-white-stylesheet>

<h1-stylesheet><text-black-stylesheet>

<h1-stylesheet><text-teal-stylesheet>

H2

<h2-stylesheet>
Freight-sans-pro, 600-semibold
placeholder text here

<new-h2><new-text-white>

<new-h2><new-text-black>

<new-h2><new-text-teal>

H3

<h3-stylesheet>
Freight-sans-pro, 700-bold
placeholder text here

<new-h3><new-text-white>

<new-h3><new-text-black>

<new-h3><new-text-teal>

H4

<h4-stylesheet>
Freight-sans-pro, 600-semibold
placeholder text here

<new-h4><new-text-white>

<new-h4><new-text-black>

<new-h4><new-text-teal>

H5
<h5-stylesheet>
Freight-sans-pro, 600-semibold
placeholder text here
<new-h5><new-text-white>
<new-h5><new-text-black>
<new-h5><new-text-teal>
H6
<h6-stylesheet>
Freight-sans-pro, 700-bold,
placeholder text here
<new-h6><new-text-white>
<new-h6><new-text-black>
<new-h6><new-text-teal>

Other Text Elements

HTML tags define default text styles.

All paragraphs

<p-stylesheet>
Default body text, Freight-sans-pro, 400-normal
Sample text helps you understand how real text may look.

All links
<link-stylesheet>
sample link text here
All quotes
<quote-stylesheet>
Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. <ordered-list-stylesheet>
  2. Sample text helps you understand how real text may look on your website.
  3. Sample text helps you understand how real text may look on your website.
All Unordered Lists
  1. <unordered-list-stylesheet>
  2. Sample text helps you understand how real text may look on your website.
  3. Sample text helps you understand how real text may look on your website.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

Large
<text-large-stylesheet>
placeholder text here
Medium
<text-medium-stylesheet>
placeholder text here
Regular
<text-default-stylesheet>
placeholder text here
Small
<text-small-stylesheet>
placeholder text here
Tiny
<text-tiny-stylesheet>
placeholder text here

Text Styles

Strikethrough
<text-strikethrough-stylesheet>
placeholder text here
Italic
<text-italic-stylesheet>
placeholder text here
Allcaps
<text-allcaps-stylesheet>
placeholder text here
Lowercase
<text-lowercase-stylesheet>
placeholder text here
Title case
<text-title-case-stylesheet>
placeholder text here
Underline
<text-underline-stylesheet>
placeholder text here
2 Lines
<text-2lines-stylesheet>
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. 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.
3 Lines
<text-3lines-stylesheet>
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. 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 Weights

Bold
<text-bold-stylesheet>
placeholder text here
Semibold
<text-semibold-stylesheet>
placeholder text here
Medium
<text-mediumweight-stylesheet>
placeholder text here
Regular
<text-regular-stylesheet>
placeholder text here

Text Alignments

Align Left
<text-align-left-stylesheet>
placeholder text here
Align Center
<text-align-center-stylesheet>
placeholder text here
Align Right
<text-align-right-stylesheet>
placeholder text here

Colours

Manage recurring text and background colors.

Colour Swatches

Teal

<teal-stylesheet>
#00b2d0

Blue

<blue-stylesheet>
#0084a5

Dark blue

<dark-blue-stylesheet>
#075476

Light blue

<light-blue-stylesheet>
#e8f9ff

Orange

<orange-stylesheet>
#f78321

Dark orange

<dark-orange-stylesheet>
#e56526

Grey

<grey-stylesheet>
#a9abb0

Light grey

<light-grey-stylesheet>
#f7f9fc

Dark grey

<dark-grey-stylesheet>
#384450

Black

<black-stylesheet>
#131313

White

<white-stylesheet>
#ffffff

Text Colour

Teal

<text-teal-stylesheet>
#00b2d0

Blue

<text-blue-stylesheet>
#0084a5

Dark blue

<text-dark-blue-stylesheet>
#075476

Light blue

<text-light-blue-stylesheet>
#e8f9ff

Orange

<text-orange-stylesheet>
#f78321

Dark orange

<text-dark-orange-stylesheet>
#e56526

Grey

<text-grey-stylesheet>
#a9abb0

Light grey

<text-light-grey-stylesheet>
#f7f9fc

Dark grey

<text-dark-grey-stylesheet>
#384450

Black

<text-black-stylesheet>
#131313

White

<text-white-stylesheet>
#ffffff

Box Shadows

Soft

<shadow-soft-stylesheet>

Strong

<shadow-strong-stylesheet>

Webflow elements

Native Webflow elements with Client-First classes applied.

Rich Text

<rich-text-stylesheet>

Heading 1

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.

Block quote

‍

  1. Item 1
  2. Item 2
  3. Item 3

‍

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

image caption
Form
<form-stylesheet>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Buttons

Button combo class system.

Primary Button
<button-stylesheet>
Watch a demo
Secondary button
<second-button-stylesheet>
Watch a demo
Orange Button
<orange-button-stylesheet>
Watch a demo
Outline Button
<outline-button-stylesheet>
Watch a demo
Button with icons
<icon-button-stylesheet>
Learn more

Padding

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

Direction Classes

Padding Bottom
<padding-bottom-stylesheet>
Padding Top
<padding-top-stylesheet>
Padding left
<padding-left-stylesheet>
Padding Right
<padding-right-stylesheet>
Padding Vertical
<padding-vertical-stylesheet>
Padding Horizontal
<padding-horizontal-stylesheet>

Size Classes

No Padding
<padding-none-stylesheet>
Padding Tiny
<padding-tiny-stylesheet>
Padding Small
<padding-small-stylesheet>
Padding Regular
<padding-regular-stylesheet>
Padding Medium
<padding-medium-stylesheet>
Padding Large
<padding-large-stylesheet>

Margins

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

Direction Classes

Margin Bottom
<margin-bottom-stylesheet>
Margin Top
<margin-top-stylesheet>
Margin left
<margin-left-stylesheet>
Margin Right
<margin-right-stylesheet>
Margin Vertical
<margin-vertical-stylesheet>
Margin Horizontal
<margin-horizontal-stylesheet>

Size Classes

No Margin
<margin-none-stylesheet>
Margin Tiny
<margin-tiny-stylesheet>
Margin Small
<margin-small-stylesheet>
Margin Regular
<margin-regular-stylesheet>
Margin Medium
<margin-medium-stylesheet>
Margin Large
<margin-large-stylesheet>

Borders & Radius

Top Border
<border-top-stylesheet>
Bottom Border
<border-bottom-stylesheet>
Left Border
<border-left-stylesheet>
Right Border
<border-right-stylesheet>
White Border
<white-border-stylesheet>
Black Border
<black-border-stylesheet>
Blue Border
<blue-border-stylesheet>
Orange Border
<orange-border-stylesheet>
Round Border
<round-border-stylesheet>
Dash border
<dash-border-stylesheet>

Icons

Small icons

<small-icon-stylesheet>

Medium icons

<medium-icon-stylesheet>

Big icons

<big-icon-stylesheet>

Display - Grids

2 Colums

<grid-2-stylesheet>

3 Colums

<grid-3-stylesheet>

4 Colums

<grid-4-stylesheet>

Display - Flex

Flex Horizontal

<flex-h-stylesheet>

Flex Verical

<flex-v-stylesheet>

Useful utility systems

Utility classes we like to use in most of our projects to build faster.

Hide
<hide-stylesheet>
Hide on Tablet
<hide-tablet-stylesheet>
Hide on Mobile Landscape
<hide-mobile-l-stylesheet>
Hide on Mobile Portrait
<hide-mobile-p-stylesheet>
Overflow Hidden
<overflow-hidden-stylesheet>
Overflow Auto
<overflow-auto-stylesheet>
Overflow Scroll
<overflow-scroll-stylesheet>
50% Opacity
<opacity-50-stylesheet>
50% Opacity
<opacity-50-stylesheet>
0% Opacity
<opacity-0-stylesheet>
Z-index 1
<z-index-1-stylesheet>
Z-index 999
<z-index-999-stylesheet>
Position: Relative
<relative-stylesheet>
Position: Absolute
<absolute-stylesheet>
Height:100%
<full-height-stylesheet>
Width:100%
<full-width-stylesheet>
Image: Contain
<image-contain-stylesheet>
Image: Cover
<image-cover-stylesheet>