Foundations

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

Content

Text Secondary

[Utility] Text Secondary

Content

Text Inverse Primary

[Utility] Text Inverse

Content

Text Inverse Secondary

[Utility] Text Inverse Secondary

Content

Text Accent Primary

[Utility] Text Accent Primary

Content

Text Accent Secondary

[Utility] Text Accent Secondary

Content

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

Typography

Foundation colors is a set of variables that should be applied to components.
Update colors by selecting an element (style panel) or in the variables panel

Fonts

Accent

Preview

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

Learn More Learn More

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

Value

Preview

0.25x

0.25rem

0.5x

0.5rem

0.75x

0.75rem

1rem

1.25x

1.25rem

1.5x

1.5rem

1.75x

1.75rem

2rem

3rem

4rem

5rem

6rem

7rem

8rem

Gap

Set of variables used for grid and flex layouts.

Variable

Preview

XXS Gap

XS Gap

SM Gap

MD Gap

LG Gap

XL Gap

XXL Gap

Structure & Layout

Page Structure

Section must use <section> 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

Section Default

Section

Eyebrow

Heading of the section

Button Primary Button Secondary

Secondary Section

SectionSecondary Section

Eyebrow

Heading of the section

Button Primary Button Secondary

Accent Primary Section

SectionAccent Primary Section

Eyebrow

Heading of the section

Button Primary Button Secondary

Accent Secondary Section

SectionAccent Secondary Section

Eyebrow

Heading of the section

Button Primary Button Secondary

Inverse Section

SectionInverse Section

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.

Default Container

Container

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.

Full Width Container

ContainerFull Width Container

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.

Large Container

SectionLarge Container

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.

Small Container

SectionSmall Container

Navigation

Footer

Section must use <footer> semantic tag.
Class of the section defines how the nested content is going to look like.
Every footer type has a combo class for a footer link.

Default Footer

Footer

Footer Link

Footer Options

Secondary Footer

FooterSecondary Footer

Inverse Footer

FooterInverse Footer

Accent Primary Footer

FooterAccent Primary Footer

Accent Secondary Footer

FooterAccent Secondary Footer

Accent Tertiary Footer

FooterAccent Tertiary Footer

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

2 column grids, mobile landscape 1 column with small gap

Grid LayoutMobile Landscape 1 ColumnGrid Gap XS

Content

3 columns grid, less columns on smaller screens with small gap

Grid LayoutDesktop 3 ColumnTablet 2 Column Mobile Portrait 1 ColumnGrid Gap XS

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

Layout Grid / Responsive

Desktop

1 column

Desktop 1 Column Grid

2 columns

Grid Layout

3 columns

Desktop 3 Column Grid

4 column

Desktop 4 Column Grid

5 column

Desktop 5 Column Grid

6 column

Desktop 6 Column Grid

8 column

Desktop 8 Column Grid

10 column

Desktop 10 Column Grid

12 column

Desktop 12 Column Grid

Tablet

1 column

Tablet 1 Column Grid

2 columns

Tablet 2 Column Grid

3 columns

Tablet 3 Column Grid

4 column

Tablet 4 Column Grid

5 column

Tablet 5 Column Grid

6 column

Tablet 6 Column Grid

Mobile Landscape

1 column

Mobile Landscape 1 Column Grid

2 columns

Mobile Landscape 2 Column Grid

3 columns

Mobile Landscape 3 Column Grid

4 column

Mobile Landscape 4 Column Grid

Mobile Portrait

1 column

Mobile Portrait 1 Column Grid

2 columns

Mobile Portrait 2 Column Grid

3 columns

Mobile Portrait 3 Column Grid

4 column

Mobile Portrait 4 Column Grid

Layout Grid / Spacing

Selectors

Preview

Gap XX Small

Grid LayoutGrid Gap XXS

Content

Gap X Small

Grid LayoutGrid Gap XS

Content

Gap Small

Grid LayoutGrid Gap SM

Content

Gap Medium

Grid LayoutGrid Gap MD

Content

Gap Large

Grid LayoutGrid Gap LG

Content

Gap X Large

Grid LayoutGrid Gap XL

Content

Gap XX Large

Grid LayoutGrid Gap XXL

Content

Layout Grid / Alignment

Content

Horizontal Left

Grid LayoutX Left

Content

Horizontal Center

Grid LayoutX Center

Content

Horizontal Right

Grid LayoutX Right

Content

Vertical Top

Grid LayoutY Top

Content

Vertical Center

Grid LayoutY Center

Content

Vertical Bottom

Grid LayoutY Bottom

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:

Content

Horizontal Direction

Grid LayoutX Center

Content

Vertical Direction

Grid LayoutX Center

Flex / Spacing

Selectors

Preview

Gap XX Small

Flex HorizontalFlex Gap XXS

Content

Gap X Small

Flex HorizontalFlex Gap XS

Content

Gap Small

Flex HorizontalFlex Gap SM

Content

XX Small

Flex HorizontalFlex Gap MD

Content

XX Small

Flex HorizontalFlex Gap LG

Content

Flex Layout / Flex Child

Selectors

Preview

Prevent Shrinking

Flex Child No Shrink

Element with Flex Child No Shrink applied

Element with [Utility] Width 100% applied

Expand

Flex Child Expand

Element with Flex Child Expand applied

Content

Shrink

Flex Child Shrink

Element with [Utility] Width 100% applied

Element with Flex Child Shrink applied

Flex / Horizontal Direction

Content

Align Horizontal Left

Flex HorizontalX Left

Content

Align Horizontal Center

Flex HorizontalX Center

Content

Align Horizontal Right

Flex HorizontalX Right

Content

Align Space Between

Flex HorizontalX Space Between

Content

Flex Wrap

Flex HorizontalFlex Wrap

Content

Align Vertical Top

Flex HorizontalY Top

Content

Align Vertical Center

Flex HorizontalY Center

Content

Align Vertical Bottom

Flex HorizontalY Bottom

Flex / Vertical Direction

Content

Align Horizontal Left

Flex VerticalX Left

Content

Align Horizontal Center

Flex VerticalX Center

Content

Align Horizontal Right

Flex VerticalX Right

Content

Align Vertical Bottom

Flex VerticalY Bottom

Content

Align Vertical Center

Flex VerticalY Center

Content

Expand Horizontally

Flex VerticalX Stretch

Content

Side by Side Vertically

Flex VerticalSpace Between

Flex / Responsive

Tablet

Horizontal direction

Flex HorizontalTablet Flex Horizontal

Vertical direction

Flex HorizontalTablet Flex Vertical

Vertical direction, content align vertically

Flex HorizontalTablet Flex VerticalTablet X Center

Vertical direction, content align horizontally

Flex HorizontalTablet Flex VerticalTablet Y Center

Mobile Landscape

Horizontal direction

Flex HorizontalMobile Landscape Flex Horizontal

Vertical direction

Flex HorizontalMobile Landscape Flex Vertical

Mobile Portrait

Horizontal direction

Flex HorizontalMobile Landscape Flex Horizontal

Vertical direction

Mobile Landscape Flex Vertical

Spacing

Margin

Margin is space outside of an element.

Margin

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

Content

[Utility] Margin Top 0rem

Content

[Utility] Margin Top 0.5rem

Content

[Utility] Margin Top 1rem

Content

[Utility] Margin Top 2rem

Content

[Utility] Margin Top 3rem

Content

[Utility] Margin Top 4rem

Content

[Utility] Margin Top 5rem

Content

[Utility] Margin Top 6rem

Content

[Utility] Margin Top 7rem

Content

[Utility] Margin Top 8rem

Content

[Utility] Margin Top Auto

Margin Bottom

Content

[Utility] Margin Bottom 0rem

Content

[Utility] Margin Bottom 0.5rem

Content

[Utility] Margin Bottom 1rem

Content

[Utility] Margin Bottom 2rem

Content

[Utility] Margin Bottom 3rem

Content

[Utility] Margin Bottom 4rem

Content

[Utility] Margin Bottom 5rem

Content

[Utility] Margin Bottom 6rem

Content

[Utility] Margin Bottom 7rem

Content

[Utility] Margin Bottom 8rem

Content

[Utility] Margin Bottom Auto

Margin Right

Content

[Utility] Margin Right 0rem

Content

[Utility] Margin Right 0.5rem

Content

[Utility] Margin Right 1rem

Content

[Utility] Margin Right 2rem

Content

[Utility] Margin Right Auto

Margin Left

Content

[Utility] Margin Left 0rem

Content

[Utility] Margin Left 0.5rem

Content

[Utility] Margin Left 1rem

Content

[Utility] Margin Left 2rem

Content

[Utility] Margin Left Auto

Margin Other

Content

[Utility] Margin All 0

Content

[Utility] Margin Left 0.5rem

Content

[Utility] Tablet Margin Top 0

Content

[Utility] Mobile L Margin Top 0

Padding

Padding is space inside of an element.

Margin

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

Content

[Utility] Padding Top 0rem

Content

[Utility] Padding Top 0.5rem

Content

[Utility] Padding Top 1rem

Content

[Utility] Padding Top 2rem

Content

[Utility] Padding Top 3rem

Content

[Utility] Padding Top 4rem

Content

[Utility] Padding Top 5rem

Content

[Utility] Padding Top 6rem

Content

[Utility] Padding Top 7rem

Content

[Utility] Padding Top 8rem

Padding Bottom

Content

[Utility] Padding Bottom 0rem

Content

[Utility] Padding Bottom 0.5rem

Content

[Utility] Padding Bottom 1rem

Content

[Utility] Padding Bottom 2rem

Content

[Utility] Padding Bottom 3rem

Content

[Utility] Padding Bottom 4rem

Content

[Utility] Padding Bottom 5rem

Content

[Utility] Padding Bottom 6rem

Content

[Utility] Padding Bottom 7rem

Content

[Utility] Padding Bottom 8rem

Padding Horizontal

Content

[Utility] Padding Right 1rem

Content

[Utility] Padding Left 1rem

Padding All

Content

[Utility] Padding All 0rem

Content

[Utility] Padding All 0.5rem

Content

[Utility] Padding All 1rem

Content

[Utility] Padding All 2rem

Content

[Utility] Padding All 3rem

Content

[Utility] Padding All 4rem

Padding Other

Content

[Utility] Tablet Padding All 0

Content

[Utility] Tablet Padding All 1rem

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

Text for screen readers

[Utility] Screen Reader Visible Only

Hide text visually, but remains for screen readers

Position

Desktop

Position Relative

[Utility] Position Relative

Position Absolute

[Utility] Position Absolute

Position Fixed

[Utility] Position Fixed

Position Fixed

[Utility] Position Fixed

Position Fixed Top

[Utility] Position FixedFixed Top

Position Fixed Left

[Utility] Position FixedFixed Left

Position Fixed Right

[Utility] Position FixedFixed Right

Position Sticky Top

[Utility] Position Sticky

Position Sticky Top on Desktop Only

[Utility] Position StickySticky Desktop

Position Sticky Top 120px

[Utility] Position StickyTop 120

Position Static

[Utility] Position Static

Z Index 1 (2, 3, 4, 5)

[Utility] Z-Index 1

Tablet

Position Absolute

[Utility] Tablet Position Absolute

Position Relative

[Utility] Tablet Position Relative

Position Static

[Utility] Tablet Position Static

Mobile

Position Sticky

[Utility] Position StickySticky Mobile

Transform

Move Up 15%

[Utility] Move Up 15%

Move Up 50%

[Utility] Move Up 50%

Move Down 15%

[Utility] Move Down 15%

Move Down 25%

[Utility] Move Down 25%

Move Down 50%

[Utility] Move Down 50%

Rotate Left 12DEG

[Utility] Rotate -12

Rotate Left 4.5DEG

[Utility] Rotate -4.5

Rotate Right 12DEG

[Utility] Rotate 12

Rotate Right 4.5

[Utility] Rotate 4.5

Width

Desktop

Max Width XS

[Utility] Max Width XS

Max Width SM

[Utility] Max Width SM

Max Width MD

[Utility] Max Width MD

Max Width LG

[Utility] Max Width LG

Width Auto

[Utility] Width Auto

Width SM

[Utility] Width SM

Width MD

[Utility] Width MD

Width 35%

[Utility] Width 35%

Width 40%

[Utility] Width 40%

Width 60%

[Utility] Width 60%

Tablet

Width 50%

[Utility] Tablet Width 50%

Width 60%

[Utility] Tablet Width 60%

Width 100%

[Utility] Tablet Width 100%

Mobile Landscape

Width 70%

[Utility] Mobile Landscape Width 70%

Width 80%

[Utility] Mobile Landscape Width 80%

Width 100%

[Utility] Mobile Landscape Width 100%

Mobile Portrait

Width 100%

[Utility] Mobile Portrait Width 100%

Height

Desktop

Height 100%

[Utility] Height 100%

Min Height 100%

[Utility] Min Height 100%

Height 50 Viewport Height

[Utility] Viewport Height 50

Min Height 100 Viewport Height

[Utility] Viewport Height 100

Tablet

Height Auto

[Utility] Tablet Height Auto

Min Height Auto

[Utility] Tablet Min Height Auto

Border Radius

Radius Card

[Utility] Radius Card

Radius Button

[Utility] Radius Button

Radius Small

[Utility] Radius SM

Radius Medium

[Utility] Radius MD

Radius Large

[Utility] Radius LG

Radius Extra Large

[Utility] Radius XL

Radius All 0

[Utility] Radius All 0

Radius Top 0

[Utility] Radius Top 0

Radius Bottom 0

[Utility] Radius Bottom 0

Radius Top 0

[Utility] Radius Right 0

Radius Left 0

[Utility] Radius Left 0

Misc

Invert Color

[Utility] Filter Invert

Decoration none

[Utility] Text Decoration None

Backdrop Filter

[Utility] Backdrop Filter Blur

Link Block

[Utility] Link Content Block

Mask

Add utility classes [Utility] Mask Top, [Utility] Mask Bottom, [Utility] Mask Left, [Utility] Mask Right as combo class to Overlay to achieve a gradient overlay or to Image to add fade to the side of the image.

Mask Top

[Utility] Mask Top

Mask Bottom

[Utility] Mask Bottom

Mask Left

[Utility] Mask Left

Mask Right

[Utility] Mask Right

Fade on Horizontal Edges

[Utility] Mask Horizontal Fade

Mask Right

[Utility] Mask Vertical Fade

Overlay

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

Dark Overlay

Overlay

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

Light Overlay

OverlayInverse Overlay

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

Gradient Overlay Mask Top

Add utility classes [Utility] Mask Top, [Utility] Mask Bottom, [Utility] Mask Left, [Utility] Mask Right as combo class to Overlay to achieve a gradient overlay.

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

Link Overlay

[Utility] Link Overlay

Link Overlay should be wrapped into an element with position relative.

Effects

Drop Shadow

XX Small

[Utility] Shadow XXS

X Small

[Utility] Shadow XS

Small

[Utility] Shadow SM

Medium

[Utility] Shadow MD

Large

[Utility] Shadow LG

X Large

[Utility] Shadow XL

XX Large

[Utility] Shadow XXL

Gradients

Linear Primary Top

[Utility] Gradient Accent Primary Top

Linear Primary Bottom

[Utility] Gradient Accent Primary Bottom

Radial Primary Top

[Utility] Gradient Accent Primary Radial Top

Radial Primary Bottom

[Utility] Gradient Accent Primary Radial Bottom

Radial Primary Top Left

[Utility] Gradient Accent Primary Top Left

Radial Primary Top Right

[Utility] Gradient Accent Primary Top Right

Radial Primary Bottom Left

[Utility] Gradient Accent Primary Bottom Left

Radial Primary Bottom Right

[Utility] Gradient Accent Primary Bottom Right

Radial Secondary Top

[Utility] Gradient Accent Secondary Radial Top

Radial Secondary Bottom

[Utility] Gradient Accent Secondary Radial Bottom

Linear Secondary Top

[Utility] Gradient Accent Secondary Top

Radial Secondary Top Left

[Utility] Gradient Accent Secondary Top Left

Radial Secondary Top Right

[Utility] Gradient Accent Secondary Right

Linear Secondary Bottom

[Utility] Gradient Accent Secondary Bottom

Radial Secondary Bottom Left

[Utility] Gradient Accent Secondary Bottom Left

Radial Secondary Bottom Right

[Utility] Gradient Accent Secondary Bottom Right

Radial Blend Center

[Utility] Gradient 2 Accent Radial Blend 1

Radial Blend Top Left

[Utility] Gradient 2 Accent Radial Top

Radial Blend Bottom Left

[Utility] Gradient 2 Accent Radial Bottom

Radial Blend Top

[Utility] Gradient 2 Accent Top

Radial Blend Bottom

[Utility] Gradient 2 Accent Bottom

Color

Background color

Text Color

Border

Typography

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

Spacing

Components

Type

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

Buttons

Tag

Images

Icons

Avatars

Forms

Cards

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tabs

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Short heading

Slider

Accordion

Dropdown

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5