Visual Brand Guide

 

Typography

We use two typefaces across all media: EB Garamond and Open Sans. EB Garamond should be used for headlines and accents. Open Sans is used for body and general copy, and can be used for other support and accents.

Both fonts are open source and available through Google Fonts.

 

Headline

EB Garamond Semi-Bold 600

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567 “ ” ! @ # $ % ^ & * ( ) _ + : ; < > ?

Subhead

EB Garamond Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567 “ ” ! @ # $ % ^ & * ( ) _ + : ; < > ?

Headline Variations

EB Garamond Regular

Regular 400
Regular 400 italic
Medium 500
Medium 500 italic
Semi-bold 600
Semi-bold 600 italic
Bold 700
Bold 700 italic
Extra-bold 800
Extra-bold 800 italic

Body Copy

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567 “ ” ! @ # $ % ^ & * ( ) _ + : ; < > ?

Body Copy Variations

Open Sans

Light 300

Light 300 italic

Regular 400

Regular 400 italic

Semi-bold 600

Semi-bold 600 italic

Bold 700

Bold 700 italic

Extra-bold 800

Extra-bold 800 italic

 

Color

Our colors are essential to our brand and identity — as much as our logo and type forms. 

Of course, blue is for our blueberries, but Blueberry is also friendly and fun!. Blue can be productive, and community-focused. Blue flows through all we do.


Green is vibrant and verdant, and Spring is for our vitality; we're constantly improving. And, we're resilient. We love life and our people, and we're committed to our collective prosperity.

We're sturdy and trustworthy, and our shades of Brown — Hazel and Mahogany — provide a strong foundation and depth of character. We know our roots and those roots are inclusive, authentic, and confident. 

Primary

#364498
RGB 54, 68, 152

CMYK 64%, 55%, 0%, 40%

HSV 231°, 64%, 60%

HSL 231°, 47%, 41%

Blueberry

#249246
RGB 36, 146, 70
CMYK 75%, 0%, 52%, 43%

HSV 139°, 75%, 57%

HSL 139°, 60%, 35%

Spring

Secondary

#8C4646
RGB 140, 70, 70
CMYK 0%, 50%, 50%, 45%

HSV 0°, 50%, 55%

HSL 0°, 33%, 41%

Hazel

#5F0508
RGB 95, 5, 8
CMYK 0%, 95%, 92%, 63%

HSV 358°, 95%, 37%

HSL 358°, 90%, 19%

Mahogany

Tertiary

#FCE205
RGB 252, 226, 5
CMYK 0%, 10%, 98%, 1%

HSV 54°, 98%, 99%

HSL 54°, 98%, 50%

Bumble Bee

NEUTRAL ACCENTS

#8A8A8A
RGB 138, 138, 138
CMYK 0%, 0%, 0%, 46%
HSV 0°, 0%, 54%
HSL 0°, 0%, 54%

Light

#5C5C5C
RGB 92, 92, 92
CMYK 0%, 0%, 0%, 64%

HSV 0°, 0%, 36%

HSL 0°, 0%, 36%

Medium

#2E2E2E
RGB 46, 46, 46
CMYK 0%, 0%, 0%, 82%

HSV 0°, 0%, 18%

HSL 0°, 0%, 18%

Dark

PROPORTIONATE COLOR APPLICATION

SHADES

Color shades can be made exclusively from the primary and neutral/grey palette colors. While any shade of grey may be used according to design principles, only the percent values specified below may be used for shades of our primary colors.


They can be used as additional accents but should be used sparingly. Example applications include slices in charts and graphs and solid color fields or overlays.

Blueberry

#031165

120%

#5C6ABE

85%

#8391E5

70%

#A9B7FF

55%

Spring

#005F13

120%

#3EAC60

90%

#57C579

80%

#71DF93

70%

 

Identity

Standard Logo

Town_of_Hammonton_Standard.png

Wide

Town_of_Hammonton_Wide.png

For Small Placements...

Avatar
Favicon (mini)
Town_of_Hammonton_Avatar.png
Town_of_Hammonton_Favicon.png

Example logo variations

Approved logo variations are available ...

One-color Black
Town_of_Hammonton_Wide-Black.png
One-color White
Town_of_Hammonton_Wide-White.png
White type "knockout"
Town_of_Hammonton_Wide-White.png

Clearspace Guidelines

Keep clear at least the width of the largest blueberry...

Town_of_Hammonton_Standard---Clearspace.
Town_of_Hammonton_Wide---Clearspace.png

Do's and Don'ts

  • Please do not recreate the logo, mark, logotype, or any of the elements within the identity system. 

  • Do not recreate or adjust the type; each lockup has manually kerned letterspacing.

  • Do not recolor an identity element.

  • Do not stretch, rotate, or skew the identity or type forms.

  • You may scale any element but consider using an identity variation appropriate to the width, height, and scale of the context.

  • Ensure there is appropriate contrast between the identity element and the background.

  • Observe clearspace requirements, regardless of co-branding or context.

  • Do not place art or other typography on top of the logo or mark.

  • A solid white stroke is included around the perimeter of all identity variations. Do not remove or alter this stroke.

Don't do any of these...

Accents, Textures, and Backgrounds

You may be creative with the use of the blueberry artwork as both foreground elements and background textures. Be careful to ensure that any placements provide good visual contrast against typography and conform to WCAG Level 2 compliance to support visually impaired web users.

 

95% transparency against light

Min 85% transparency (this is 90%) against primary or secondary colors

85% transparency for white on light treatment

 

Asset Library

If you have been granted access to the asset library, click the button below to log in. You'll find source EPS files for most artwork as well as high-quality PNG renderings, with transparencies — most are scaled at 2000px wide.

If you'd like access to the library of assets, get in touch...

Contact