Zabal Sections v2.0

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

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
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. 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
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.

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

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

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

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

Image caption

H3 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

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

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

  • List item one
  • List item two
  • List item three
H5 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

  1. List item one
  2. List item two
  3. List item three
h6 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

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
class