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

Neutral 00

#ffffff

bg-subtle

Neutral 200

#E7E7E7

bg-alt

Neutral 950

#09121A

bg-alt-subtle

Neutral 700

#2D3A43

bg-alt-subtle

Neutral 700

#2D3A43

Text Colors

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

tc-primary

Text color is primary.

var(--_tokens---text--primary)

tc-secondary

Text color is secondary.

var(--_tokens---text--secondary)

tc-muted

Text color is muted.

var(--_tokens---text--muted)

tc-green

Text color is green.

var(--secondary--green)

tc-purple

Text color is purple.

var(--secondary--purple)

tc-orange

Text color is orange.

var(--secondary--orange)

tc-inverted

Text color is alternative.

var(--_tokens---text--alt)

tc-inverted-secondary

Text color is alt secondary.

var(--_tokens---text--alt-secondary)

tc-alt-muted

Text color is alt muted.

var(--_tokens---text--alt-muted)

Typography

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

H1

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.

H2

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.

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.

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.

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.

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.

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.

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.

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.

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)

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.

All paragraphs

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.

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]--[width]
ts stands for TextStyle

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

Main Text Styles

ts-pl

16px | 1rem

Body L

ts-pl-700

16px | 1rem

Subtitle after H1

ts-pm

14px | 0.875rem

Body M

ts-ps

12px | 0.75rem

Body S

ts-stat-h1

64px | 4rem

10+

ts-stat-h2

54px | 3.375rem

10+

Badges/eyebrow elements

ts-eyebrow

12px | 0.75rem

Eyebrow text before Headline

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

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-style-2lines

ts-2lines

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

Button

Use wrapper for margins. Combine combo classes for desired look

btn

Button Text Button Text

Button Text

Button Text Button Text

Button Sizes

Combo class ONLY for button sizes. Do not add colors

btn-lg

Button Text

btn-md

Button Text

btn-sm

Button Text

Button Themes

Combo classes for different color themes of buttons

btn-primary

btn-secondary

btn-primary

btn-primary-black

btn-primary

btn-primary

Other Button Styles

Combo class for btn

btn

is-text

Button Text

btn

Button Text

btn

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

720px | 45rem

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.