Style Guide

This Style Guide is based on the Finsweet Client-First structure, which is an industry-standard naming convention for Webflow projects. It ensures scalability, organization, and ease of use.

Read Client-First Documentation arrow_outward

Sizes

We use a unified sizing system (Variables). These values are fixed numbers that adapt via "Modes" (Desktop, Tablet, Mobile) and use REM units for accessibility.

size-4

0.25rem

size-16

1rem

size-40

2.5rem

size-80

5rem

Note: View Variables panel for full list

Colors

Global color palette managed via Variables.

Text/primary

text-color-primary

Text/secondary

text-color-secondary

Text/tertiary

text-color-tertiary

Text/accent

text-color-accent

Background/primary

background-color-primary

Background/secondary

background-color-secondary

Background/glass

background-color-glass

Background/accent

background-color-accent

Border/primary

border-color-primary

Border/secondary

border-color-secondary

Border/tertiary

border-color-tertiary

Border/accent

border-color-accent

Typography

 

Typography Variables

Font-family/headings

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Font-family/body

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

 

Text styles

H1
heading-style-h1

Example

Example

H2
heading-style-h2

Example

Example

H3
heading-style-h3

Example

Example

H4
heading-style-h4

Example

Example

p

Example

text-size-regular

Example

text-size-large

Example

text-size-small

Example

text-style-strikethrough

Example

text-style-italic

Example

text-style-allcaps

Example

text-style-link

Example

text-style-2lines

Note: This CSS style is not supported for Rich Texts on iOS.

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.

text-style-3lines

Note: This CSS style is not supported for Rich Texts on iOS.

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.

text-weight-normal

Example

text-weight-medium

Example

text-weight-semibold

Example

text-weight-bold

Example

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.

Spacing & Structure

Core layout classes (Containers, Paddings, Spacers).

page-wrapper
main-wrapper
container-full
container-large
container-medium
container-small
max-width-full
max-width-large
max-width-medium
max-width-small
padding-global
padding-section-large
padding-section-medium
padding-section-small
padding-large
padding-medium
padding-small
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
spacer-large
spacer-medium
spacer-small

Buttons

Button variants system.

button
Button Text
button
is-disabled
Button Text

Dropdowns

Dropdown variants

nav_dropdown
Nav Dropdown
expand_more

Form elements

form_input
form_input
form_input
form_input
form_input
form_input
form_input
is-text-area
form_checkbox
form_radio
form__button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Uploading ...

fileuploaded.jpg
Upload failed. Max size for files is 10 MB.
Thank you! We have received your request and will contact you shortly using the contact information provided.

Would you like to submit another application?
Fill out form again
Oops! Something went wrong while submitting the form.

Icons

1. Img or SVG Icons

Unify icons sizes

icon-small
icon-medium
icon-large

2. Font Icons (Material Symbols)

Use class material-symbols-outlined on a Text block. You can find all icon names in the Google Fonts Library arrow_outward

arrow_forward
arrow_back
arrow_outward
expand_more
chevron_right
menu
close
more_vert
search
shopping_cart
account_circle
settings
language
check
check_circle
favorite
add
edit
delete
share
download
info
help

Company (Logos)

Logo variants

Logo/primary
Logo/primary
Logo/primary

Cookies Consent

We use cookies to improve your experience.

Decline
Accept

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-landscape
hide-mobile-portrait