Styleguide

Styleguide is a set of guidelines and strategies created to help you build Webflow websites.

Headings

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

All H1 Headings

H1

heading-style-h1

H1

All H2 Headings

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

heading-style-h2

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

All H3 Headings

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

heading-style-h3

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

All H4 Headings

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

heading-style-h4

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

All H5 Headings

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

heading-style-h5

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

All H6 Headings

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

heading-style-h6

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

Other HTML Tags

HTML tags define default text styles.

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links

Text Link

All Block Quotes

Block Quote

All Unordered Lists

List Item
List Item
List Item

All Ordered Lists

List Item
List Item
List Item

Text Sizes

Text sizes when typography style doesn't match the default HTML tag.

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

text-size-eyebrow

Eyebrow

Text Weights

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Text Styles

text-style-italic

text-style-strikethrough

text-style-allcaps

text-style-nowrap

text-style-link

text-style-inlinelink

text-style-link

Text Alignment

text-align-left

text-align-center

text-align-right

Rich Text

text-align-left

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Background Colors

Manage recurring background colors.

background-color-black

background-color-white

background-color-green

background-color-darkgrey

background-color-lightgrey

Text Colors

Manage recurring text colors.

text-color-white

text-color-black

text-color-darkgrey

text-color-lightgrey

text-color-darkgrey

text-color-green

Buttons

Button combo class system.

Button Sizes

button

Button

button

is-small

Button

Button Variants

button

is-secondary

Button

button

is-link

Button

Form Elements

All different form elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons

Unify icons sizes.

icon-16

icon-20

icon-24

icon-32

icon-40

icon-48

icon-56

Structure

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

page-wrapper

main-wrapper

padding-global

container-large

container-medium

container-small

sHADOWS

Utility shadows mostly used on different cards

hide

Utility Classes

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

hide

hide-tablet

hide-landscape

hide-portrait

show-tablet

show-landscape

show-portrait

z-index-1

z-index-2

z-index-3

opacity-80

opacity-60

opacity-40

opacity-20

img-cover

Words ClassES

Utility classes to animate each word on scroll to view.

is-word

is-1

is-word

is-2

is-word

is-3

is-word

is-4

is-word

is-5

is-word

is-6

is-word

is-7

is-word

is-8

is-word

is-9

is-word

is-10

is-word

is-11

is-word

is-12

Margins

Unified spacer system for the project.

margin-bottom-4

margin-bottom-8

margin-bottom-12

margin-bottom-16

margin-bottom-20

margin-bottom-24

margin-bottom-28

margin-bottom-32

margin-bottom-40

margin-bottom-48

margin-bottom-56

margin-bottom-64

margin-bottom-72

margin-bottom-80

margin-bottom-96

margin-bottom-104

margin-bottom-120

margin-bottom-144

margin-top-4

margin-top-8

margin-top-12

margin-top-16

margin-top-20

margin-top-24

margin-top-28

margin-top-32

margin-top-40

margin-top-48

margin-top-56

margin-top-64

margin-top-72

margin-top-80

margin-top-96

margin-top-104

margin-top-120

margin-top-144

Colors

Main Blue

Blue/Main

#001B72

Main Red

Red/Main

#E01212

Main Green

Green/Main

#00AB3E

IBSA Blue

IBSA Blue/Main

#233069

Text Block

Grey Scale/Text Block

#000F41

Grey Main

Grey Scale/Main

#393939

Inactive Gray

Grey Scale/Inactive

#767676

Pure White

Grey Scale/Pure White

#FFFFFF

Typography

Headings — Big Shoulders Display

H1 — Heading One

Bold · 70px · Line height 100% · Letter spacing -5px

H2 — Heading Two

SemiBold · 50px · Line height 100%

H3 — Heading Three

Bold · 40px · Line height 100%

H5 — Heading Five

Bold · 30px · Line height 100%

Body & UI — Satoshi Variable

S1 Bold — The quick brown fox

Bold · 24px · Line height 100%

S1 Regular — The quick brown fox

Medium · 24px · Line height 100%

B1 Bold — The quick brown fox

Bold · 18px · Letter spacing 0.03px

B1 Regular — The quick brown fox

Medium · 18px · Letter spacing 0.03px

B2 Bold — The quick brown fox

Bold · 16px · Letter spacing 0.03px

B2 Regular — The quick brown fox

Medium · 16px · Letter spacing 0.03px

B3 Regular — The quick brown fox

Medium · 14px

CTA — READ MORE

Bold · 18px · Uppercase · Letter spacing 0.03px

Buttons

CTA Button

White bg · 3px red border · 30px radius · Satoshi Bold 18px · Uppercase

Publications

Ghost Button (on blue)

Transparent · No border · 5px radius · Satoshi Bold 18px · White text

Ghost Button (nav)

Transparent · No border · 5px padding · Blue text

Cards

Press

Article headline goes here

March 5, 2026

Default

White bg · 20px radius · Shadow 0 0 18px rgba(14,67,121,0.4) · Transparent border

Featured

Article headline goes here

March 5, 2026

Hover / Featured

Green border 2px #00AB3E · Shadow 0 0 30px rgba(15,242,98,0.35)

Shadows

Card Default

0 0 18px 0 rgba(14,67,121,0.4)

Card Hover / Featured

0 0 30px 0 rgba(15,242,98,0.35)

Header Shadow

0 0 50px 0 rgba(15,41,57,0.1)

Layout Tokens

Containers

container-large

.container-large

width: 90% · max-width: 72.5rem · margin: auto

container-medium

.container-medium

width: 90% · max-width: 50rem · margin: auto

container-small

.container-small

width: 90% · max-width: 40rem · margin: auto

Global Padding

padding-global

.padding-global

padding-left: 5% · padding-right: 5%

Section Spacing

Section padding (top/bottom)

5rem (80px)

Section gap between elements

2.5–3.75rem (40–60px)

Card grid gap

1.875rem (30px)

Colors

Main Blue

Blue/Main

#001B72

Main Red

Red/Main

#E01212

Main Green

Green/Main

#00AB3E

IBSA Blue

IBSA Blue/Main

#233069

Text Block

Grey Scale/Text Block

#000F41

Grey Main

Grey Scale/Main

#393939

Inactive Gray

Grey Scale/Inactive

#767676

Pure White

Grey Scale/Pure White

#FFFFFF

Typography

Headings — Big Shoulders Display

H1 — Heading One

Bold · 70px · Line height 100% · Letter spacing -5px

H2 — Heading Two

SemiBold · 50px · Line height 100%

H3 — Heading Three

Bold · 40px · Line height 100%

H5 — Heading Five

Bold · 30px · Line height 100%

Body & UI — Satoshi Variable

S1 Bold — The quick brown fox

Bold · 24px · Line height 100%

S1 Regular — The quick brown fox

Medium · 24px · Line height 100%

B1 Bold — The quick brown fox

Bold · 18px · Letter spacing 0.03px

B1 Regular — The quick brown fox

Medium · 18px · Letter spacing 0.03px

B2 Bold — The quick brown fox

Bold · 16px · Letter spacing 0.03px

B2 Regular — The quick brown fox

Medium · 16px · Letter spacing 0.03px

B3 Regular — The quick brown fox

Medium · 14px

CTA — READ MORE

Bold · 18px · Uppercase · Letter spacing 0.03px

Colors

Main Blue

Blue/Main

#001B72

Main Red

Red/Main

#E01212

Main Green

Green/Main

#00AB3E

IBSA Blue

IBSA Blue/Main

#233069

Text Block

Grey Scale/Text Block

#000F41

Grey Main

Grey Scale/Main

#393939

Inactive Gray

Grey Scale/Inactive

#767676

Pure White

Grey Scale/Pure White

#FFFFFF

Typography

Headings — Big Shoulders Display

H1 — Heading One

Bold · 70px · Line height 100% · Letter spacing -5px

H2 — Heading Two

SemiBold · 50px · Line height 100%

H3 — Heading Three

Bold · 40px · Line height 100%

H5 — Heading Five

Bold · 30px · Line height 100%

Body & UI — Satoshi Variable

S1 Bold — The quick brown fox

Bold · 24px · Line height 100%

S1 Regular — The quick brown fox

Medium · 24px · Line height 100%

B1 Bold — The quick brown fox

Bold · 18px · Letter spacing 0.03px

B1 Regular — The quick brown fox

Medium · 18px · Letter spacing 0.03px

B2 Bold — The quick brown fox

Bold · 16px · Letter spacing 0.03px

B2 Regular — The quick brown fox

Medium · 16px · Letter spacing 0.03px

B3 Regular — The quick brown fox

Medium · 14px

CTA — READ MORE

Bold · 18px · Uppercase · Letter spacing 0.03px

Shadows

Card Default

0 0 18px 0 rgba(14,67,121,0.4)

Card Hover / Featured

0 0 30px 0 rgba(15,242,98,0.35)

Header Shadow

0 0 50px 0 rgba(15,41,57,0.1)

Cards

Press

Article headline goes here

March 5, 2026

Default

White bg · 20px radius · Shadow 0 0 18px rgba(14,67,121,0.4) · Transparent border

Featured

Article headline goes here

March 5, 2026

Hover / Featured

Green border 2px #00AB3E · Shadow 0 0 30px rgba(15,242,98,0.35)

Buttons

CTA Button

White bg · 3px red border · 30px radius · Satoshi Bold 18px · Uppercase

Publications

Ghost Button (on blue)

Transparent · No border · 5px radius · Satoshi Bold 18px · White text

Ghost Button (nav)

Transparent · No border · 5px padding · Blue text

Layout Tokens

Containers

container-large

.container-large

width: 90% · max-width: 72.5rem · margin: auto

container-medium

.container-medium

width: 90% · max-width: 50rem · margin: auto

container-small

.container-small

width: 90% · max-width: 40rem · margin: auto

Global Padding

padding-global

.padding-global

padding-left: 5% · padding-right: 5%

Section Spacing

Section padding (top/bottom)

5rem (80px)

Section gap between elements

2.5–3.75rem (40–60px)

Card grid gap

1.875rem (30px)

Buttons

CTA Button

White bg · 3px red border · 30px radius · Satoshi Bold 18px · Uppercase

Publications

Ghost Button (on blue)

Transparent · No border · 5px radius · Satoshi Bold 18px · White text

Ghost Button (nav)

Transparent · No border · 5px padding · Blue text

Cards

Press

Article headline goes here

March 5, 2026

Default

White bg · 20px radius · Shadow 0 0 18px rgba(14,67,121,0.4) · Transparent border

Featured

Article headline goes here

March 5, 2026

Hover / Featured

Green border 2px #00AB3E · Shadow 0 0 30px rgba(15,242,98,0.35)

Shadows

Card Default

0 0 18px 0 rgba(14,67,121,0.4)

Card Hover / Featured

0 0 30px 0 rgba(15,242,98,0.35)

Header Shadow

0 0 50px 0 rgba(15,41,57,0.1)

Layout Tokens

Containers

container-large

.container-large

width: 90% · max-width: 72.5rem · margin: auto

container-medium

.container-medium

width: 90% · max-width: 50rem · margin: auto

container-small

.container-small

width: 90% · max-width: 40rem · margin: auto

Global Padding

padding-global

.padding-global

padding-left: 5% · padding-right: 5%

Section Spacing

Section padding (top/bottom)

5rem (80px)

Section gap between elements

2.5–3.75rem (40–60px)

Card grid gap

1.875rem (30px)