Design

Scale

Headings

Class name
Font Size
Line Height
Sample
Heading
XL
38px (2.375rem)
1.25

This is Extra Large (XL) Heading

Heading
L
32px (2rem)
1.25

This is Large (L) Heading

Heading
M
24px (1.5rem)
1.25

This is Medium (M) Heading

Heading
S
20px (1.25rem)
1.5

This is Small (S) Heading

Heading
XS
18px (1.125rem)
1.5
This is Extra Small (XS) Heading
Heading
XXS
16px (1rem)
1.5
This is Extra Extra Small (XXS) Heading

Body text

Class name
Font Size
Line Height
Sample
Body Text
L
18px (1.125rem)
1.75

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

Body Text
M
16px (1rem)
1.5

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

Body Text
S
14px (0.875rem)
1.5

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

This is Heading 3

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals

Tagline
This is a Tagline
Text Wrapper
This is a Tagline

This is Large (L) Heading

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

Button Text
Button text
Text Wrapper Centered
This is a Tagline

This is Large (L) Heading

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

Button Text
Button text

Lists

Unordered list
  • This is an unordered list item
  • This is anunordered list item
  • This is anunordered list item
Ordered list
  1. This is an ordered list item
  2. This is an ordered list item
  3. This is an ordered 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
Horizontal list
  • 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

Alignment

You can set alignment for text elements by adding a class name from below.

T A L
This is some text inside of a div block.
T A C
This is some text inside of a div block.
T A R
This is some text inside of a div block.
T A J
This is some text inside of a div block.

Best Practices

Page Description

Typography can help create clear hierarchies, organize information, and guide users through a product or experience. Typography consists of basic text writing, including headings, body text, lists, and more.

Font size and REMs

SystemFlow's typography system is based on REMs. REM values are relative to the root html element. Base font sizes for different viewports are specified in Custom Code (must be on every page) symbol inside Responsive Typography Embed.

REMs to Pixels

Let's take Heading / L as an example. It's font-font size is set to 2rem. Base font size on desktop is set to 16px. That means Heading / L is 32px (16px*2=32px). Base font size for tablet viewports is set to 15px so Heading / L will be 30px on Tablets etc. If you will change the font size of Heading / L from 2rem to 2.5rem then it will be: Desktop: 16px*2.5=40px, Tablet: 15px*2.5=37.5px etc. You can use this calculator to easily calculate rems to pixels.

Changing base font size on different viewports

  1. Go to navigator (z)
  2. Open Custom Code (must be on every page) symbol
  3. Open Responsive Typography Embed code editor
  4. Change px values for different devices. If you will change the font-size of Desktop viewport from 16px to 18px the base font will be 18px and all rem values will be multiplied by 18. For example: 2rem will be 18*2=36px.

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

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.

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

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.

Icons

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

Changing the color of the icon

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

Icon Components

Feature Icon
star
Feature Icon Small
star
© X systemflow.co - All rights reserved.
Designed with ❤️ by Matt Wierzbicki & Greg Rog.
arrow_upward