Page Structure

Use the below structure when creating new pages:

.page wrapper
—.nav
—.section
——.container
———.component
—.footer

Page Resets

Below are some global resets we like to use. Typically this is a custom code symbol that features on every page.

<style>

/*---GLOBAL---*/
‍
html {
 text-rendering: optimizeLegibility;
 font-size: 16px;
 overflow-x: hidden;
 -moz-osx-font-smoothing: grayscale;
 font-smoothing: antialiased;
 -webkit-font-smoothing: antialiased;
}
‍
/*---WEBFLOW RESETS---*/

a {
 color:inherit;
 text-decoration:none;
}

input[type=text] {  
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

input[type=email] {  
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

input[type=textarea] {  
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.w-dropdown-toggle {
 color:inherit;
 text-decoration:none;
}

.w-nav-link {
 color:inherit;
}

.w-nav-link.w--current {
color:inherit;
}

</style>

‍

Headings

Setup

1. Navigate to the projects style guide page.
2. Scroll down to the typography section.
3. Set each heading's font-size , line-height and letter-spacing.

Application

1. Declare the type. For a heading we simply use the prefix .heading.
2. To improve legibility insert a "-" and declare the heading size. For example .heading-50‍

Examples

.heading-10 , .heading-20, .heading-30, .heading-40 , .heading-50, .heading-60

Note: lower the number the smaller the text and vice versa.

Text

Setup

1. Navigate to the projects style guide page.
2. Scroll down to the typography section.
3. Set each paragraph's font-size , line-height and letter-spacing.

Application

1. Declare the element type. For a text we simply use the prefix .text.
2. To improve legibility we insert a "-" and declare the paragraph size. For example .text-50‍

Examples

.text-10 , .text-20, .text-30, .text-40 , .text-50, .text-60

Note: The lower the number the smaller the text and vice versa.

Interface Text

We classify Interface text as short amounts of text and labels which help the user understand and use the website.

• They are often found inside of key components such as navigations, footers, checkouts and forms.
• They usually only consist of a few different sizes and weights.

Application

Interface text's font-family, font-size and font-weight (labels, headers, footers) is declared at a component level.

Example

.footer component
—.footer title
——.text block

In the above example we would change the typography styles of the "footer title" div. This means the text nested inside would inherit these styles.

Units

The units we use for our typography depend on what type of website we're building. We generally build two types of websites.

1. Fluid Websites

If you're building a fluid website use a mix of em and rem units. Use em units for larger headings and rem units for smaller paragraphs. This method ensures the paragraph text doesn't become too small between breakpoints.

2. Responsive Websites

If you're building a responsive website use pixel or rem units for all typography.

Backgrounds

Setup

1. Navigate to the projects style guide page.
2. Scroll down to the colour section.
3. Set each background fill colour by clicking on the rectangle labeled "Fill" and changing the colour value in the Webflow styles panel.

Application

1. Declare the background fill by using the prefix .F.
2. Declare the background fill value by using a number. For example .F1‍

Examples

.F0 , .F1 , .F2, .F3, .F4

Note: F-0 usually refers to the .body background fill colour.

Text Colours

Setup

1. Navigate to the projects style guide page.
2. Scroll down to the colour section.
3. Adjust each text variant's styles (.text-color .letter-spacing) using the panel on the left.

Application

1. Click directly on a text element.
2. Declare the fill colour the text element is sitting on top of. For example .F2.
3. Insert a space and declare the element type using the .T prefix.
4. Declare the text colour variant using a prefix of A-Z. For example .F1 T-A

Examples

Background Fill Colour:
‍.F1
‍
Text Colour Variants:
.F1 T-A, .F1 T-B, .F1 T-C

Text Links

Setup

1. Navigate to the projects style guide page.
2. Scroll down to the colour section.
3. Adjust each text link's styles (.text-color) using the Webflow styles panel.

Application

1. Click directly on a text link element.
2. Declare the element type by using the prefix .text-link.
3. Declare the fill colour the text link element is sitting on top of. For example .on--F2.
4. Declare the text colour variant using a prefix of A-Z. For example .A

Example

If background fill is:
‍.F2‍

Text link class could be:
.text-link .on--F2 .A

Sections

Use Case

Use global sections whenever possible. When custom vertical padding, interactions or other styles need to be applied to a section create a custom section class instead. For Example .component-name section

Application

1. Declare the section by using the prefix .section.
2. Declare the amount of vertical padding by adding a combo class.

Combo Classes

.is--xsm , .is--sm , .is--md, .is--lg, .is--xlg

Containers

Use Case

Use global container whenever possible. When custom max-width is required create a custom container class instead. For Example .component-name container

Application

1. Declare the container by using the prefix .container.
2. Declare the width by adding a combo class.

Combo Classes

.is--xsm , .is--sm , .is--md, .is--lg, .is--xlg

Buttons

Setup

1. Navigate to the projects style guide page.
2. Scroll down to the colour section.
3. Edit each button's colour to work with each different background fill.

Application

1. Declare the element type by using the prefix .button.
2. Declare the size. E.g .is--sm
3. Declare the background fill colour the button is sitting on top on. E.g .on--F1
4. Declare what colour variant you'd like to apply. E.g .is--A, .is--B, .is--C

Size Combos

.is--sm , .is--md, .is--lg, .is--xlg

Type Combos

.is--ghost

Colour Variants

.is--A .is--B .is--C .is--D

Full Example

Below is a full example of this application.

.button .is--sm .on--F1 .is--A

[Type] [Size] [Colour]

‍

Forms

Structure

Use the following structure when creating forms.

.form wrapper
—.form list
——.form item
———.form item label
————text block
———.form field
——.form item
———.form item label
————text block
———.form field
——.form item
———.form submit button

Add vertical margins to the .form item class to seperate each field set.

Images

Resolution

Always export imagery @2x the actual pixel dimensions.

Example

Area size
1440x800 pixels

Image size
2880x1600 pixels

File Type

All imagery should be uploaded to Webflow as .WebP format.

File Size

As a general rule try to keep all imagery under 500KB each. Take advantage of the native WebP 'lossy' compression and set the image quality somewhere between 70-100.

Icons

File Type

All icons should be embeded in Webflow as an .svg with the fill or stroke property set as 'current-colour'. You can find a full suite of common svg icon logos here.

Size

Set the width and height for each icon. Usually icons display best at certain pixel sizes. These are commonly 16x16, 24x24, 32x32, 64x64, 128x128 etc.