Colors

Background Colors

Gray

Gray 1

#fafafa

bg-gray-1

Gray 2

#f3f3f3

bg-gray-2

Gray 3

#dfdfdf

bg-gray-3

Gray 4

#727272

bg-gray-4

Gray 5

#464646

bg-gray-5

Gray 6

#323232

bg-gray-6

Off Whites

Offwhite 1

#fbfbf6

bg-offwhite-1

Offwhite 2

#f5f5eb

bg-offwhite-2

Yellow

Yellow-1

#fef1c2

bg-yellow-1

Yellow 2

#fce288

bg-yellow-2

Yellow 3

#f6d051

bg-yellow-3

Neon Yellow

#EFFF32

bg-neon-yellow

Red

Orange 1

#EB1716

bg-red-1

Orange 2

#FF5E5D

bg-red-2

Orange 3

#FFB5B4

bg-red-3

Orange 4

#FFDADA

bg-red-4

Headings

Base classes

Overview

heading-xxlarge

Heading

heading-xlarge

Heading

heading-large

Heading

heading-medium

Heading

heading-small

Heading

heading-xsmall

Heading

heading-xxsmall

Heading

Texts sizes

Base classes

Overview

text-size-large

Paragraph

text-size-medium

Paragraph

text-size-regular

Paragraph

text-size-small

Paragraph

text-size-xsmall

Paragraph

text-size-xxsmall

Paragraph

Buttons

Base classes

Overview

Border radius

Base classes

Properties

radius-0
border-radius:0px
radius-4
border-radius:4px
radius-8
border-radius:8px
radius-10
border-radius:10px
radius-12
border-radius:12px
radius-16
border-radius:16px
radius-20
border-radius:20px
radius-24
border-radius: 24px
radius-32
border-radius: 30px
radius-40
border-radius: 40px
radius-80
border-radius: 80px
Grid - All break point
To define our 12 column grid, all classes must precede with the initial class of "col"
col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
Grid - Tablet
To define our 12 column grid, all classes must precede with the initial class of "col"
col-md-1
col-md-11
col-md-2
col-md-10
col-md-3
col-md-9
col-md-4
col-md-8
col-md-5
col-md-7
col-md-6
col-md-6
col-md-12
Grid - Landscape
To define our 12 column grid, all classes must precede with the initial class of "col"
col-sm-1
col-sm-11
col-sm-2
col-sm-10
col-sm-3
col-sm-9
col-sm-4
col-sm-8
col-sm-5
col-sm-7
col-sm-6
col-sm-6
col-sm-12
Grid - Portrait
To define our 12 column grid, all classes must precede with the initial class of "col"
col-xs-1
col-xs-11
col-xs-2
col-xs-10
col-xs-3
col-xs-9
col-xs-4
col-xs-8
col-xs-5
col-xs-7
col-xs-6
col-xs-6
col-xs-12
Grid - Justify
To define our 12 column grid, all classes must precede with the initial class of "col"
Justify-end
Justify-center
Justify-start
Justify-space-between
Justify-space-between
Grid - Justify
To define our 12 column grid, all classes must precede with the initial class of "col"
Justify-end
Justify-center
Justify-start
Justify-space-between
Justify-space-between
Grid - Align
To define our 12 column grid, all classes must precede with the initial class of "col"
align-start
align-center
align-end
Flex - Order - md
To define our 12 column grid, all classes must precede with the initial class of "col"
order-md-first
order-md-last
order-md-0
order-md-1
order-md-2
order-md-3
order-md-4
Flex - Order - sm
To define our 12 column grid, all classes must precede with the initial class of "col"
order-sm-first
order-sm-last
order-sm-0
order-sm-1
order-sm-2
order-sm-3
order-sm-4