Foundations
ColorTypographyRichtextSpacing
Components
ButtonsTagImagesAvatarIconsFormsCardsTabsSliderAccordionDropdownDivider

Foundations

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

Built with:
Enhanced by:
Flowkit is a Webflow's utility-first CSS framework that helps you build websites quickly by applying pre-made CSS in Webflow.
Stormfors has enhacned the framework with additional variables and styling.
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

Read docs

Core Colors

Accent Primary
Hover
Accent Secondary
Hover
Accent Tertiary
Hover
Neutral Primary
Primary
Secondary
Neutral Inverse
Inverse

Tints

Accent Primary
A90
A80
A70
A60
A50
A40
A30
A20
A10
A05
Accent Secondary
A90
A80
A70
A60
A50
A40
A30
A20
A10
A05
Accent Tertiary
A90
A80
A70
A60
A50
A40
A30
A20
A10
A05
Neutral Primary
A90
A80
A70
A60
A50
A40
A30
A20
A10
A05
Neutral Inverse
A90
A80
A70
A60
A50
A40
A30
A20
A10
A05

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
Inverse

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
Accent Tertiary

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.

Read docs
Semantic tags
Title
Preview
All H1 headings

Voice of a brand

All H2 headings

Voice of a brand

All H3 headings

Voice of a brand

All H4 headings

Voice of a brand

All H5 headings
Voice of a brand
All H6 headings
Voice of a brand

Headings

Title
Preview
heading-respoinsive_xlarge

Voice of a brand

heading-respoinsive_large

Voice of a brand

heading-respoinsive

Voice of a brand

heading-respoinsive_small

Voice of a brand

heading_h1

Voice of a brand

heading_h2

Voice of a brand

heading_h3

Voice of a brand

heading_h4

Voice of a brand

heading_h5
Voice of a brand
heading_h6
Voice of a brand
Paragraph
Title
Preview
text
is-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.

text
is-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.

text
is-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.

text

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.

text
is-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
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.

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

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.

Read docs

Gap

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

Variable
Preview
gap-xxsmall
gap-xsmall
gap-small
gap-medium
gap-large
gap-xlarge
gap-xxlarge

Spacing

To keep spacing consistent 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 TextButton Text

Components

Buttons

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

Read docs
Primary
Secondary
Small Primary
Small Secondary
Default
button
Button Text
button
is-secondary
Button Text
button
is-small
Button Text
button
is-secondary
is-small
Button Text
On Inverse
button
Button Text
button
is-secondary
on-inverse
Button Text
button
is-small
on-inverse
Button Text
button
is-secondary
is-small
on-inverse
Button Text
On Accent Primary
button
on-accent-primary
Button Text
button
is-secondary
on-accent-primary
Button Text
button
is-small
on-accent-primary
Button Text
button
is-secondary
is-small
on-accent-primary
Button Text
On Accent Secondary
button
on-accent-secondary
Button Text
button
is-secondary
on-accent-secondary
Button Text
button
on-accent-secondary
is-small
Button Text
button
is-secondary
on-accent-secondary
is-small
Button Text
On Accent Tertiary
button
on-accent-tertiary
Button Text
button
is-secondary
on-accent-tertiary
Button Text
button
on-accent-tertiary
is-small
Button Text
button
is-secondary
on-accent-tertiary
is-small
Button Text

Text Button

Primary
Small Secondary
Default
text-button
text-button
is-small
Text Button
Text Button
Secondary
text-button
is-secondary
text-button
is-secondary
is-small
Text Button
Text Button
On Inverse
text-button
on-inverse
text-button
on-inverse
is-small
Text Button
Text Button
On Accent Primary
text-button
on-accent-primary
text-button
on-accent-primary
is-small
Text Button
Text Button
On Accent Secondary
text-button
on-accent-secondary
text-button
on-accent-secondary
is-small
Text Button
Text Button
On Accent Tertiary
text-button
on-accent-tertiary
text-button
on-accent-tertiary
is-small
Text Button
Text Button

Text Link

Primary Link
Small Secondary Link
Default
text-link
text-link
is-small
Text LinkText Link
Secondary
text-link
is-secondary
text-link
is-secondary
is-small
Text LinkText Link
On Inverse
on-inverse
is-small
text-link
on-inverse
is-small
Text LinkText Link
On Accent Primary
text-link
on-accent-primary
text-link
on-accent-primary
is-small
Text LinkText Link
On Accent Secondary
text-link
on-accent-secondary
text-link
on-accent-secondary
is-small
Text LinkText Link
On Accent Tertiary
text-link
on-accent-tertiary
text-link
on-accent-tertiary
is-small
Text LinkText Link

Tag

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

Read docs
Surface
Default
Large
Default
tag
Tag
tag
is-large
Tag
On Inverse
tag
is-inverse
Tag
tag
is-inverse
is-large
Tag
Accent Primary
tag
is-accent-primary
Tag
tag
is-accent-primary
is-large
Tag
Accent Secondary
tag
is-accent-secondary
Tag
tag
is-accent-secondary
is-large
Tag
Accent Tertiary
tag
is-accent-tertiary
Tag
tag
is-accent-tertiary
is-large
Tag

Images

Images use an image_wrapper div with overflow clipping and border radius. The image_cover class with a ratio_ combo class on the image controls the aspect ratio and object-fit behavior.

Read docs
Ratio 16:9
image_cover
ratio_16x9
Placeholder
Ratio 3:2
image_cover
ratio_3x2
Placeholder
Ratio 4:3
image_cover
ratio_4x3
Placeholder
Ratio 1:1
image_cover
ratio_1x1
Placeholder
Ratio 3:4
image_cover
ratio_3x4
Placeholder
Ratio 2:3
image_cover
ratio_2x3
Placeholder

Avatar

Avatar size can be adjusted with combo classes.

Read docs
Small
avatar
is-small
Avatar small
Medium
avatar
Avatar default
Large
avatar
is-large
Avatar large

Icons

Icons size can be adjusted with combo classes.

Read docs
Extra Small
icon
is-xsmall
Small
icon
is-small
Default
icon
Large
icon
is-large
Extra Large
icon
is-xlarge
Default
icon
is-background
On Inverse
icon
is-background
on-inverse
On Accent Primary
icon
is-background
on-accent-primary
On Accent Secondary
icon
is-background
on-accent-secondary
On Accent Tertiary
icon
is-background
on-accent-tertiary

Forms

All the form elements are adopting to the different surfaces.

Read docs
On Primary Color
Terms & Conditions
Radio Options
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On Inverse Color
Terms & Conditions
Radio Options
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On Primary Color
Terms & Conditions
Radio Options
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On Inverse Color
Terms & Conditions
Radio Options
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
On accent
Terms & Conditions
Radio Options
Message
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
card

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

Read post
Secondary Card
card
is-secondary

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

Read post
Inverse Card
card
is-inverse

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

Read post
Accent Primary
card
is-accent-primary

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

Read post
Accent Secondary
card
is-accent-secondary

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

Read post
Accent Tertiary
card
is-accent-tertiary

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

Read post
On Secondary
card
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
card
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
card
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
card
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
card
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 div block.
This is some text inside of a div block.
Tab Underline Style
Tab 1
Tab 2
This is some text inside of a div block.
This is some text inside of a div block.
On Inverse
Tab 1
Tab 2
This is some text inside of a div block.
This is some text inside of a div block.
On Accent Primary
Tab 1
Tab 2
This is some text inside of a div block.
This is some text inside of a div block.
On Accent Secondary
Tab 1
Tab 2
This is some text inside of a div block.
This is some text inside of a div block.
On Accent Tertiary
Tab 1
Tab 2
This is some text inside of a div block.
This is some text inside of a div 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
Portrait of a woman with slicked-back hair and neutral expression, illuminated with blue lighting on a purple background.
Portrait of a woman with slicked-back hair and neutral expression, illuminated with blue lighting on a purple background.
Inverse
Portrait of a woman with slicked-back hair and neutral expression, illuminated with blue lighting on a purple background.
Portrait of a woman with slicked-back hair and neutral expression, illuminated with blue lighting on a purple background.

Accordion

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

Read docs
Title
Preview
Accordion
Accordion
Accordion
Accordion
Accordion opened
Accordion

Divider

Dividers have two types: horizontal and vertical

Read docs
Horizontal Primary
Horizontal Secondary
Horizontal Accent
Vertical Primary
Vertical Secondary
Vertical Accent
©
2026
Company Name. All rights reserved.

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