A clear goal needs consistent communication. We prioritize consistency in both our visual and verbal approach to best communicate with our ideal users. This is a living, breathing guide that will keep you up to date on the rules for staying true to our message and design.
Our entire primary hierarchy is based around multiples of 4.
For the web, we use REM calculations based on a value of 16px (or 100% brower default)
Our logomark is a cornerstone of our brand and identity, and provides the foundation for many other visual elements found throughout the brand and interactions.
All proportional elements
The horizontal lockup of the logo is primarily used. GoodUnited should always be 50% of the logo, from cap to baseline.
The GoodUnited Horizontal lockup maintains the same proportional rules as other lockups, but “U” of the logo is perfectly centered to the U in United on the text lockup. The center is also perfectly aligned to the hard edge of the G.
When space is available for ample visibility, use the "Raise Your Relationships" variant of our logo.
Clearspace around the logo is always equal to 50% of the “G” or “U”
The monochrome GoodUnited logo is used to place in situations where color contrast is a problem for the main logo. We use various % opacity elements to differentiate the “G” from the “U”.
The logo placement depends on the type of communication and use. Placement is versatile, but take care to adhere to the rules of spacing of both the medium and the logo.
Aligning partnership logos should follow clear space rules. The separating line between logos can be created by using 50% the width of the "G" or "U".
Keeping consistent logo usage is important to maintaining brand consistency. The best course of action is to use the logos as they are - Don't modify or change them.
Our type hierarchy uses the Effra font for primary brand instances. The baseline type is 16 (100%) for standard legibility .
It is important to organize typography in a hierarchical system according to relative importance or inclusiveness through scale and function depending on communication.
Normal - 24px (1.5x)
Normal - 16px (Body)
Normal - 12px
These are some examples on how to construct an on-brand font hierarchy.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Effra Bold (700)
3x body copy
1.0/100% leading
0 tracking
Effra Normal (400)
1/2 headline
1.0/100% leading
0 tracking
Effra Normal (400)
1/3 headline
1.0/100% leading
0 tracking
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Effra Bold (700)
2x body copy
1.0/100% leading
0 tracking
Effra Normal (400)
1/2 headline
1.0/100% leading
0 tracking
Effra Normal (400)
1/3 headline
1.0/100% leading
0 tracking
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Effra Bold (700)
2x body copy
1.0/100% leading
0 tracking
Effra Normal (400)
1/3 headline
1.0/100% leading
0 tracking
GoodUnited has various calls to action to encourage current and potential customers to engage.
Our color system is derived from the colors in our logo. Even the typography and other subtle elements take their color from Navy.
Our color system is derived from the colors in our logo. Even the typography and other subtle elements take their color from Navy.
We use our secondary color to add contrast and draw attention to elements. It should be used sparingly throughout illustration, photography, and product in order to maintain meaning and potency.
We use a wide variety of different illustration and photography styles to communicate our message. Our primary articulation - the "Customer Cutout" is meant to capture both emotion and customer pain reliever in one mini collage.
Our product illustration style looks to combine the concept of the interaction, with small tidbits of what it's doing. These illustrations can be broken up into 3 layers - to be animated, or not.
Contains product "bubble" imagery. Make sure that this is positioned so it doesn't cover the face.
This contains the cutout of the person of focus, showing how they feel in response to the specific product offering. The person should generally be masked to the shape of the G, or the U.
Some illustrations may contain additional brand shapes and colors that bring more interest to the piece.
The "Customer Cutout" is comprised of photography of a potential customer showing how they'd feel about a certain feature, generally cut to a smooth curve of a G or U shaped background. There are slightly different considerations for usage,
Hero customer cutouts are defined by the image being the first thing to be seen, such as the top of a webpage, or a solo piece like an advert or print cover. The make use of both the G and the U, and are cut accordingly. They may also be found over color elements.
Feature images are meant to be confined to accompanying a feature proposition. Think of these as all the rest of what you see once a "hero" image has been used.
Sometimes, you just want to "break the grid" so to speak. The most important part is keeping a solid composition and making proper use of the shapes involved. Whoever, it's generally advised to stay within the above bounds.
Feature bubbles are simple illustrative elements to articulate concepts like messages. When constructing these, make sure to
Contains product "bubble" imagery. Make sure that this is positioned so it doesn't cover the face.
This contains the cutout of the person of focus, showing how they feel in response to the specific product offering. The person should generally be masked to the shape of the G, or the U.
There are also more iconographic illustrations that are occasionally used in our brand, as well. These can be used to articulate higher level service concepts that may be a little too broad to be represented by our standard approach.
Use thinner lines, with a brand color of contrast to give it a bit more body.
Fully fill in illustrations - they should be airy and almost hand drawn.
Other photos should be sure to set the scene for a story or event. This can be location shots
Use high quality, full color photos.
Use black and white photography, or anything that could be seen as less vibrant.
Speak in a personable, no-nonsense way.
Use jargon, tech-speak, and more words than necessary.
Empathize with the Customer Pain, then tell them the Pain Reliever. Explain it to them in a friendly, yet no-nonsense away, using no more than 1-2 sentences per segment.
GoodUnited’s copy should read like a good friend that’s to-the-point and tells you like it is.
Donors aren’t in your inbox, they’re on social.
Our blend of data science and human judgement allows us to create personal and conversational messaging experiences that reach your donors and drive results.
Customer Pain Point: Not Enough Data
Not enough data? We handle that. Create messaging experiences that prompts donors to share the info you need to keep in touch and to truly understand what they care about.
Facebook’s current API refuses to share data with outside parties. We work hard to try and get you the data you need. Our system asks donors questions and gets them to provide contact info, email addresses, and so much more.
Customer Pain Point: Needs a more custom solution
Your nonprofit has unique challenges, and one size doesn’t fit all. Lean on our team to create a truly custom experience to solve your fundraising challenges.
If something is built for everyone else, it’s not built for you. Our team has spent years crafting, curating, and customizing messaging and Messenger experiences that fit your tone, branding, and mission.
