Style guide

Table of contents

TypographyButtonsColors

Typography ๐Ÿ‘‡

Note: Headings the the prefix of a period indicate a class name. To apply the styles, add the class in the style panel on the right of the Webflow designer portal.

Heading 1

font-size: 3.375rem
line-height: 4rem
font-weight: 700
letter-spacing: 0

Heading 2

font-size: 2.625rem
line-height: 3.125rem
font-weight: 600
letter-spacing: 0

Heading 3

font-size: 2rem
line-height: 2.5rem
font-weight: 500
letter-spacing: 0

Heading 4

font-size: 1.75rem
line-height: 2.25rem
font-weight: 400
letter-spacing: 0

Heading 5

font-size: 1.25rem
line-height: 1.625rem
font-weight: 600
letter-spacing: 0

Heading 6

font-size: 1rem
line-height: 1.375rem
font-weight: 700
letter-spacing: 0

.body-short-01
โ€
This is for short paragraphs with no more than four lines and is commonly used in components.

font-size: 0.875rem
letter-spacing: 0.16px
line-height: 1.125rem

.body-long-01
โ€
This is commonly used in both the expressive and the productive type theme layouts for long paragraphs with more than four lines. It is a good size for comfortable, long-form reading. Use this for longer body copy in components such as accordion or structured list. Always left-align this type; never center it.

font-size: 0.875rem
letter-spacing: 0.16px
line-height: 1.25rem

.body-short-02

This is for short paragraphs with no more than four lines and is commonly used in the expressive type theme for layouts.

font-size: 1rem
letter-spacing: 0.16px
line-height: 1.375rem

.body-long-02
โ€
This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components. Always left-align type; never center it.

font-size: 1rem
letter-spacing: 0.16px
line-height: 1.5rem

.helper-text-01
โ€
This is for explanatory helper text that appears below a field title within a component.
โ€

font-size: 0.75rem
line-height: 1rem
letter-spacing: 0.32px

Buttons ๐Ÿ‘‡

Class name:ย .secondary__button

Class name:ย .secondary__button

Class name:ย .secondary__button-light

Class name:ย .secondary__button

Inputs ๐Ÿ‘‡

Add classname "input"ย to input field elements to apply styles.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Colors ๐Ÿ‘‡

Each of these color codes (e.g. color-value/green-900) are also set up currently as class names. If you apply the respective classnames to an element, it will set the background color accordingly, as well as setting the text color to an accessibility-compliant color with appropriate color contrast.

It is important that if you do change the text color on a specific instance, you pay attention to Webflow's color contrast grader in order to maintain an accessible website for every user; especially given the average age of users.

green-900
green-800
green-700
green-600
green-500
green-400
green-300
green-200
green-100
green-50
dark-900
dark-800
dark-700
dark-600
dark-500
dark-400
dark-300
dark-200
dark-100
dark-50
forest-900
forest-800
forest-700
forest-600
forest-500
forest-400
forest-300
forest-200
forest-100
forest-50
red-900
red-800
red-700
red-600
red-500
red-400
red-300
red-200
red-100
red-50
tan-900
tan-800
tan-700
tan-600
tan-500
tan-400
tan-300
tan-200
tan-100
tan-50

Container classes๐Ÿ‘‡

You will only see me in a desktop view
classname:ย .hide-on-mobile
You will only see me in a mobile view
classname:ย .show-on-mobile