style guide

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

button

Button Button

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-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-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-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-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

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

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