Foundations |

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

Built with:
Flowkit is a utility-first CSS Webflow framework that helps you build websites easily by applying pre-made CSS in Webflow.
Read docs

Color

The color scheme is a set of variables that should be applied to class elements. Colors are updated by selecting an element (style panel) or in the variables panel.

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

Background color

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

Primary (Default)

Heading |

A well-crafted paragraph text is no longer just a simple collection of letters
Secondary |

Heading |

A well-crafted paragraph text is no longer just a simple collection of letters
Primary Accent

Heading |

A well-crafted paragraph text is no longer just a simple collection of letters
Secondary Accent

Heading |

A well-crafted paragraph text is no longer just a simple collection of letters
Accent Tertiary

Heading |

A well-crafted paragraph text is no longer just a simple collection of letters
Inverse |

Heading |

A well-crafted paragraph text is no longer just a simple collection of letters

Typography |

Tags and classes are connected through variables that help keep tags consistent.

Read docs

Headings |

Title |
Preview
Heading hero |

Voice of a brand

Heading Primary

Headings embody the voice of a brand

Deputy Heading;

Headings embody the voice of a brand

Tertiary heading |

Headings embody the voice of a brand

Heading small |

Headings embody the voice of a brand

Heading xsmall |
Headings embody the voice of a brand
Heading xxsmall |
Headings embody the voice of a brand
Tags Semantic
Title |
Preview
H1 headings

Headings embody the voice of a brand

All H2 heads

Headings embody the voice of a brand

H3 headings

Headings embody the voice of a brand

headings All H4

Headings embody the voice of a brand

All H5 headings
Headings embody the voice of a brand
headings All H6
Headings embody the voice of a brand
Paragraph
Title |
Preview
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

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

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)

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.

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

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 such broad access to such a medium for construction businesses; sharing knowledge, intuition and creativity; and creating communities.
Eyebrow
Adventure Awaits
Unordered list |
  • Use only the space to improve text legibility.
  • Make typography responsive for all screenshot sizes.
  • Use proper line spacing for easy readability.
List ordered
  1. Use only the space to improve text legibility.
  2. Make typography responsive for all screenshot sizes.
  3. Use proper line spacing for easy readability.

Spacing |

Spacing styles such as margins, padding, and gaps are used with a predefined set of REM variables and applied directly to class composition.

Read docs
Gap

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

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

To preserve the composite space, most elements and components have space 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 Text Button Text

Components |

Buttons |

Each type of button has 2 properties: color and size.

Read docs
Primary
Preview
Small Primary
Small Secondary
Default |
Button Text Button Text Button Text Button Text
On Inverse
Button Text Button Text Button Text Button Text
On Accent Primary
Button Text Button Text Button Text Button Text
On Secondary Accent
Button Text Button Text Button Text Button Text
On Accent Tertiary
Button Text Button Text Button Text Button Text

Text button

Primary
Small Secondary
Default |
Text button
Text button
On Inverse
Text button
Text button
On Accent Primary
Text button
Text button
On Secondary Accent
Text button
Text button
On Accent Tertiary
Text button
Text button

Link

Primary link
Small Secondary Link
Default |
Text Link Text Link
On Inverse
Text Link Text Link
On Accent Primary
Text Link Text Link
On Secondary Accent
Text Link Text Link
On Accent Tertiary
Text Link Text Link

Tags

Each type of tag has 2 properties: color and size.

Read docs
Primary
Tag Label
Inerse |
Tag Label
On Inverse
Tag Label
On Accent Primary
Tag Label
On Secondary Accent
Tag Label
On Accent Tertiary
Tag Label
Images

The images are wrapped in a div with a class ratio_(value). It helps to control the aspect ratio of the image, to take care of overflow behavior and a radius applied.

Read docs
Ratio 16:9
Ratio 3:2
Ratio 4:3
Ratio 1:1
Ratio 3:4
Ratio 2:3
Avatar |

The size of the avatar can be adjusted with the combination of classes.

Read docs
Small |
AVERAGE
Wide

Icons |

The size of the icons can be adjusted with the combination of classes.

Read docs
Extra Small
Small |
Default |
Wide
Extra Large
Default |
On Inverse
On Accent Primary
On Secondary Accent
On Accent Tertiary

Forms

All shapes are adapted to different surfaces.

Read docs
On Primary Color
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form.
On Inverse Color
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form.
We emphasize
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form.
On secondary emphasis
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form.
On tertiary accent
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form.

Cards |

All the maps and their elements are adapted to different surfaces.

Read docs
Default Card

With a different heading, it doesn't seem repetitive.

Read post
Secondary Card

With a different heading, it doesn't seem repetitive.

Read post
Reverse Card

With a different heading, it doesn't seem repetitive.

Read post
Primary Accent

With a different heading, it doesn't seem repetitive.

Read post
Secondary Accent

With a different heading, it doesn't seem repetitive.

Read post
Accent Tertiary

With a different heading, it doesn't seem repetitive.

Read post
On Secondary

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

On Inverse

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

On Accent Primary

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

On Secondary Accent

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

On Accent Tertiary

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

With a different heading, it doesn't seem repetitive.

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

Tabs |

This is a base class for each tab and can be designed to reflect different backgrounds or interface variants.

Read docs
On Primary
Tab 1 |
Table 2
It's text inside a tab block.
It's text inside a tab block.
Tab Underline Style
Tab 1 |
Table 2
It's text inside a tab block.
It's text inside a tab block.
On Inverse
Tab 1 |
Table 2
It's text inside a tab block.
It's text inside a tab block.
On Accent Primary
Tab 1 |
Table 2
It's text inside a tab block.
It's text inside a tab block.
On Secondary Accent
Tab 1 |
Table 2
It's text inside a tab block.
It's text inside a tab block.
On Accent Tertiary
Tab 1 |
Table 2
It's text inside a tab block.
It's text inside a tab block.

Slider |

Sliders uses arrows for navigation. These arrows are designed using a base class, and surface modifications can be added to adapt to different backgrounds.

Read docs
Default |
Inverse |

Accordion |

The component of the agreement is used to move the visibility of the content in a vertical stacked seat 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 in interaction.

Read docs
Title |
Preview
Dropdown
Dropdown
Dropdown opened

Rich Text

The Rich Text Component is used for long-form content such as blogs, CMS fields, or documentation. It involves formatting text elements like headings, paragraphs, links, and lists.

Read docs
Preview

Heading 1 |

Heading 2 |

Heading 3 |

Heading 4 |

Heading 5 |
Heading 6 |

Rich text elements let you create and format headings, paragraphs, blocks, images, and video all in one place instead of having to add and format them individually. Just double-click and you're good to go.

  1. A text-rich element can be used with static or dynamic content.
  2. The rich text elements allow you to create and format elements
A text-rich element can be used with static or dynamic content. For static content, simply drag and drop it onto any page and edit it. For dynamic content, add a rich field to any collection and then link the rich text element to that field in the panel settings. That's it!

Dividend

Divider comes in two types: horizontal and vertical

Read docs
Primary Horizontal
Secondary horizontal
Horizontal Accent
Vertical Primary
Secondary Vertical
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 |
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
Aa |
Aa |
Aa |
Aa |
Aa |
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
Your site should do more than just well
Your site should do more than just well
Your site should do more than just well
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
label;
Block Quote

Heading 1 |

Heading 2 |

Heading 3 |

Heading 4 |

Heading 5 |
Heading 6 |

Rich text elements let you create and format headings, paragraphs, blocks, images, and video all in one place instead of having to add and format them individually. Just double-click and you're good to go.

  • A text-rich element can be used with static or dynamic content.
  • The rich text elements allow you to create and format elements
    • Headings |
    • Paragraphs
    • Media
      • Video
      • Images
  1. A text-rich element can be used with static or dynamic content.
  2. The rich text elements allow you to create and format elements
    • Headings |
    • Paragraphs
    • Media
      • Video
      • Images
A text-rich element can be used with static or dynamic content. For static content, simply drag and drop it onto any page and edit it. For dynamic content, add a rich field to any collection and then link the rich text element to that field in the panel settings. That's it!
Vlad Magdalin, CEO of 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
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.
Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |Text Button |
Text LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText LinkText Link
Thank you! Your submission has been received!
Oops! Something went wrong when submitting the form.
Accordion Label
It's text inside a div block.
It's text inside a div block.
It's text inside a div block.