Internal Style Guide - Colonial Surety Company

navy-80

#030F35

navy-70

#303A5D

navy-60

#5D6584

navy-50

#8C92AD

navy-40

#A3A8BD

navy-30

#BABECE

navy-20

#D1D3DE

navy-10

#E8E9EF

navy-05

#F9FAFB

yellow-60

#E3A81E

yellow-50

#F9BC01

yellow-40

#FAC934

yellow-30

#FBD767

aqua-60

#566883

aqua-20

#D9E2ED

aqua-5

#EEF5FD

french-blue-60

#4768CC

french-blue-50

#5982FF

cherry-50

#FF0000

green-50

#007C48

green-10

#E6F4EC

gray-divider

#DBDFE0

black

#000000

white

#FFFFFF

light-gray

#F4F4F4

medium-gray

#EAEAEA

Lorem ipsum dolor sit amet.

hero-lg

Lorem ipsum dolor sit amet.

hero-page

Lorem ipsum dolor sit amet.

display-lg

Lorem ipsum dolor sit amet.

display-md

Lorem ipsum dolor sit amet.

display-sm

Lorem ipsum dolor sit amet.

display-xs

menu

Lorem ipsum dolor sit amet.

eyebrow

Lorem ipsum dolor sit amet.

h1

Lorem ipsum dolor sit amet.

h2

Lorem ipsum dolor sit amet.

h3

Lorem ipsum dolor sit amet.

h4

Lorem ipsum dolor sit amet.

h5

Lorem ipsum dolor sit amet.

h6

Lorem ipsum dolor sit amet.

h7

Lorem ipsum dolor sit amet.

h8

Lorem ipsum dolor sit amet.

body-lg

Lorem ipsum dolor sit amet.

body

Lorem ipsum dolor sit amet.

body-sm

Lorem ipsum dolor sit amet.

article-lg

Lorem ipsum dolor sit amet.

article

Lorem ipsum dolor sit amet.

btn-lg-primary

Lorem ipsum dolor sit amet.

btn-lg-secondary

Lorem ipsum dolor sit amet.

btn-md-primary

Lorem ipsum dolor sit amet.

btn-md-secondary

Lorem ipsum dolor sit amet.

btn-md-tertiary

Lorem ipsum dolor sit amet.

btn-sm

breadcrumb-lg

breadcrumb-sm

Lorem ipsum dolor sit amet.

label

Lorem ipsum dolor sit amet.

helper

Lorem ipsum dolor sit amet.

input-inactive

Lorem ipsum dolor sit amet.

input-active

This should use the default proper styles as well!