Scale

Headings

Class name
Font Size
Line Height
Sample
Heading
XXL
100px
120%

This is Heading (XXL)

Heading
XL
72px
120%

This is Heading (XL)

Heading
L
48px
120%

This is Heading (L)

Heading
M
36px
120%

This is Heading (M)

Heading
SM
24px
120%

This is Heading (SM)

Heading
S
20px
120%

This is Heading (S)

Heading
XS
18px
120%
This is Heading (XS)
Heading
XXS
16px
120%
This is Heading (XXS)

Body text

Class name
Font Size
Line Height
Sample
Body Text
L
18px
150%

This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text
M
16px
150%

This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text
S
14px
150%

This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Components

Rich Text

What’s a Rich Text element?

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.

Static and dynamic content editing

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!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Paragraph

  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text

Tagline
This is a Tagline

Lists

Unordered list
  • This is unordered list Item
  • This is unordered list Item
  • This is unordered list Item
Ordered list
  1. This is unordered list Item
  2. This is unordered list Item
  3. This is unordered list Item
Unordered list with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon

Color Usage

This system uses three main color groups: Neutral, Primary and Secondary plus four feedback related color groups: Success, Warning, Error and Info. You don't have to use nor customize all colors. You can start by adding components to your layout and changing the swatches for this specific components.

Neutral

Neutral colors are mainly used for the interface elements such as texts, dividers, borders and neutral backgrounds.

Primary

A primary color is the color displayed most frequently across the website and components. Primary color group is brand related. It is used for primary and important action and navigation elements such as buttons, links, tabs etc.

Secondary

A secondary color provides more ways to accent and distinguish your UI elements. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Success, Warning, Error and Info

These colors are reserved to communicate feedback.

Use colors from Figma

You can use this section to transfer the color palette from your Figma designs. Replace the image on the right with the Color Grid from Figma. Then use color picker while editing the swatch on the left to get the hex value from the Figma Grid.

Webflow
10
20
30
40
50
60*
70
80
90
100
Neutral
Primary
Secondary
Success
Warning
Error
Info
Figma

Background Colors

To apply color background to an element add a class name related to a specific color. Class names for background colors are constructed like this: C B Neutral-100 (Color Background ColorName-ColorLevel). Below you can see all background color classes available in the system.

Neutral
C B Neutral-10
C B Neutral-20
C B Neutral-30
C B Neutral-40
C B Neutral-50
C B Neutral-60
C B Neutral-70
C B Neutral-80
C B Neutral-90
C B Neutral-100
Primary
C B Primary-10
C B Primary-20
C B Primary-30
C B Primary-40
C B Primary-50
C B Primary-60
C B Primary-70
C B Primary-80
C B Primary-90
C B Primary-100
Secondary
C B Secondary-10
C B Secondary-20
C B Secondary-30
C B Secondary-40
C B Secondary-50
C B Secondary-60
C B Secondary-70
C B Secondary-80
C B Secondary-90
C B Secondary-100
Success
C B Success-10
C B Success-20
C B Success-30
C B Success-40
C B Success-50
C B Success-60
C B Success-70
C B Success-80
C B Success-90
C B Success-100
Warning
C B Warning-10
C B Warning-20
C B Warning-30
C B Warning-40
C B Warning-50
C B Warning-60
C B Warning-70
C B Warning-80
C B Warning-90
C B Warning-100
Error
C B Error-10
C B Error-20
C B Error-30
C B Error-40
C B Error-50
C B Error-60
C B Error-70
C B Error-80
C B Error-90
C B Error-100
Info
C B Info-10
C B Info-20
C B Info-30
C B Info-40
C B Info-50
C B Info-60
C B Info-70
C B Info-80
C B Info-90
C B Info-100

Text Colors

To apply color to a text element add a class name related to a specific color. Class names for text colors are constructed like this: C T Neutral-100 (Color Text ColorName-ColorLevel). Below you can see all text color classes available in the system.

Neutral
C T Neutral-10
C T Neutral-20
C T Neutral-30
C T Neutral-40
C T Neutral-50
C T Neutral-60
C T Neutral-70
C T Neutral-80
C T Neutral-90
C T Neutral-100
Primary
C T Primary-10
C T Primary-20
C T Primary-30
C T Primary-40
C T Primary-50
C T Primary-60
C T Primary-70
C T Primary-80
C T Primary-90
C T Primary-100
Secondary
C T Secondary-10
C T Secondary-20
C T Secondary-30
C T Secondary-40
C T Secondary-50
C T Secondary-60
C T Secondary-70
C T Secondary-80
C T Secondary-90
C T Secondary-100
Success
C T Success-10
C T Success-20
C T Success-30
C T Success-40
C T Success-50
C T Success-60
C T Success-70
C T Success-80
C T Success-90
C T Success-100
Warning
C T Warning-10
C T Warning-20
C T Warning-30
C T Warning-40
C T Warning-50
C T Warning-60
C T Warning-70
C T Warning-80
C T Warning-90
C T Warning-100
Error
C T Error-10
C T Error-20
C T Error-30
C T Error-40
C T Error-50
C T Error-60
C T Error-70
C T Error-80
C T Error-90
C T Error-100
Info
C T Info-10
C T Info-20
C T Info-30
C T Info-40
C T Info-50
C T Info-60
C T Info-70
C T Info-80
C T Info-90
C T Info-100

Best Practices

Page Description

Color can set the basic tone, mood, connotation and conception of a brand or a product. The right choice of color can support better readability of the information.

Video tutorials

Coming soon...

Spacing System

Spacing for components and typography uses increments of 4 pixels. Typography doesn’t use a traditional baseline grid. Instead, line heights are set in increments of 4 px and spacing is measured from the edges of the text box.

Spacing Scale

Use the spacing scale for components or sections. It uses small increments in order to create appropriate spatial relationships for detail-level designs. This scale is applied and used within all components and sections. Spacing available in the system:

  • 0px
  • 4px
  • 8px
  • 12px
  • 16px
  • 24px
  • 32px
  • 48px
  • 64px
  • 128px

You can apply the spacing to your components and sections by adding following spacing classes.

Spacing Classes

To apply the spacing to an element add a class name related to a specific measurement. Class names for spacing are constructed like this: S P T 32 (Spacing Padding Top Value) or S M T 32 (Spacing Margin Top Value).

Check the examples below to learn how to use spacing classes for different breakpoints.

Examples of Padding Classes

Desktop and below:

  • S P 32 (Spacing Padding Value)
  • S P Y 32 (Spacing Padding Y Axis Value)
  • S P X 32 (Spacing Padding X Axis Value)
  • S P T 32 (Spacing Padding Top Value)
  • S P R 32 (Spacing Padding Right Value)
  • S P B 32 (Spacing Padding Bottom Value)
  • S P L 32 (Spacing Padding Left Value)

Tablet and below:

  • ST P 32 (Spacing Padding Value)
  • ST P Y 32 (Spacing Padding Y Axis Value)
  • ST P X 32 (Spacing Padding X Axis Value)
  • ST P T 32 (Spacing Padding Top Value)
  • ST P R 32 (Spacing Padding Right Value)
  • ST P B 32 (Spacing Padding Bottom Value)
  • ST P L 32 (Spacing Padding Left Value)

Mobile Landscape (Horizontal) and below:

  • SH P 32 (Spacing Padding Value)
  • SH P Y 32 (Spacing Padding Y Axis Value)
  • SH P X 32 (Spacing Padding X Axis Value)
  • SH P T 32 (Spacing Padding Top Value)
  • SH P R 32 (Spacing Padding Right Value)
  • SH P B 32 (Spacing Padding Bottom Value)
  • SH P L 32 (Spacing Padding Left Value)

Mobile:

  • SM P 32 (Spacing Padding Value)
  • SM P Y 32 (Spacing Padding Y Axis Value)
  • SM P X 32 (Spacing Padding X Axis Value)
  • SM P T 32 (Spacing Padding Top Value)
  • SM P R 32 (Spacing Padding Right Value)
  • SM P B 32 (Spacing Padding Bottom Value)
  • SM P L 32 (Spacing Padding Left Value)

Examples of Margin Classes

Desktop and below:

  • S M 32 (Spacing Margin Value)
  • S M Y 32 (Spacing Margin Y Axis Value)
  • S M X 32 (Spacing Margin X Axis Value)
  • S M T 32 (Spacing Margin Top Value)
  • S M R 32 (Spacing Margin Right Value)
  • S M B 32 (Spacing Margin Bottom Value)
  • S M L 32 (Spacing Margin Left Value)

Tablet and below:

  • ST M 32 (Spacing Margin Value)
  • ST M Y 32 (Spacing Margin Y Axis Value)
  • ST M X 32 (Spacing Margin X Axis Value)
  • ST M T 32 (Spacing Margin Top Value)
  • ST M R 32 (Spacing Margin Right Value)
  • ST M B 32 (Spacing Margin Bottom Value)
  • ST M L 32 (Spacing Margin Left Value)

Mobile Landscape (Horizontal) and below:

  • SH M 32 (Spacing Margin Value)
  • SH M Y 32 (Spacing Margin Y Axis Value)
  • SH M X 32 (Spacing Margin X Axis Value)
  • SH M T 32 (Spacing Margin Top Value)
  • SH M R 32 (Spacing Margin Right Value)
  • SH M B 32 (Spacing Margin Bottom Value)
  • SH M L 32 (Spacing Margin Left Value)

Mobile:

  • SM M 32 (Spacing Margin Value)
  • SM M Y 32 (Spacing Margin Y Axis Value)
  • SM M X 32 (Spacing Margin X Axis Value)
  • SM M T 32 (Spacing Margin Top Value)
  • SM M R 32 (Spacing Margin Right Value)
  • SM M B 32 (Spacing Margin Bottom Value)
  • SM M L 32 (Spacing Margin Left Value)

Grid

To apply the grid to an element add a class name related to a specific grid settings. Class names for grid are constructed like this: L G 2 Col (Layout Grid 2 Columns)

Check the examples below to learn how to use grid classes.

Examples of Grid Classes:

  • L G 2 Col (Layout Grid 2 Columns)
  • L G 3 Col (Layout Grid 3 Columns)
  • L G 4 Col (Layout Grid 4 Columns)

Grid Behaviour on Mobile Devices

To make sure that the content in grid is properly displayed on mobile devices some grid classes change their layout while in smaller breakpoints. Below you can learn how these classes are affected on smaller breakpoints.

  • L G 2 Col (1 Column on Mobile Landscape and below)
  • L G 3 Col (1 Column on Mobile Landscape and below)
  • L G 4 Col (2 Columns on Tablet, 1 Column on Mobile Landscape and below)

Editing Grid on Mobile Devices

You can easily edit grid to match your needs on mobile devices. Simply add a class to your grid component while working in a specific breakpoint. For example, to change from 4 column grid to 1 column grid on Tablet:

  1. Select your grid component
  2. Change your breakpoint to Tablet
  3. Add a class name - for example LT G 1 Col
  4. Click on Edit Grid
  5. Remove 3 Columns

Best Practices

Page Description

Consistent spacing and layout creates visual balance that makes the user interface easier for users to scan. Apply consistent spacing to improve the quality of the UI.

Video tutorials

Coming soon...

Introduction

This system uses Material Design's icon font. You can access all icons available in the Material Design library without the need to upload SVGs into your assets panel.

Customize

Replacing the icon

  1. Go to https://material.io/resources/icons/
  2. Search for the icon you want to insert
  3. Click on ‘Selected Icon’ in the bottom left corner
  4. Copy icon name
  5. Select the content of the Material Icons class on the canvas (Double-click + Ctrl+A)
  6. Paste the icon name from clipboard

Changing the icon theme

  1. Click on the icon: account_box
  2. Rename Material Icons class to the name of desired theme: Material Icons Outlined , Material Icons Round , Material Icons Sharp or Material Icons Two Tone

Changing the color of the icon

Simply apply the text color class to the icon. For example C T Error-60

Changing the color of two tone icon theme

Coming soon...

Working with the custom icon font

Coming soon...

Best Practices

Video tutorials

Coming soon...