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.
Read docs

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
Accent Primary
Hover
Accent Secondary
Hover
Accent Tertiary
Hover
Neutral Primary
Secondary
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

SECTION
Primary (Default)

Heading

SECTION
paper-leaf-maple-right
Primary (Default)

Heading

SECTION
paper-texture-dots
Primary (Default)

Heading

SECTION
paper-texture-grid
Primary (Default)

Heading

SECTION
paper-leaf-maple-center
Secondary

Heading

is-secondary
is-secondary

Heading

is-secondary
cream-scene-twill-lockup
Secondary

Heading

is-secondary
cream-texture-grid
Secondary

Heading

is-secondary
cream-scene-twill-lockup
Secondary

Heading

is-secondary
cream-texture-dots
Accent Primary

Heading

is-accent-primary
Accent Primary
Accent Primary

Heading

is-accent-primary
is-accent-primary
Accent Primary
Accent Primary

Heading

is-accent-primary
is-accent-primary
Accent Secondary

Heading

is-accent-secondary
Accent Secondary

Heading

is-accent-secondary
ink-texture-dots
Accent Secondary

Heading

is-accent-secondary
ink-leaf-lockup
Accent Secondary

Heading

is-accent-secondary
ink-scene-dots-maple-center
Accent Secondary

Heading

is-accent-secondary
ink-leaf-maple-center
Accent Tertiary

Heading

is-accent-tertiary
Accent Tertiary

Heading

is-accent-tertiary
is-accent-tertiary
Square Video lightbox

Typography

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

Read docs

Headings

Title
Preview
Heading hero
heading_hero

Voice of a brand

Heading primary
heading_primary

Headings embody the voice of a brand

Heading secondary
heading_secondary

Headings embody the voice of a brand

Heading tertiary
heading_tertiary

Headings embody the voice of a brand

Heading small
heading_small

Headings embody the voice of a brand

Heading xsmall
heading_xsmall
Headings embody the voice of a brand
Heading xxsmall
heading_xxsmall
Headings embody the voice of a brand
Semantic tags
Title
Preview
All H1 headings

Headings embody the voice of a brand

All H2 headings

Headings embody the voice of a brand

All H3 headings

Headings embody the voice of a brand

All H4 headings

Headings embody the voice of a brand

All H5 headings
Headings embody the voice of a brand
All H6 headings
Headings embody the voice of a brand
Paragraph
Title
Preview
Paragraph xxlarge
paragraph_xxlarge

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.

Paragraph xlarge
paragraph_xlarge

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.

Paragraph large
paragraph_large

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.

Paragraph (Default)
paragraph

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.

Paragraph small
paragraph_small

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.

Other text elements
Title
Preview
Subheading
subheading
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.
Quote
Never before have so many people had so much access to such a powerful medium for building businesses; sharing knowledge, insight, and creativity; and creating communities.
Eyebrow
Adventure Awaits
List unordered
  • Use white space to improve text legibility.
  • Make typography responsive for all screen sizes.
  • Use proper line spacing for easy readability.
List ordered
  1. Use white space to improve text legibility.
  2. Make typography responsive for all screen sizes.
  3. Use proper line spacing for easy readability.

Spacing

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

Read docs
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.
Button TextButton Text

Components

Buttons

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

Read docs
Primary
Preview
Small Primary
Small Secondary
Default
Buttonis-secondaryis-smallis-secondary
is-small
On Inverse
Button Text
on-inverseis-secondary
on-inverseis-small
on-inverseis-secondary
is-small
on-inverse
On Accent Primary
Button Text
on-accent-primaryButton Text
is-secondary
on-accent-primaryButton Text
is-small
on-accent-primaryButton Text
is-secondary
is-small
on-accent-primary
On Accent Secondary
Button Text
on-accent-secondaryButton Text
is-secondary
on-accent-secondaryon-accent-secondary
is-smallis-secondary
on-accent-secondary
is-small
On Accent Tertiary
Button Text
on-accent-tertiaryis-secondary
on-accent-tertiaryon-accent-tertiary
is-smallis-secondary
on-accent-tertiary
is-small

Text Button

Primary

text-button
Small Secondary

text-button
is-secondary
is-small
Default
Text Button
Text Button
On-Inverse
text-button
Text Button
On Accent Primary
Text Button
Text Button
On Accent Secondary
See Our Work
Text Button
On Accent Tertiary
Text Button
Text Button

Link

Primary Link
text-link
Small Secondary Link
is-secondary
is-small
Default
Text LinkText Link
On-Inverse
Text LinkText Link
On Accent Primary
Text LinkText Link
On Accent Secondary
Text LinkText Link
On Accent Tertiary
Text LinkText Link

Tags

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

Read docs
Primary
Tag Label
is-inverse
is-inverse
On Inverse
on-inverse
On Accent Primary
on-accent-primary
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.

Read docs
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.

Read docs
avatar is-small
avatar
avatar is-large

Icons

Icons size can be adjusted with combo classes.

Read docs
icon_xsmall
icon_small
icon
icon_large
icon_xlarge
is-background
is-background on-inverse
is-background
On-Accent-Primary
On Accent Secondary
On Accent Tertiary

Forms

All the form elements are adopting to the different surfaces.

Read docs
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.

Read docs
Default Card

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

Read post
is-secondary

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

Read post
is-inverse

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

Read post
is-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.
Tab Underline Style
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.
On Accent Primary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Accent Secondary
Tab 1
Tab 2
This is some text inside of a tab block.
This is some text inside of a tab block.
On Accent Tertiary
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.

Read docs
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
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!
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.