Style Guide

Our style guide helps simplify the building process for your website. It serves as a centralized reference for design elements such as typography, color palettes, icons, columns system and more.

01

fonts

h1

Heading

h2

Heading

h3

Heading

h4

Heading

h5

Heading

h6

Heading

P

Jim, you’re 6’11 and you weigh 90 pounds. Gumby has a better body than you. Boom, roasted. Dwight, you’re a kiss ass. Boom, roasted. Pam, you failed art school. Boom, roasted. Meredith, you’ve slept with so many guys, you’re starting to look like one. Boom, roasted. Kevin, I can’t decide between a fat joke and a dumb joke. Boom, roasted. Creed, your teeth called, your breath stinks. Boom, roasted.

P small

Jim, you’re 6’11 and you weigh 90 pounds. Gumby has a better body than you. Boom, roasted. Dwight, you’re a kiss ass. Boom, roasted. Pam, you failed art school. Boom, roasted. Meredith, you’ve slept with so many guys, you’re starting to look like one. Boom, roasted. Kevin, I can’t decide between a fat joke and a dumb joke. Boom, roasted. Creed, your teeth called, your breath stinks. Boom, roasted.

P large

large text

p grey

Jim, you’re 6’11 and you weigh 90 pounds. Gumby has a better body than you. Boom, roasted. Dwight, you’re a kiss ass. Boom, roasted. Pam, you failed art school. Boom, roasted. Meredith, you’ve slept with so many guys, you’re starting to look like one. Boom, roasted. Kevin, I can’t decide between a fat joke and a dumb joke. Boom, roasted. Creed, your teeth called, your breath stinks. Boom, roasted.

link

This is a link

02

colors

Black 100

#000000

White 100

#FFFFFF

Grey 100

#808080

03

buttons

Main button

Secondary button

Project

Tertiary button

04

cookies

This website use cookies for analytic purposes

Accept

Deny

05

form

Form Label

Thank you! Your submission has been received.

Error message

grid system

01

container

container

02

row

col

03

column

col

col

col

col

04

desktop

COL-LG-12

COL-LG-11

COL-LG-1

COL-LG-10

COL-LG-2

COL-LG-9

COL-LG-3

COL-LG-8

COL-LG-4

COL-LG-7

COL-LG-5

COL-LG-6

COL-LG-6

05

tablet

COL-MD-12

COL-MD-11

COL-MD-1

COL-MD-10

COL-MD-2

COL-MD-9

COL-MD-3

COL-md-8

COL-md-4

COL-md-7

COL-md-5

COL-md-6

COL-md-6

md-n0-margin

06

mobile

COL-xs-12

COL-xs-11

COL-xs-1

COL-xs-10

COL-xs-2

COL-xs-9

COL-xs-3

COL-xs-8

COL-xs-4

COL-xs-7

COL-xs-5

COL-xs-6

COL-xs-6

xs-no-margin

07

margin

ML-1-COL

ml-2-col

Mr-1-COL

Mr-2-COL

08

properties

align-start

align-center

align-end

align-stretch

justify-start

justify-center

justify-end

justify-between

justify-between

justify-end

justify-end

09

display

md--HIDE

SM--HIDE

XS--HIDE