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

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

Core Color Tints

Accent Primary

• A90
• A80
• A70
• A60
• A50
• A40
• A30
• A20
• A10

Accent Secondary

• A90
• A80
• A70
• A60
• A50
• A40
• A30
• A20
• A10

Accent Tertiary

• A90
• A80
• A70
• A60
• A50
• A40
• A30
• A20
• A10

Neutral Inverse

• A90
• A80
• A70
• A60
• A50
• A40
• A30
• A20
• A10

Neutral Primary

• A90
• A80
• A70
• A60
• A50
• A40
• A30
• A20
• A10

Background color

Background colors are applied to components using Background color variables.

To apply custom background you can use [Utility] Background classes

• Primary: BG Primary, [Utility] Background Primary
• Secondary: BG Secondary, [Utility] Background Secondary
• Accent Primary: BG Accent Primary, [Utility] Background Accent Primary
• Accent Secondary: BG Accent Secondary, [Utility] Background Accent Secondary
• Accent Tertiary: BG Accent Tertiary, [Utility] Background Accent Tertiary
• Inverse: BG Inverse, [Utility] Background Inverse

Text Color

Content

• Text Primary: [Utility] Text Primary
• Text Secondary: [Utility] Text Secondary
• Text Inverse Primary: [Utility] Text Inverse
• Text Inverse Secondary: [Utility] Text Inverse Secondary
• Text Accent Primary: [Utility] Text Accent Primary
• Text Accent Secondary: [Utility] Text Accent Secondary
• Text Accent Tertiary: [Utility] Text Accent Tertiary

Border

Border Color / over primary backgrounds

• Primary: Border Primary
• Secondary: Border Secondary
• Accent: Border Accent

Border Color / over inverse backgrounds

• Primary: Border Inverse Primary
• Secondary: Border Inverse Secondary

Border Radius

• Small: SM Radius
• Medium: MD Radius
• Large: LG Radius
• X Large: XL Radius
• Round: Round

Typography

Foundation colors is a set of variables that should be applied to components.

Fonts

Accent

Preview

Heading Font

Heading Font

A well-crafted typeface as the fingerprint of great design

A B C D E F G H I J K L M N O P Q R S T U V X Y Z

a b c d e f g h i j k l m n o p q r s t u v x y z

0 1 2 3 4 5 6 7 8 9

Paragraph Font

Body Font 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. Just as every fingerprint is unique, a typeface imprints a distinct identity onto a digital or physical space, shaping the way users perceive and engage with content.

The choice of type is not arbitrary; it is a deliberate act of design that influences trust, readability, and emotion. A masterfully designed typeface can evoke nostalgia, inspire confidence, or even challenge conventions. It speaks before words are even read, setting the tone for an entire experience in subtle yet profound ways.

A B C D E F G H I J K L M N O P Q R S T U V X Y Z

a b c d e f g h i j k l m n o p q r s t u v x y z

0 1 2 3 4 5 6 7 8 9

Button Font

Button Font

Spacing

Foundational predefined set of variables for size related elements. This set stays unchanged for every project.

Size

Variable name is equal rem size.

Variable

Gap

Set of variables used for grid and flex layouts.

Variable

Preview

• XXS Gap
• XS Gap
• SM Gap
• MD Gap
• LG Gap
• XL Gap

Components

Type

Foundation colors is a set of variables that should be applied to components.

Heading

Title

Preview

Heading Huge

Heading Huge Headings embody the voice of a brand

H1 Heading

Headings embody the voice of a brand

H2 Heading

Headings embody the voice of a brand

H3 Heading

Headings embody the voice of a brand

H4 Heading

Headings embody the voice of a brand

H5 Heading

Headings embody the voice of a brand

H6 Heading

Headings embody the voice of a brand

Body

Title

Preview

• Paragraph XX Large: Paragraph XXL 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 X Large: Paragraph XL 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 L 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: Body All Paragraphs 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 S 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

Title

Preview

Heading Responsive

[Utility] Container CQW Heading Responsive Headings embody the voice of a brand

Heading Responsive LG

[Utility] Container CQW Heading Responsive LG Headings embody the voice of a brand

Heading Responsive XL

[Utility] Container CQW Heading Responsive XL Headings embody the voice of a brand

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

All Block Quotes

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

Eyebrow Adventure Awaits

List Unordered

All Unordered Lists

• Use white space to improve text legibility.
• Make typography responsive for all screen sizes.
• Use proper line spacing for easy readability.

List Ordered

All Ordered Lists

1. Use white space to improve text legibility.
2. Make typography responsive for all screen sizes.
3. Use proper line spacing for easy readability.

Text Alignment

Title

Preview

Left

[Utility] Text Align Left Your site should do more than look good

Center

[Utility] Text Align Center Your site should do more than look good

Right

[Utility] Text Align Right Your site should do more than look good

Text Alignment / Responsive

Tablet

Align Text Left [Utility] Text Align Center - Tablet This is some text inside of a div block.

Mobile Landscape

Align Text Left [Utility] Text Align Center - Mobile Landscape This is some text inside of a div block.

Mobile Portrait

Align Text Left [Utility] Text Align Center - Mobile Portrait This is some text inside of a div block.

Buttons

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

Size: default, small, large
Place: default, invert, on accent.

Button

Button Text

Primary

Button Button Text

Primary Small

ButtonSmall Button Button Text

Secondary

ButtonSecondary Button Button Text

Secondary Small

ButtonSecondary ButtonSmall Button

Button / On accent

Button Text

Primary

ButtonPrimary On Accent Button Button Text

Secondary

ButtonSecondaryButton Secondary Button On Accent

Button / On accent secondary

Button Text

Primary

ButtonPrimary Button On Accent Secondary Button Text

Secondary

ButtonSecondary ButtonSecondary Button On Accent Secondary

Button / On accent tertiary

Button Text

Primary

ButtonPrimary Button On Accent Tertiary Button Text

Secondary

ButtonSecondary ButtonSecondary Button On Accent Tertiary

Button / On inverse

Button Text

Primary

ButtonPrimary On Inverse Button Button Text

Secondary

ButtonSecondary ButtonSecondary On Inverse Button

Text Button

Text Button Text Button

Primary

Text Button Text ButtonSmall Text Button Text Button Text Button

Secondary

Text ButtonSecondary Text Button Text ButtonSmallTextButtonSecondary Text Button

Text

Text ButtonText Button On Inverse Text Button

On Accent Primary

Text ButtonText Button On Accent Primary Text Button

On Accent Secondary

Text ButtonText Button On Accent Secondary Text Button

On Accent Tertiary

Text ButtonText Button On Accent Tertiary

Link Text

Text Link Text Link

Primary

Text LinkInverse Primary Button Text LinkSmall Text Link Text Link Text Link

Secondary

Text LinkSecondary Text Link Text LinkSecondary Text LinkSmall Text Link Text Link

On Inverse

Text LinkText Link On Inverse Text Link

On Accent Primary

Text LinkText Link On Accent Primary Text Link

On Accent Secondary

Text LinkText Link On Accent Secondary Text Link

On Accent Tertiary

Text LinkText Link On Accent Tertiary

Button group

Align Preview

• Align Left Button Group Learn More Learn More

• Align Center Button GroupAlign Center Learn More Learn More

• Align Right Button GroupAlign Right Learn More Learn More

• Vertical Stretch Button GroupVertical Stretch Learn More Learn More

Tag

Choose a Tag Button for tags that link to other content.

Tag

Tag Label

Primary

Tag tag label

Primary Large

TagLarge Tag

Tag / on background

Tag Label On Primary Inverse TagTag On Inverse

Tag Label

On Accent Primary Tag ButtonTag Button On Accent Primary

Tag Label

On Accent Secondary Tag ButtonTag Button On Accent Secondary

Tag Label

On Accent Tertiary Tag ButtonTag Button On Accent Tertiary

Images

Image Fit

Image Contain

Image

Image Cover

ImageCover Image Tip: Add utility class [Utility] Radius All 0 to override rounded corners of the image.

Image Ratio

• Horizontal 16 : 9 [Utility] Aspect 16x9

• Horizontal 3 : 2 [Utility] Aspect 3x2

• Horizontal 4 : 3 [Utility] Aspect 4x3

• Square 1 : 1 [Utility] Aspect 1x1

• Vertical 2 : 2.5 [Utility] Aspect 2x2.5

• Vertical 2 : 3 [Utility] Aspect 2x3

Tip: In the Grid Layout, add an image with the class Image CoverImage inside of Aspect NxN. When applying Aspect NxN as a combo class to the Image CoverImage, it will not preserve the aspect ratio of the image.

Image Ratio / Responsive

Tablet

• Horizontal 3 : 2 [Utility] Tablet Aspect 3x2

• Square 1 : 1 [Utility] Tablet Aspect 1x1

Mobile Landscape

Reset to Auto [Utility] Mobile Landscape Aspect Auto

Icons

Add Icon Container class to any Icon Size to make your icon stand-out more.

• Extra Small
• Small
• Default
• Large
• Extra Large

Icon / with background

• Extra Small
• Small
• Default
• Large
• Extra Large

Icon / on background

• On Inverse
• On Accent Primary
• On Accent Secondary
• On Accent Tertiary

Avatars

• Small Avatar
• Avatar
• Avatar Large

Forms

Title

Preview

• Label
• Input Label
• Name
• Input Field
• Input Select
• Select country: Afghanistan, Akrotiri, Albania, Algeria....

Text Area

• InputText Area
• Checkbox
• Checkbox Toggle

Short sentence

• Radio
• Radio Toggle
• Radio 1

Button

• Button

Success Message

Form Success Message Thank you! Your submission has been received!

Error Message

Form Error Message Oops! Something went wrong while submitting the form.

Title

Preview

Label

Input LabelDark Background

• Name
• Input Field
• Input Select

Text Area

• InputText Area
• CheckboxInverse Checkbox

Short sentence

Short sentence

Radio

Radio ToggleInverse Radio Radio 1

Button

Submit

Cards

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

Size: default, small, large

Place: default, invert, on accent.

Card / On Primary Background

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.

Read post

Default Card

Card

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.

Read post](/content/style-guide#/index.html)

Default Card Link

Card Link

Read post

Card On Primary

Card

Read post

Default Card

Card On 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.

Read post](/content/style-guide#/index.html)

Inverse Card

CardInverse Card

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.

Read post](/content/style-guide#/index.html)

Accordion

Title Preview Accordion Accordion Label Accordion opened

Dropdown

Title Preview Dropdown Accordion Dropdown Accordion opened

Rich Text

Title Preview Rich Text Rich Text

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

Divider

Content Above
Content Below

• Horizontal Primary Divider Content Above
  Content Below

• Horizontal Secondary DividerSecondary Divider Content Above
  Content Below

• Horizontal Accent DividerAccent Divider Content Left Content Right

• Vertical Primary Divider Vertical Content Left Content Right

• Vertical Secondary Divider VerticalSecondary Divider Content Left Content Right

• Vertical Accent Divider VerticalAccent Divider

Page Structure

• Section must use
  semantic tag.
• Class of the section defines the background of the section.
• Text color is defined by nested components, or utility combo classes.

Page

Navigation Section Container Footer Eyebrow Heading of the section Button Primary Button Secondary

Container

Container defines the max width of the content on a page.

Heading of the section

To make the most of the web, we need tools that democratize access to it — i.e., tools that empower creative people to build websites and share their visions with the world.

Grid

Class Grid Layout defines the element as a grid. Different grid layouts can be achieved using combo classes: Grid LayoutDesktop 'X' ColumnTablet 'X' ColumnMobile L 'X' ColumnMobile P 'X' Column

Check examples how to mix combo-classes:

Selectors

Preview

• 1 column grid with small gap Grid LayoutDesktop 1 ColumnGrid Gap XS Content Content

• 2 column grids, mobile landscape 1 column with small gap Grid LayoutMobile Landscape 1 ColumnGrid Gap XS Content Content

• 3 columns grid, less columns on smaller screens with small gap Grid LayoutDesktop 3 ColumnTablet 2 ColumnMobile Portrait 1 ColumnGrid Gap XS Content Content Content

• 5 columns grid, less columns on smaller screens with small gap Grid LayoutDesktop 5 ColumnTablet 3 ColumnMobile Landscape 2 ColumnMobile Portrait 1 ColumnGrid Gap XS Content Content Content Content Content

Flex Layout

Class Flex Horizontal and Flex Vertical defines the element as a flex layout. Modify flex layouts using combo classes:

Flex VerticalFlex Gap M

Check examples how to mix combo-classes:

Spacing

Margin

Margin is space outside of an element.

Content

Padding [Utility] Margin ‘Direction’ ‘Value’

Direction: Top, Bottom, Left, Right
Value: 0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, Auto

• Margin Top 0rem 0.5rem 1rem 2rem 3rem 4rem 5rem 6rem 7rem 8rem
• Margin Bottom 0rem 0.5rem 1rem 2rem 3rem 4rem 5rem 6rem 7rem 8rem
• Margin Right 0rem 0.5rem 1rem 2rem Auto
• Margin Left 0rem 0.5rem 1rem 2rem Auto
• Margin Other [Utility] Margin All 0 [Utility] Margin Left 0.5rem

Padding

Padding is space inside of an element.

Content

Padding [Utility] Padding ‘Direction’ ‘Value’

Direction: Top, Bottom, Left, Right
Value: 0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, Auto

• Padding Top 0rem 0.5rem 1rem 2rem 3rem 4rem 5rem 6rem 7rem 8rem
• Padding Bottom 0rem 0.5rem 1rem 2rem 3rem 4rem 5rem 6rem 7rem 8rem
• Padding Horizontal Padding Right 1rem
• Padding Left 1rem
• Padding All 0rem 0.5rem 1rem 2rem 3rem 4rem

Utility

All utility classes are starting with [Utility]. Utility classes made to alter the the main class.

• Display and overflow
  • Display Block
  • [Utility] Display Block
  • Display Inline Block
  • [Utility] Display Inline Block
  • Display None
  • [Utility] Display None
  • Overflow Hidden
  • [Utility] Overflow Hidden
  • Overflow Visible
  • [Utility] Overflow Visible
  • Overflow Auto
  • [Utility] Overflow Auto

Misc

Invert Color [Utility] Filter Invert Decoration none [Utility] Text Decoration None Backdrop Filter [Utility] Backdrop Filter Blur

Example Image

Feature Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Feature Name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.