Brand Guide 20191
HI THERE, I'M ANNALISA— I am a junior at the University of Minnesota, and this is my brand guide for the nonprofit, GrowNYC. This was a semester-long project in the Identity and Symbols class. The body copy is set in Mr Eaves San OT 13/16 in Bold and Regular weights. All work is my own, with the exception of the images. Proper credit has been given. I hope you enjoy!
Table of Contents 1 5 7 9 19 21 23 25 29 35
About GrowNYC Tone of Language Our Colors Our Logos Logos and Color Icons and Patterns Typography Photo Direction Printed Materials Digital Materials
Inti st clair, inc.
1
What we stand for GrowNYC’s mission is to improve New York City’s quality of life through environmental programs that transform communities block by block and empower all New Yorkers to secure a clean and healthy environment for future generations. We have a few different programs that encompass the GrowNYC brand, the biggest being the Greenmarkets. There are over 51 Greenmarkets throughout the city held year-round. These markets contain vendors who sell topnotch goods for affordable prices. Their items include fresh, organic produce, baked goods, beauty products, and other handmade goods. Our other programs include sustainability education, community gardening, and waste reduction programming.
2
our creative direction If we were to convey our brand in one word, it would be fresh. The word fresh can contain so many meanings besides the obvious relation to produce. A few of those being new, modern, and innovative. That is what we want to convey to the general public, so we chose a "fresh" creative direction for GrowNYC. Our fresh direction consists of monostroke, rounded lines with no harsh edges to help create a younger, more playful vibe. A bright color palette of hues taken from nature will be paired with off-white creams and dark grays for a lighter, less harsh palette. Our images will be colorful and displaying fresh food, community, and smiles.
3
cash Barkeley, escape maker
4
Tone of language One of the most important non-visual aspects of our brand is the language we use to describe who we are. Below the image to the left is a list of all of the things that our programs aim to communicate. The righthand column is everything we are not. Kate Trysh, Unsplash
5
We are
We are Not
A Community Educational Health-Focused Inclusive Friendly Sustainable
Divided Elitist Discriminatory Exclusive Pushy Greenwashed
The home depot
Technical language In terms of the technical phrasing, please use the following guide for drafting emails, copy, and any other written material for or from the GrowNYC brand. Thank you, not thanks JULY 8, not July 8th SINCERELY, not -Jane Doe We prefer, not we want Greenmarkets, not farmers markets Have not, not haven't 3:00 – 5:00 PM, not 3-5
Charlota Blunarova, Unsplash
6
Spinach (primary)
dark gray
cream creme
TOMATO (primary)
Naturally, our color palette should appear, well, naturally. That is why we have chosen colors that come straight from the earth! Our primary colors of Spinach and Tomato pair well together for most applications. However, if you are feeling colorful, feel free to use our other two secondary colors of Dusty Mint and Mustard. Please never use more than two of our colors at a time, though, with the exception of cream and dark gray.
MUSTARD (secondary)
Dusty Mint (secondary)
7
RGB | 65 64 66 RGB | 240 237 228 HEX | #414042 HEX | #f0ede4 CMYK | 00 00 00 90 CMYK | 05 04 09 00 100% 100%
100%
100%
100%
100%
100%
80%
80%
80%
80%
60%
60%
60%
60%
40%
40%
40%
40%
20%
20%
20%
20%
BLACK AND WHITE? Never heard of it! We at GrowNYC prefer the softer tones of dark gray and cream to black and white to extend our home-grown, friendly vibe! Our paper will be cream-toned, but please use the hex to the left for digital applications.
RGB | 60 124 70 RGB | 206 91 56 RGB | 239 176 67 RGB | 88 163 143 HEX | #3C7C46 HEX | #ce5b38 HEX | #efb043 HEX | #58a38f CMYK | 84 40 96 02 CMYK | 14 77 87 03 CMYK | 05 33 85 00 CMYK | 67 17 50 01 8
the logotype Our classic GrowNYC logotype is curvy, dynamic, and full of movement. This logo can be used across the board for all GrowNYC materials, programs, and designs including the Greenmarket, educational and recycling programs, and our community gardens.
9
x .5x
x x
smallest scale: 22 mm x 13 mm 13 mm 22 mm
10
the monogram Our classic GrowNYC monogram is a branch off of our signature logotype. Please only use this monogram for merchandise and brand materials including stickers, business card usage, envelope closures, and social media profile pictures (Instagram, Facebook, and Twitter). This can be used for all programs, with the exception of the Greenmarkets.
11
x
x x x
smallest scale: 13 mm x 13 mm
x
smallest scale: 6 mm x 9 mm 9 mm
13 mm 6 mm 13 mm
12
The apple logo The first symbol, known as our apple logo, should only be used for one program within GrowNYC, and that is our famous Greenmarkets. They have become so large that they deserve their own mark. The apple icon easily describes the market's purpose while carrying our original logotype. Only this mark and the classic logotype are permitted for Greenmarket usage.
13
x
x
smallest scale: 17 mm x 19 mm 19 mm
17 mm
14
The tree logo This symbol is used for any other GrowNYC program including our sustainability education and gardening programs. It is meant to represent a tree with the stroke, then a building in the negative space below, morphing together nature and city.
15
x
x
smallest scale: 8.5 mm x 9 mm 9 mm 8.5 mm
16
the rules All of our logos were carefully crafted and tailored specifically for the GrowNYC brand. Please use them carefully when creating designed marketing and communication materials. Do not stretch, warp, delete, or alter any parts of our logos in any way. The "x" on the previous gridded structures indicates the cushioning around the logo where no other materials should be. Follow along with the examples below to learn how not to use our precious logos.
Uh oh! This logo has a drop shadow on it. Please stick with the crisp and clean style of GrowNYC and do not use drop shadows on our logos.
Uh oh! This logo has been moved around; please do not more or alter our logos in any way, shape or form. Follow the previous guides if you are unsure.
Uh oh! This logo has been warped badly. Please refrain from warping our logos in any way. Using the png file for logo placement is preferred over ai files.
Uh oh! This logo has been tilted in the wrong direction. Please only use the correct orientation with any of our logos. See the previous guides for help.
17
the rules, continued Uh oh! Please do not use two logos together in such close proximity. On printed materials, at most two logos can be on one page.
Uh oh! Please to not flip the logos in any way. It causes them to look different than intended, and lose their legibility. Stick with the proper orientation.
Uh oh! It appears this logo has been cut in half. When using our logos, please use the full created logo. Chopping it apart is not permitted.
Uh oh! This logo is made of strokes, so to view those beautiful, delicate strokes, please do not add fills to our logos or add unnecessary strokes.
18
Logos and color Feel free to use any of our logotypes, monograms, and symbols with any of the four approved colors; we encourage it. Please be mindful of what you are placing the color logo on, though. All of these logos work great on our cream and kraft papers and on cream digital backgrounds, however, please only use a cream-colored logo/monogram/symbol on dark-colored backgrounds.
19
What's wrong with these? Follow along with the next four examples to figure out exactly what not to do when it comes to our signature logos and colors.
Uh oh! This pure cyan is not one of the approved GrowNYC colors. Please stick to the two primaries, two secondary, cream, and dark gray.
Uh oh! While this monogram is using the approved cream color, the white background is much too light for this color to stand out on. Please use only Spinach, Tomato, Mustard, Dusty Mint, and Dark Gray on light backgrounds.
Uh oh! While the approved Spinach color is being used here, the background is far too dark to handle this color. When using a dark background, please only use the approved cream color.
Uh oh! I'm not quite sure how this one happened, but please, oh please, do not use gradients on any of our logos, regardless of if they include the approved colors. We prefer solid colors!
20
food literacy
greenmarkets
sustainability
urban growth
community
education
science
farming
our icons, crafted with love
100%
100%
Each icon represents a different aspect of our brand and our programs. Icons can be used as decorative elements when creating designed materials, or they can be used on merchandise such as t-shirts, hats, etc. for corresponding programs. When using the icons together, be sure to use them at the same scale, meaning all of the stroke widths are consistent. See the graphic to the left about proper and improper usage
100%
21
120%
WE LOVE PATTERNS! We have one approved pattern design for use with the GrowNYC brand. This pattern contains five of our icons (apple, silverware, text tube, education, and wheelbarrow). They are paired with various dots throughout the design. When using these patterns, please follow the same rules as our logos and color section. On cream backgrounds, use any of our four colors plus dark gray. On dark backgrounds, please only use the approved cream color. Patterns can be reversed or outlined; see below for examples.
reversed, cream on spinach
outlined, spinach on cream
22
typographical hierarchy One of the most important aspects of clear and concise communication is hierarchy. Be sure to use the following guide to organize most written materials for GrowNYC. Some materials only require a subhead and copy. In that case, only use the subhead and body copy fonts. It is not necessary to use all three levels of type for one material.
Lorem Ipsum Dolor Sit Amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, erant appareat accommodare has no, qui ex sumo legimus. Altera quidam deserunt cum eu, vis in temporibus omittantur. Sed ceteros vituperata te, purto modus ex est, no melius denique reprimique per .
Color and Type should you use them together? Color is a wonderful thing and a very important part of our identity, however, please do not use any color in our beautiful type. Please only use our dark gray and our cream for text depending on the background color. Please use the dark grey on light-colored backgrounds and the cream on dark-colored backgrounds.
23
Header Circe Slab A Regular Size: 22 point Leading: 24 point
subhead Mr Eaves San OT Smallcaps Size: 16 point Leading: 17 point
body copy Mr Eaves San OT Book Size: 13 point Leading: 16 point
BAD EXAMPLE SPREAD Oh No, What Are You Doing? Lorem ipsum dolor sit amet, erant appareat accommodare has no, qui ex sumo legimus. Altera quidam deserunt cum eu, vis in temporibus omittantur. Sed ceteros vituperata te, purto modus ex est, no melius denique reprimique per
Uh oh! What happened here? Be sure to follow the correct capitalization and weight for headers and subheads. Here the header should not be in all caps, while the subhead should be in small caps. Make sure to use no color with our type, and make sure to use proper sizing and leading as well. Finally, please left justify all paragraphs and do not indent!
24
Photography is key Our photo direction revolves around a few main components, the highest priority being home-grown food, community interaction, and smiles. We like to display the goods at our Greenmarkets in beautiful ways so we can promote them through our social platforms. Please make sure to always check with the individuals photographed before posting their image anywhere. When it comes to displaying the people who come to our events and run our programs, images displaying community interaction and smiles are key. These photos do not have to be beautifully composed or crafted, we just ask that these images display pure education and happiness. Examples of this could be people exchanging goods at the Greenmarkets or children and adults learning how to grow food in community gardens. We also would like our photos to be all-natural, just like our food! So please refrain from inserting filters over our beautiful images. Editing is allowed, but make the image appear as natural and true to color as possible; this means no black and white images are permitted.
25
Elaine Casap, Unsplash
26
Pixel ratios and why they matter When creating images for social media, please use the correct aspect ratios for that platform. In a quick scroll environment, first impressions matter. We like to maximize every pixel of visible scrolling space, so please use the following correct aspect ratios for our social platforms. For Instagram, use 1080 x 1080 pixels for posts, and 1080 x 1920 for stories. For Facebook, posts use 1200 x 630 pixels, while event cover images use 1920 x 1080. For Twitter, use at least 880 x 440 pixels.
top | 3bl Media Middle | Anne Preble, Unsplash Bottom | Markus Spiske, Unsplash Right | Megan Markham, Unsplash
27
28
annalisa linn marketing director call me email me visit me
541.925.2537 alinn@grownyc.com 100 gold Street, new york, ny
network with confidence Our business cards are minimal and straight to the point. The back of the card will state your name, title, and the various ways people could reach you. The front of the card displays our GrowNYC icons and logo as a visual elevator pitch. They are printed on Neenah 100# Cover in Recycled Natural White in standard business card size (3.5x2"). The cards are available in the two primary color options, Tomato (top) and Spinach (bottom). Please do not print business cards using Dusty Mint or Mustard.
29
annalisa linn marketing director call me email me visit me
541.925.2537 alinn@grownyc.com 100 gold Street, new york, ny
2 inches
3.5 inches
30
GrowNYC 541.925.2573 100 Gold Street, new York, nY 10111
october 30, 2019 Jane Doe 123 fake avenue new York, nY 10111
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Massa enim nec dui nunc. Tortor id aliquet lectus proin. Cras adipiscing enim eu turpis egestas pretium aenean. Etiam tempor orci eu lobortis. Nunc lobortis mattis aliquam faucibus purus in massa. Dignissim suspendisse in est ante. Morbi tincidunt ornare massa eget egestas purus. At ultrices mi tempus imperdiet. Eu augue ut lectus arcu bibendum at varius. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Ullamcorper dignissim cras tincidunt lobortis feugiat.Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Eleifend donec pretium vulputate sapien. Magna etiam tempor orci eu lobortis elementum nibh. Elementum sagittis vitae et leo duis. Enim praesent elementum facilisis leo vel fringilla est. Congue mauris rhoncus aenean vel. Purus sit amet luctus venenatis lectus magna fringilla urna. Eu augue ut lectus arcu bibendum at varius. Amet porttitor eget dolor morbi non arcu. Pellentesque elit ullamcorper dignissim cras tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Euismod lacinia at quis risus. Sed vulputate mi sit amet mauris commodo quis. Nam aliquam sem et tortor consequat id. Id diam vel quam elementum pulvinar etiam non quam lacus. Viverra adipiscing at in tellus integer. Thank you, Annalisa Linn
Let's talk about letterhead The top quarter of the letterhead will be pre-printed in the same two color options as the business cards (Tomato and Spinach). Circe Slab A will be used for the names only (recipients name/your name at the end). Mr. Eaves San OT Bool in small caps will be used for the date and the recipient's address. For the body copy, use Mr. Eaves San OT Book in 14 point with 16 point leading. The paragraphs will be left-justified and allowing for hyphenation. Letterhead will be printed on Natural Ivory text weight paper at 8.5x11".
31
GrowNYC 541.925.2573 100 Gold Street, new York, nY 10111
october 30, 2019 Jane Doe 123 fake avenue new York, nY 10111
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer enim neque volutpat ac tincidunt vitae semper quis lectus. Massa enim nec dui nunc. Tortor id aliquet lectus proin. Cras adipiscing enim eu turpis egestas pretium aenean. Etiam tempor orci eu lobortis. Nunc lobortis mattis aliquam faucibus purus in massa. Dignissim suspendisse in est ante. Morbi tincidunt ornare massa eget egestas purus. At ultrices mi tempus imperdiet. Eu augue ut lectus arcu bibendum at varius. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Ullamcorper dignissim cras tincidunt lobortis feugiat.Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Eleifend donec pretium vulputate sapien. Magna etiam tempor orci eu lobortis elementum nibh. Elementum sagittis vitae et leo duis. Enim praesent elementum facilisis leo vel fringilla est. Congue mauris rhoncus aenean vel.
11 inches
Purus sit amet luctus venenatis lectus magna fringilla urna. Eu augue ut lectus arcu bibendum at varius. Amet porttitor eget dolor morbi non arcu. Pellentesque elit ullamcorper dignissim cras tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Euismod lacinia at quis risus. Sed vulputate mi sit amet mauris commodo quis. Nam aliquam sem et tortor consequat id. Id diam vel quam elementum pulvinar etiam non quam lacus. Viverra adipiscing at in tellus integer. Thank you, Annalisa Linn
8.5 inches
32
First impressions matter: envelopes A fair amount of time, the envelope is the first introduction to a brand. With that in mind, we wanted to display our brand in a very visual way. The chosen paper is very reminiscent of nature, and it is paired with our apple icon, displaying the nature of the program (growth, food) as well as the location (Big Apple). In the upper-lefthand corner of the front of the envelope, the logotype and address of our corporate office are printed in our Spinach green. The recipient of the letter will be handwritten in the center of the envelope, and the stamp will be placed in the upper-righthand corner. The back is sealed with our sticker monogram. Envelopes are 9x4" made from French Speckletone 60# Cover paper in Kraft.
33
100 Gold Street, New York, NY 10111
34
Greenmarket
Recycle
Education
About
Donate
Project Farmhouse
Join us for our November Greenmarkets! November 2, 9, 16, 23, aNd 30 Browse our vendors and learn what’s in season this month. We’re open every Saturday of the month; rain, snow, or shine!
Greenmarket
Recycle
Education
About
Donate
Project Farmhouse
food literaCY
GreeNmarkets
sustaiNabilitY
urbaN Growth
CommuNitY
eduCatioN
sustaiNabilitY
farmiNG
About Us
Grow NYC was built bY the people, for the people. Our mission is to improve New York City’s quality of life through environmental programs that transform communities block by block and empower all New Yorkers to secure a clean and healthy environment for future generations. Click on an icon to learn more!
35
Web interface We want our online materials to convey our brand to a T. We achieve that by putting it all together. This means that our digital materials are a combination of our logos, colors, typefaces, images, patterns, animation, and even videos. Our website is split into three different sections. The top section is the navigation bar (2400 x 225 pixels). This is where people can click on different areas on the website. The second section is the left third of the page (1020 x 1275 pixels). This area will consist of scrolling images from our social media tags, to show what's happening in our community. The left two-thirds of the page (1380 x 1275 pixels) will consist of information specifically about that page. The underlined type in the navigation bar indicates the currently selected page. Use the same color palette, type treatments, and image direction to supplement the design of the web pages.
36