[Project] Style Guide

Set of guidelines and strategies to help you build Webflow websites. Based on Client-First

Whenever a new style is added or an existing one is modified, document these changes promptly to maintain an accurate style guide.

Colors

This is a checkpoint to add your project's colors to the global swatches and explain their usage.
These classes are rarely used as is.

Background Colors

Update variables and add new swatches if necessary.

bg-primary

Primary Background Color

#ffffff

bg-secondary

Secondary Background Color

#f4f5f7

bg-alt

Alternative Background Color

#061602

Text Colors

Replace or/and add styles for text colors used on site. Add Background color on item if necessary

text-color-white

Text color is white.

#ffffff

text-color-primary

Text color is primary.

#252a3b

text-color-black

Text color is black.

#252a3b

text-color-green100

Text color is green 100

#D8DBD7

text-color-grey100

Text color is grey 100

#ECEFEB

text-color-grey200

Text color is grey 200

#D8DBD7

text-color-grey300

Text color is grey 300

#BBC0B9

Typography

HTML tags define default Heading styles.
Heading classes when typography style doesn't match the default HTML tag.

56px | 3.5rem | 1.5 | 600

Sample text helps you understand how real text may look.

ts-h1

56px | 3.5rem | 1.5 | 600

Sample text helps you understand how real text may look.

48px | 3rem | 1.5 | 600

Sample text helps you understand how real text may look on your website.

ts-h2

48px | 3rem | 1.5 | 600

Sample text helps you understand how real text may look on your website.

32px | 2rem | 1.5 | 600

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.

ts-h3

32px | 2rem | 1.5 | 600

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.

24px | 1.5rem | 1.5 | 600

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

ts-h4

24px | 1.5rem | 1.5 | 600

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

20px | 1.25rem | 1.5 | 600

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.

ts-h5

20px | 1.25rem | 1.5 | 600

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. 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.

12px | 0.75rem | 1.5 | 600

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. 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.

ts-h6

12px | 0.75rem | 1.5 | 600

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. 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.

Other HTML Tags

HTML tags define default text styles.

Body (All Pages)

All paragraphs

All Ordered 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.

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.

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.

All links

All Links

Additional Text Styles

The class names follow the rule: ts-[function]--[size]
ts stands for TextStyle

Add new styles if needed. Never leave style only one on page; it should have a copy here.

ts-stat

64px | 4rem | 1.5 | 600 | Primary color

10+

ts-subtitle

24px | 1.5rem

Subtitle after H1

ts-subtitle--small

20px | 1.25rem

Subtitle after H2

ts-p--big

18px | 1.125rem

Bigger text size for some of the text content on all pages

ts-p

16px | 1rem

Main text size for most of the text content on all pages

ts-p--small

14px | 0.875rem

Annotations and captions

ts-p--tiny

12px | 0.75rem

Something super unimportant but necessary

ts-eyebrow

12px | 0.75rem

eyebrow for some pages

ts-tag

12px | 0.75rem

Tag or Category in a CMS

Other Text Styles

ts-strikethrough

Strikethrough

ts-underline

Underline

ts-italic

Italic

ts-allcaps

all caps

ts-opacity

Opacity 60%

ts-link

Link

ts-1line

ts-2lines

ts-3lines

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.

Buttons

Button combo class system. Use wrapper for margins

button

Button element

Button Text

button

Link Block Element

Button Text

button

Same as previous but with an icon

Button Text

button

is-nav

Button Text

button

is-secondary

Button Text

button

is-secondary

Button Text

button

is-text

Button Text

button

is-back

Button Text

Structure Classes

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

page-wrapper

main-wrapper

container-huge

Huge container: 1280px | 80rem

container-large

Large container: 1160px | 72.5rem

container-medium

Medium container: 960px | 60rem

container-small

Small container: 760px | 47.5rem

padding-global

40px | 2.5rem

button-group

flex h | 1rem gap

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-landscape

max-width-full-mobile-portrait

max-width-[color]

is-align-center

center align for any wrapper

max-width-amber

400px | 25rem

max-width-blue

464px | 29rem

max-width-cyan

512px | 32em

max-width-dust

560px | 35rem

max-width-emerald

608px | 38rem

max-width-fuchsia

672px | 42rem

max-width-gold

700px | 44rem

max-width-indigo

768px | 48rem

max-width-jade

800px | 50rem

Spacers

The Spacer System is designed to simplify the management of spacing in our web projects. By using a combination of a base spacer class and color-based comboclasses, developers can efficiently apply consistent spacing throughout applications while maintaining flexibility for responsive design.

Key Features

Single Base Class:
The spacer class provides a standardized way to create spaces.
Color-Based Comboclasses:
Specific sizes of spacers are defined using color descriptors (e.g., spacer is-blue), enhancing readability and ease of use.
Responsive Design:
Spacer sizes can be adjusted at various breakpoints without altering class names, promoting adaptability. Set spacer size on breakpoints according to design.

spacer

16px | 1rem

spacer

is-amber

2px | 0.125rem

spacer

is-blue

4px | 0.25rem

spacer

is-cyan

8px | 0.5rem

spacer

is-dust

10px | 0.625rem

spacer

is-emerald

12px | 0.75rem

spacer

is-fuchsia

14px | 0.875rem

spacer

is-gold

18px | 1.125rem

spacer

is-indigo

20px | 1.25rem

spacer

is-jade

24px | 1.5rem

spacer

is-kiwi

32px | 2rem

spacer

is-lavender

40px | 2.5rem

spacer

is-mango

48px | 3rem

spacer

is-navy

56px | 3.5rem

spacer

is-olive

64px | 4rem

spacer

is-paprika

72px | 4.5rem

spacer

is-quartz

80px | 5rem

spacer

is-red

88px | 5.5rem

spacer

is-salmon

96px | 6rem

spacer

is-teal

100px | 6.25rem

spacer

is-ultraviolet

120px | 7.5rem

spacer

is-vanilla

140px | 8.75rem

Icons

Unify icon sizes

icon-small

16px | 1rem

icon-regular

24px | 1.5rem

icon-medium

32px | 2rem

icon-large

40px | 2.5rem

Useful utility systems

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

hide

This element is hidden

hide-tablet

hide-mobile-portrait

hide-mobile-landscape

show-tablet

This element is hidden

show-mobile-landscape

This element is hidden

show-mobile-portrait

This element is hidden

overflow-visible

overflow-hidden

z-index-1

z-index-2

no-scrollbar

Removes native scrollbar on element,
also can be added as an attribute:
[data-scrollbar=none]

Webflow Forms

Examples of a form component

form_wr

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Webflow Rich Texts

Rich texts styling

text-rich-text

H1 Lorem ipsum dolor sit amet conse ctetur

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

H2 Lorem ipsum dolor sit amet conse ctetur

Image caption

H3 Lorem ipsum dolor sit amet conse ctetur

Quote: 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

H4 Lorem ipsum dolor sit amet conse ctetur

List item one
List item two
List item three

H5 Lorem ipsum dolor sit amet conse ctetur

List item one
List item two
List item three

h6 Lorem ipsum dolor sit amet conse ctetur

Filter elements

Clean Filter checkboxes, radio buttons, and other important things with Finsweet attributes added

filter-radio_field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

filter-radio_field

is-active

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

filter-checkbox_field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

filter-checkbox_field

is-active

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Animations

Add interaction or combo class for an element.

scroll-in-1

This is some text inside of a div block.

scroll-in-2

This is some text inside of a div block.

scroll-in-3

This is some text inside of a div block.

scroll-in-4

This is some text inside of a div block.

Prevent Style Clean Up

Never lose anything. This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.

class