colours

Main Text: #323232
blue: #009AC5
dk-blue: #0075A9
pink: #ed54a7
light-grey: #F2F2F2Type

p

font-family: Lato
color: #111
font-size: 17px
font-weight: 400
line-height: 1.6
margin-top: 0px

h1, h2, h3, h5, h6
font-family: Effra
font-weight: 500

h1

font-size: 45px
line-height: 1.05
letter-spacing: 0px
font-weight: 300
margin-bottom: 0.2em

h2

font-size: 28px
line-height: 1.2
margin-bottom: 0.4em
font-weight: 300

h3

font-size: 22px
line-height: 1.38
margin-bottom: 1.2em
margin-top: 0px

h4

font-size: 18px
line-height: 1.38
font-weight: 400

h5

font-size: 16px
line-height: 1.38
margin-bottom: 1.2em

h6

font-size: 14px
.font–s (smaller)
font-size: 14px
line-height: 1.2

.font–l (lighten font)
color: #aaa

.font–b (make font bold)
font-weight: 700

blockquote, q

.drop-cap (georgia)
.drop-cap-2 (baskerville)

Wraps

.wrap
width: 100%

.wrap–x-sm
padding: 10px 0px

.wrap–sm
padding: 50px 0px

.wrap–med
padding: 100px 0px

.wrap–lg
padding: 200px 0px

.wrap–fixed
height: 400px

.bg-grey
background: grey

.bg-pink
background: pink

.bg-blue
background: blue

.bg-blue-dark
background: dark blue

Structure
.container
max-width: 1200px

.width-700 (centred div 700px wide)
max-width: 700px
margin: 0 auto

.alignleft (float left)

.alignright

cards & boxes

.card

.card-2 (shadow)

.card-3

.bordered-card–l (white centre with thick light-grey border)

.bordered-card–r
.box-1

.box-2

.box-3 (pink)

.box-4 (blue)
.left
text-align: left

.right
text-align: right

.txt-white
color: #fff

.txt-side–r
padding-left: 50px

.txt-side–r p
font-size: 20px

.txt-side–l
padding-right: 50px

.txt-side–l p
font-size: 20px

.txt-mid padding: 20px

.txt-mid–sm
max-width: 300px
margin: 0 auto

.centered
text-align: center