Brand Colors - Primary

Main Color - 1

This is some text inside of a div block.

Main Color - 2

This is some text inside of a div block.

Main Color - 3

This is some text inside of a div block.

Main Color - 4

This is some text inside of a div block.

Main Color - 5

This is some text inside of a div block.

Main Color - 6

This is some text inside of a div block.

Main Color - 7

This is some text inside of a div block.

Main Color - 8

This is some text inside of a div block.

Brand Colors - Secondary

Secondary Color - 1

This is some text inside of a div block.

Secondary Color - 2

This is some text inside of a div block.

Secondary Color - 3

This is some text inside of a div block.

Secondary Color - 4

This is some text inside of a div block.

Secondary Color - 5

This is some text inside of a div block.

Secondary Color - 6

This is some text inside of a div block.

Secondary Color - 7

This is some text inside of a div block.

Secondary Color - 8

This is some text inside of a div block.

Brand Colors - Grayscale

Black

This is some text inside of a div block.

White

This is some text inside of a div block.

Dark 800

This is some text inside of a div block.

Dark 700

This is some text inside of a div block.

Dark 600

This is some text inside of a div block.

Dark 500

This is some text inside of a div block.

Dark 400

This is some text inside of a div block.

Light 500

This is some text inside of a div block.

Light 600

This is some text inside of a div block.

Light 700

This is some text inside of a div block.

Light 800

This is some text inside of a div block.

Light 900

This is some text inside of a div block.

UI Colors - Background Colors

background - light

background - dark

background - brand 1

background - brand 2

background - brand 3

background - brand 4

background - brand 5

background - brand 6

UI Colors - Buttons

Primary

Primary button - BG

Primary button - Text

Primary button - Hover

Primary button - Hover text

Secondary

Secondary button - BG

Secondary button - Text

Secondary button - Hover

Secondary button - Hover text

Border

Border button - BG

Border button - Text

Border button - Hover

Border button - Hover text

Border button - Border color

UI Colors - Text links

Link - primary

Link - secondary

Link - white

Link - alternative

UI Colors - Border

Border - primary

Border - secondary

Border - alternate

UI Colors - Text colors

Text - primary

Text - secondary

Text - white

Text - alternative

Logo

Logo symbol

Headings

70

54

48

34

28

25

20

Text Sizes

text-size-display

text-size-large

text-size-medium

text-size-regular

text-size-small

text-size-tiny

text-size-xtiny

Text Styles

text-link

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

text-muted

Muted

text-weight-light

Light

text-weight-normal

Normal

text-weight-medium

Medium

text-weight-bold

Bold

text-weight-xbold

Black

Icons

Item / Icon

icon-small

icon-regular

icon-large

Buttons

Component Based

Button

Button with icon

Button

Button / Secondary

Button

Button / Secondary / Small

Button

Class Based

button

Button

button

is-small

Button

button

is-secondary

Button

button

is-secondary

is-small

Button

Component Based

Button / Alt

Button

Button / Alt / Small

Button

Button / Alt / Secondary

Button

Button / Alt / Secondary / Small

Button

Class Based

button

is-alternate

Button

button

is-alternate

is-small

Button

button

is-secondary

is-alternate

Button

button

is-secondary

is-small

is-alternate

Button

Structure

page

main

section

container

Other UI Elements

tab-link

category-filter-link

slider-arrow

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

This is a link inside of a rich text

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.

List item
List item
List item

List item
List item
List item

Other HTML Tags

All Paragraphs

All Links

All Block Quotes

Block Quote
xx

All Unordered Lists

No bullet list
No bullet list

All Unordered Lists

Bulleted list
Bulleted list

All Ordered Lists

Ordered list
Ordered list
Ordered list

Utility classes

Utility / Text Styles

text-italic

text-strikethrough

text-allcaps

text-nowrap

text-link

text-2lines

text-3lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-muted

Utility / Text Weights

text-weight-xbold

text-weight-xbold (800)

text-weight-bold

text-weight-bold (700)

text-weight-semibold

text-weight-semibold (600)

text-weight-medium

text-weight-medium (500)

text-weight-normal

text-weight-normal (400)

text-weight-light

text-weight-light (300)

Utility / Text Alignment

text-align-left

text-align-center

text-align-right

Utility / Grid and group

grid

grid-2

grid-3

grid-4

grid-autofit

grid-autofill

item-group

column-span-custom

column-span-full

column-span-indent

column-span-1

column-span-2

column-span-3

column-span-4

column-span-5

column-span-6

column-span-7

column-span-8

column-span-9

column-span-10

column-span-11

column-span-12

align-items-start

align-items-center

align-items-end

align-items-stretch

justify-content-start

justify-content-center

justify-content-end

Utility / Flex

flex-row-left-top

flex-row-left-center

flex-row-left-bottom

flex-row-left-stretch

flex-row-center-top

flex-row-center-center

flex-row-center-bottom

flex-row-center-stretch

flex-row-right-top

flex-row-between-top

flex-row-right-center

flex-row-between-center

flex-row-right-bottom

flex-row-between-bottom

flex-row-right-stretch

flex-row-between-stretch

flex-column-left-top

flex-column-center-top

flex-column-right-top

flex-column-stretch-top

flex-column-left-center

flex-column-center-center

flex-column-right-center

flex-column-stretch-center

flex-column-left-bottom

flex-column-left-between

flex-column-center-bottom

flex-column-center-between

flex-column-right-bottom

flex-column-right-between

flex-column-stretch-bottom

flex-column-stretch-between

flex-row-wrap

flex-column-wrap

gap-xsmall

gap-small

gap-regular

gap-medium

gap-mediumlarge

gap-large

gap-xlarge

gap-row-xsmall

gap-row-small

gap-row-regular

gap-row-medium

gap-row-mediumlarge

gap-row-large

gap-row-xlarge

justify-content-around

justify-content-between

justify-content-start

justify-content-center

justify-content-end

align-items-stretch

align-items-start

align-items-center

align-items-end

align-self-auto

align-self-start

align-self-center

align-self-end

align-self-stretch

justify-self-auto

justify-self-start

justify-self-center

justify-self-end

justify-self-stretch

Utility / Width full

width-full

width-full_tablet

width-full_mobile

Utility / Max width

max-width-10ch

max-width-12ch

max-width-14ch

max-width-18ch

max-width-20ch

max-width-30ch

max-width-40ch

max-width-50ch

max-width-60ch

max-width-70ch

max-width-80ch

max-width-none

Utility / Others

hide

This element is hidden

hide_tablet

hide_mobile

overflow-visible

overflow-hidden

overflow-auto

overflow-scroll

pointer-events-auto

pointer-events-none

layer

image

spacing-clean

align-center

z-index-1

z-index-2

margin-top-auto

margin-bottom-auto

ratio-square

ratio-custom

width-full

height-full

card-small

card-regular

Padding / Top

padding-0

padding-top-5px

padding-top-10px

padding-top-15px

padding-top-20px

padding-top-25px

padding-top-30px

padding-top-40px

padding-top-50px

padding-top-60px

padding-top-70px

padding-top-80px

padding-top-90px

padding-top-100px

padding-top-110px

padding-top-120px

padding-top-140px

padding-top-160px

padding-top-180px

padding-top-200px

padding-top-220px

Padding / Bottom

padding-0

padding-bottom-5px

padding-bottom-10px

padding-bottom-15px

padding-bottom-20px

padding-bottom-25px

padding-bottom-30px

padding-bottom-40px

padding-bottom-50px

padding-bottom-60px

padding-bottom-70px

padding-bottom-80px

padding-bottom-90px

padding-bottom-100px

padding-bottom-110px

padding-bottom-120px

padding-bottom-140px

padding-bottom-160px

padding-bottom-180px

padding-bottom-200px

padding-bottom-220px

Margin / Bottom

margin-0

margin-bottom-5px

margin-bottom-10px

margin-bottom-15px

margin-bottom-20px

margin-bottom-25px

margin-bottom-30px

margin-bottom-40px

margin-bottom-50px

margin-bottom-60px

margin-bottom-70px

margin-bottom-80px

margin-bottom-90px

margin-bottom-100px

margin-bottom-110px

margin-bottom-120px

margin-bottom-140px

margin-bottom-160px

margin-bottom-180px

margin-bottom-200px

margin-bottom-220px