Website Style Guide

This is a guide to the fonts, colors, sizing, and spacing used on this website.

Fonts

Merriweather

Quicksand

Colors

#F2E7E3

#F7F1EE

#FBF8F7

#9282A1

#dedae3

#402B2E

#110A0A

Text sizes

(in pixels) 12 • 14 • 16 • 18 • 20 • 24 • 30 • 36 • 48 • 60 • 72

Spacing

(in pixels) 4 • 8 • 12 • 16 • 24 • 32 • 48 • 64 • 96 • 128 • 192 • 256 • 384 • 512 • 640 • 768

Body text

16px • 1.7em line spacing

Sed hendrerit. Nam pretium turpis et arcu. Nunc nec neque. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Aenean imperdiet. Vestibulum ullamcorper mauris at ligula. Sed libero. Aliquam lobortis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Donec mollis hendrerit risus.

Merriweather h1

D–60px • T–48px • M–36px

Merriweather h2

D48px • T—36px • M–30px

Merriweather h3

D—36px • T—30px • M—24px

Merriweather h4

30px

Merriweather h5

D—24px • T—24px • M—20px

Merriweather h6

20px

Quicksand h1

D—60px • M—48px

Quicksand h2

D—48px • M—46px

Quicksand h3

D—36px

Quicksand h4

30px

Quicksand h5

24px

Quicksand h6

20px

Image sizes

Events

800px X 600px, 72 dpi
(This is also the size for the About page repertoire blurbs.)

Testimonial slider

500px X 790px, 72 dpi