Style Guide

Predefined colors from CDG Style Guide, and one created (Purple).

Red – Source – 6f1200

Yellow – Source – bc8d0a

Blue – Source – 002d56

Green – Source – 3a4c00

Purple – created – 3c003d

Note:
Will also use #121212 for black (text).

The Red and Yellow are in the logo. In the old website the Red is used extensively as a background for numerous elements, with the Blue and Yellow as secondary and tertiary colors.

Blue is used as a background color in various elements with white text and the Yellow is used for links. The Green is in the style guide provided from the city, it’s really not used at all in the old website.

Red – Source – 6f1200

Red 2 created – 8c4133

Red 3 created – a97166

Red 4 created – c5a099

Red 5 created – e2d0cc

Red – Source+1 – 8f1800

Red 2 created – a54633

Red 3 created – bc7466

Red 4 created – d2a399

Red 5 created – e9d1cc

Red – Source+2 – a31b00

Red 2 created – b54933

Red 3 created – c87666

Red 4 created – daa499

Red 5 created – edd1cc

Yellow – Source – bc8d0a

Yellow 2 created – c9a43b

Yellow 3 created – d7bb6c

Yellow 4 created -e4d19d

Yellow 5 created – f2e8ce

Yellow – Source+1 – D59F0B

Yellow 2 created – DDB23C

Yellow 3 created – E6C56D

Yellow 4 created -EED99D

Yellow 5 created – F7ECCE

Yellow – Source+2 – E9AE0C

Yellow 2 created – EDBE3D

Yellow 3 created – F2CE6D

Yellow 4 created -F6DF9E

Yellow 5 created – FBEFCE

Blue – Source – 002d56

Blue 2 created – 335778

Blue 3 created – 66819a

Blue 4 created – 99abbb

Blue 5 created – ccd5dd

Blue – Source+1 – 003f7a

Blue 2 created – 336595

Blue 3 created – 668caf

Blue 4 created – 99b2ca

Blue 5 created – ccd9e4

Blue – Source+2 – 004A8F

Blue 2 created – 336ea5

Blue 3 created – 6692bc

Blue 4 created – 99b7d2

Blue 5 created – ccdbe9

Green – Source – 3a4c00

Green 2 created – 617033

Green 3 created – 899466

Green 4 created – b0b799

Green 5 created – d8dbcc

Green – Source+1 – 4e6600

Green 2 created – 718533

Green 3 created – 95a366

Green 4 created – b2c299

Green 5 created – dce0cc

Green – Source+2 – 5e7a00

Green 2 created – 7e9533

Green 3 created – 9eaf66

Green 4 created – bfca99

Green 5 created – dfe4cc

Purple – created – 3c003d

Purple 2 created – 633364

Purple 3 created – 8a668b

Purple 4 created – b199b1

Purple 5 created – d8ccd8

Purple – created+1 – 500052

Purple 2 created – 733375

Purple 3 created – 966697

Purple 4 created – b999ba

Purple 5 created – dcccdc

Purple – created+2 – 640066

Purple 2 created – 833385

Purple 3 created – a266a3

Purple 4 created – c199c2

Purple 5 created – e0cce0


Typography

Montserrat for headings and Open Sans for body copy.

64 point – bold
32 point – regular
20 point – regular

Headings

Montserrat is used for all Headings. The design refresh needs a more modern look, using a clean sans serif font helps this.

Second choice was using Merriweather serif for H1, H2, H3 and Montserrat for H4, H5, H6.
(Merriweather serif matches the logo, Montserrat reads better at smaller sizes.)

A distant third was using Merriweather Sans for the headings as it also is harder to read as it gets smaller (the kerning is too tight and the font weight is too heavy).

H1 – Heading 1 – This is heading number 1

H2 – Heading 2 – This is heading number 2

H3 – Heading 3 – This is heading number 3

H4 – Heading 4 – This is heading number 4

H5 – Heading 5 – This is heading number 5
H6 – Heading 6 – This is heading number 6

Body

Open Sans will be used for all of the body copy.

Rubik and Inter were almost tied with the edge going to Rubik for second place and Inter with third.

Montserrat was also considered, but, it’s nearly equal kearning between letters, and higher letter height worked against it for readability in paragraph format, which also meant that it needed more space on the screen for the same number of words.


More Info On Source And Created Colors

Branding Document from City of Mount Vernon:
red: #6f1200 (tetradic created: blue – #005D6F) (monochromatic created: #A21A00)
Yellow: #bc8d0a (mono: ECB10D)(analog: BC340A)
Green: #3a4c00 (tetra: 004C38, 4C0014)(triad: 003A4C, 4C003A)(analog: 144C00, 4C3800)
Blue: #002d56 (comp: 562900)(mono: 004889)(analog: 005654)(triad: 56002D, 2D5600)(tetra: 540056, 562900, 025600)

The logos I’ve got produce these sets of colors with my color palette generator:

The main logo:
Pirate Gold: #B38304
Red Oxide: #630404
Peru Tan: #803004
Oregon: #8C4404
— Dark Burgundy: #701604
— Totem Pole: #942F04
— Chelsea Gem: #945404

Other tiles:
1) MV After Dark
— Green Vogue: #042B53
—— or use Madison: #082C54 (preferred slightly)
— Dark Burgandy: #6C1304
— Tamarind: #1B0A18
— Cocoa Bean: #4E1C1C
2) Color swatch from City of Mount Vernon Brand Guidelines document
— Birch: #363127
— Grain Brown: #DED1AF
— Silver Chalice: #A6A6A6
— Oslo Gray: #8E9091
3) MVAAC Logo
— Blackcurrant: #342B3D
— Pampas: #EEEBE7 (nice white alt background)
— Cadet Blue: #A3B7C6
— Bali Hai: #7C94AE (nice old tyme light blue)
4) Uptown Thursday Nights
— Green Kelp: #2E4629
— Green White: #E4E8DD
— Bermuda Gray: #718BA3 (nice light old tyme blue)
— Green Smoke: #9CAC79 (cheerful light green)
5) Heritage Days
— Dark Burgundy: #6B1404
— Blue Whale: #042B50
— Pirate Gold: #B17F04
— Yukon Gold: #7A6204
Misc colors:
— Wine Berry: #5C1830
— Alpine: #BA8E30 (nicer version of primary yellow)
— Sage: #959878
— Burnt Orange: #E28D3B
— Scarlet: #C13004
— Rodeo Dust: #C8AE95
— Sage: #8FA680
— Lynch: #6C7494 (blue periwinkle – less purple)
— Edward: #AAAEAA (gray sage)