Design System

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.

Baseline

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)

Typography

Our type hierarchy uses the Effra font for primary brand instances. The baseline type is 16 (100%) for standard legibility .

Effra

Bold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0
Effra

Normal

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 1 2 3 4 5 6 7 8 9 0

Hierarchy

It is important to organize typography in 
a hierarchical system according to relative importance or inclusiveness through scale 
and function depending on communication.

Display 1

Bold - 64 px (4x)

font-size: 4rem;
line-height: 4rem;
font-weight: 700;
H1

Bold -48 px (3x)

font-size: 3rem;
line-height: 3.25rem;
font-weight: 700;
H2

Bold - 40 px (2.5x)

font-size: 2.5rem;
line-height: 3.25rem;
font-weight: 700;
H3

Bold - 32px (2x)

font-size: 2rem;
line-height: 3.25rem;
font-weight: 700;
H4

Bold - 24px (1.5x)

font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
Subtitle 1

Normal - 24px (1.5x)

font-size: 1.5rem;
line-height: 2rem;
font-weight: 400;
Body

Normal - 16px (Body)

font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
opacity:.8;
Caption

Normal - 12px

font-size: .75rem;
line-height: 1.5rem;
font-weight: 400;
opacity:.8;
Overline
Bold - 16px
font-size: 1rem;
line-height: 1.5rem;
font-weight: 400;
opacity:.8;

Pairings

These are some examples on how to construct an on-brand font hierarchy.

This is a Headline

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.

Headline (H1)

Effra Bold (700)

3x body copy
1.0/100% leading
0 tracking

Subtitle

Effra Normal (400)

1/2 headline
1.0/100% leading
0 tracking

Body Copy

Effra Normal (400)

1/3 headline
1.0/100% leading
0 tracking

This is a Headline

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.

Headline (H2)

Effra Bold (700)

2x body copy
1.0/100% leading
0 tracking

Subtitle

Effra Normal (400)

1/2 headline
1.0/100% leading
0 tracking

Body Copy

Effra Normal (400)

1/3 headline
1.0/100% leading
0 tracking

Overline

This is a Headline

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.

Headline (H3)

Effra Bold (700)

2x body copy
1.0/100% leading
0 tracking

Body Copy

Effra Normal (400)

1/3 headline
1.0/100% leading
0 tracking

Calls to Action

GoodUnited has various calls to action to encourage current and potential customers to engage.

Form Fields

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Color

Our color system is derived from the colors in our logo. Even the typography and other subtle elements take their color from Navy.

Primary Brand Colors

Our color system is derived from the colors in our logo. Even the typography and other subtle elements take their color from Navy.

#04C3CB
#005969
#002C45,
95%
#002C45
80%
#002C45
60%
#002C45
40%
#002C45
20%
#002C45
10%

Secondary Brand Color

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.

#F8B630

Illustration & Photography

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.

How it's broken down

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.

Feature Bubble

Contains product "bubble" imagery. Make sure that this is positioned so it doesn't cover the face.

Customer Cutout

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.

(Sometimes) Background Shapes

Some illustrations may contain additional brand shapes and colors that bring more interest to the piece.

The "Customer Cutout"

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

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" Customer Cutouts

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.

Outliers

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

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.

Traditional Illustrations

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.

Do

Use thinner lines, with a brand color of contrast to give it a bit more body.

Dont

Fully fill in illustrations - they should be airy and almost hand drawn.

Other Photography

Other photos should be sure to set the scene for a story or event. This can be location shots

Do

Use high quality, full color photos.

Dont

Use black and white photography, or anything that could be seen as less vibrant.

Tone of Voice

Brand Attributes

Primary Attributes

  • Non-Technical
  • Personable
  • Human

Secondary Attributes

  • Authentic
  • Friendly
  • Empathetic
  • Predictable
  • Transparent

Who We Are

We Are

  • No-Nonsense
  • On Your Level
  • Approachable

We Are Not

  • Jargony
  • Saccharine
  • Sarcastic

Do's and Dont's

Do

Speak in a personable, no-nonsense way.

Don't

Use jargon, tech-speak, and more words than necessary.

The Formula

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.

In Action

Donors aren’t in your inbox, they’re on social.

Empathize with the customer pain point.

Our blend of data science and human judgement allows us to create personal and conversational messaging experiences that reach your donors and drive results.

No-nonsense explanation of pain reliever.

Example 1

Customer Pain Point: Not Enough Data

Yes

Clear and to the point.

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.

No

Wordy and Jargony.

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.

Example 2

Customer Pain Point: Needs a more custom solution

Yes

To-the-point and non-technical

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.

No

Wordier than it needs to be.

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.