Foundations

This style guide is a collection of elements and components with brand colors and typography applied. To change any colors or values use Variables (V) panel.

Built with:
Flowkit is a Webflow's utility-first CSS framework that helps you build websites quickly by applying pre-made CSS in Webflow.

Color

Foundation colors is a set of variables that should be applied to elements classes. Update colors by selecting an element (style panel) or in the variables panel

Core Colors
Primary
Secondary
Primary
Accent Secondary
Hover
Accent Tertiary
Hover
Neutral Primary
Neutral Inverse
Gray
Primary
Secondary
Primary
Accent Secondary
Hover
Accent Tertiary
Hover
Neutral Primary
Neutral Inverse

Background color

Section classes and background utility classes are using variables to adjust background and font color of nested text elements.

Primary (Default)

Heading

Well-crafted paragraph text is more than just a collection of letters
Secondary

Heading

Well-crafted paragraph text is more than just a collection of letters
Accent Primary

Heading

Well-crafted paragraph text is more than just a collection of letters
Accent Secondary

Heading

Well-crafted paragraph text is more than just a collection of letters
Inverse

Heading

Well-crafted paragraph text is more than just a collection of letters

Typography

Headings tags and classes are connected through the variables which helps to keep them consistent.

Headings

Class Name
Preview
paragraph

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph_xxlarge

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph_xlarge

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph_medium

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph_small

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph_xsmall

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

paragraph-cta

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Spacing

Spacing styles such as margins, paddings, and gaps are using predefined set of REM-based variables and applied directly to component classes.

Gap

Set of variables used for grid and flex layouts.
Read docs for more information.

Variable
Preview
XXS Gap
XS Gap
SM Gap
MD Gap
LG Gap
XL Gap
XXL Gap
Spacing

To keep spacing consistent, most of the text elements and components have spacing applied as margin or padding.

Preview
Adventure Awaits

Headings embody the voice of a brand

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
Get a Free Consultation

Components

Buttons

Every type of buttons have 2 properties: color and size.

Primary
Preview
Small Primary
Small Secondary
Default
Get a Free Consultation
Free Consultation
Free Consultation
Free Consultation
Free Consultation
Free Consultation
Free Consultation
Free Consultation
On Accent Primary
Free Consultation
Free Consultation
Free Consultation
Free Consultation

Text Button

Primary
Small Secondary
Default
Text Button
Text Button
On Inverse
Text Button
Text Button
On Accent Primary
Text Button
Text Button

Tags

Every type of tags have 2 properties: color and size.

Primary
Tag Label
Inerse
Tag Label
On Inverse
Tag Label
On Accent Primary
Tag Label
On Accent Secondary
Tag Label
On Accent Tertiary
Tag Label
Images

Images are wrapped into a div with a class ratio_(value) It helps to control an aspect ratio of the image, takes care of overflow behavior and has a radius applied.

Ratio 16:9
Ratio 3:2
Ratio 4:3
Ratio 1:1
Ratio 3:4
Ratio 2:3
Avatar

Avatar size can be adjusted with combo classes.

Small
Medium
Large

Icons

Icons size can be adjusted with combo classes.

Extra Small
Small
Default
Large
Extra Large
Default
On Inverse
On Accent Primary
On Accent Secondary
On Accent Tertiary

Forms

All the form elements are adopting to the different surfaces.

On Primary Color
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On Inverse Color
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent secondary
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent tertiary
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Cards

All the cards and their elements are adopting to the different surfaces.

Default Card

A different heading, so it doesn't look repetitive.

Secondary Card

A different heading, so it doesn't look repetitive.

Inverse Card

A different heading, so it doesn't look repetitive.

Read post
Accent Primary

A different heading, so it doesn't look repetitive.

Read post
Accent Secondary

A different heading, so it doesn't look repetitive.

Read post
Accent Tertiary

A different heading, so it doesn't look repetitive.

Read post
On Secondary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Inverse

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Accent Primary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Accent Secondary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

On Accent Tertiary

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

A different heading, so it doesn't look repetitive.

Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tabs

Each tab button uses a base class and can be styled to reflect different backgrounds or interface variants.

Read docs
On Primary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Inverse
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.

Slider

Sliders use arrows for navigation. These arrows are styled using a base class, and surface modifiers can be added to adapt to different backgrounds.

Default
Inverse

Accordion

The accordion component is used to toggle the visibility of content in a vertically stacked format.

Read docs
Title
Preview
Accordion
Accordion Label
Accordion Label
Accordion Label
Accordion opened
Accordion Label

Dropdown

The dropdown component is used to display a list of options that appear on interaction.

Read docs
Title
Preview
Dropdown
Dropdown
Dropdown opened

Rich Text

The Rich Text component is used for long-form content such as blog posts, CMS fields, or documentation. It ensures consistent formatting of text elements like headings, paragraphs, links, and lists.

Read docs
Preview

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  1. A rich text element can be used with static or dynamic content.
  2. The rich text element allows you to create and format elements
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Divider

Dividers have two types: horizontal and vertical

Read docs
Horizontal Primary
Horizontal Secondary
Horizontal Accent
Vertical Primary
Vertical Secondary
Vertical Accent

Headings embody the voice of a brand

Headings embody the voice of a brand

Headings embody the voice of a brand

Headings embody the voice of a brand

Headings embody the voice of a brand

Headings embody the voice of a brand
Headings embody the voice of a brand
Headings
Headings
Headings
Aa
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Aa
Aa
Aa
Aa
Aa
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Your site should do more than look good
Your site should do more than look good
Your site should do more than look good
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
label
Block Quote

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • A rich text element can be used with static or dynamic content.
  • The rich text element allows you to create and format elements
    • Headings
    • Paragraphs
    • Media
      • Video
      • Images
  1. A rich text element can be used with static or dynamic content.
  2. The rich text element allows you to create and format elements
    • Headings
    • Paragraphs
    • Media
      • Video
      • Images
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Vlad Magdalin, CEO at Webflow

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.

A well-crafted typeface is more than just a collection of letters—it is the fingerprint of great design, carrying within it the essence of a brand, a message, and a mood.
Adventure Awaits
Headings embody the voice of a brand
Headings embody the voice of a brand
Headings embody the voice of a brand
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Button TextButton TextButton TextButton TextButton TextButton TextButton TextButton TextButton TextButton TextButton TextButton Text
Text LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText Link
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Accordion Label
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.