Superbloom

This resource is part of our Communications Toolkit for Civic & Nonprofit Tech.

Before we start: let’s talk about storytelling.

Humans love a good story; for as far back as we know, humans have shared stories with each other in their own communities. At its very core, branding is about storytelling and communication: What story do you want to tell your users, your community, your stakeholders? Ideally, every single element you add to your brand should benefit this unified story you are trying to tell.

When you are stuck, think of that question: What is our story?

Now let’s get started!

Table of contents

Brand guide elements

Depending on your organization’s needs, your brand guide might be thorough and extensive or fairly minimal. Here are the elements that you can use in your brand guide to describe and define your brand.

Brand background

The brand background is an important part of who you are as a company or an organization, and it’s your chance to get really personal (if you want to). Your brand story could include:

  • The brand name and history: How was the brand established? How did you come up with the name?
  • The brand values: What is important to your organization? What are some of the values that members of the organization should ideally strive towards or identify with?
  • The brand personality: What are your brand’s key character traits?

Brand visual foundation

The brand visual foundation is an overview of all the core visual elements that make up your brand: logo, colors, and type.

Your logo can be a logotype (which centres around stylised text and is also often referred to as wordmark or lettermark), a logomark (a pictorial mark, i.e. a symbol or image) or a combination of both.

You may also want to have different versions of your logo to cover all usage: For example, you could use a combination of logotype and logomark as your primary logo, but use only the logomark or symbol in certain situations.

The more information you include with your logo, the less likely it is that it will be used incorrectly.

Formats

Provide your logo in a variety of file formats for download (we suggest at least PNG and SVG); this potentially includes different formats for print and digital.

Have your logo available in several sizes, at least the following:

  • 64 x 64 px (for use as an icon or favicon)
  • 256 x 256 px
  • 1024 x 1024 px

Minimum size and spacing

Your guide should include information about the minimum size of each version of the logo. You might also want to include specifications around spacing — how much space should be left, at minimum, on each side (left, right, top and bottom) of your logo.

Note: you might want to include here a visual of what this could look like! Here’s an example from Firefox.

Firefox brand guidelines showing clear space around logo, the height of the F in Firefox

Correct and incorrect usage It’s always helpful to give pointers on how to correctly use your logo — but also on what incorrect usage looks like. Some examples:

  • What colors can or can’t be used for the logo?
  • Do you offer black and white variations on the logo? In what situations (e.g. to adapt to a certain site style)?
  • Can the logo be placed in a container, a frame, or on a busy background?
  • Can the logo be stretched, rotated or resized?
  • Are there specific guidelines around using the different versions of the logo (e.g. when do you use the logotype or the logomark?)

Secondary marks and mascots

You might also think about creating an additional, recognizable mark such as a secondary logo, a symbol or a mascot. This is either useful in places where your primary logo might not physically fit (for example, in a browser tab), or as an additional way to achieve brand recognition.

Secondary marks can be an important visual mark of your brand: Just think about the recognisability of mascots like the Duracell Bunny or Ronald MacDonald, Freddie (the Mailchimp chimpanzee) or Duo (the Duolingo owl). As always, consistency is key: those secondary marks are nice-to-haves, but they should also serve a purpose. In the case of mascots, this is often used to add playfulness and personality to your brand!

Colors

Your color palette should include a variety of colors for different use:

  • primary color(s)
  • secondary colors
  • any additional accent colors
  • your background, functional, or neutral colors

Be clear about which is which, and how to use them, especially when it comes to accessibility, as not every color will fit everywhere or with every other color. Some brands also provide a color ratio for correct usage, i.e. what percentage of each colour type should be used across materials (for example: 50% neutral colors, 30% primary color, 10% secondary, 10% accent). This is useful to make sure your visual content is visually balanced and achieves the mood you want, but it’s in no way necessary.

It’s good to keep in mind that your colors might be used in different media (digital and print), so provide color codes in different formats — at minimum HEX, RGB and CMYK codes. If you’re using Pantone colors, make sure you have those codes (PMS) in your color library, too.

Colour resources

  • Colour Code: A color palette generator
  • Color Space: A generator that creates different types and styles of palettes based on a single colour (HEX code or RGB) input.

Typography

Depending on the media you work in, you might have to work with more or less typefaces, or adapt typefaces to the media you work in. Because of that, it’s good to have basic guidelines and principles in place for how you use typography within your organization and brand. In this section, we’ve collected the most basic information to include when defining guidelines for your brand’s typography.

  • Give context: Which font style is used for what? Or, if you use more than one typeface — when do you use which font?
  • Think about the medium: Do you have different typefaces for different media (digital, print, etc.)? Do you have fallback fonts for when access to your brand typefaces is limited?
  • Give guidance for presentation: Provide specific guidance on how the text should be presented — this includes the text colour, but also what kind of spacing should be used (e.g. vertical spacing between lines or paragraphs), whether you follow a typographic scale, and how copy is aligned within the content (is text centred or left-aligned, or a mix of both?)
  • Provide setup information: How can your typefaces be downloaded, installed, and used?

Visual language elements

What do we mean by “visual language”?

The visual language is all the visual imagery you use across your brand and materials (apart from your visual foundation). This includes illustrations, photography, and symbols. Often, these are supporting visuals that will expand your brand, bring the point across and, in some cases, make your content more easy to digest and understand. Visual language elements can also be used to bring in an element of fun, where appropriate.

Like everything in branding: Your visual language might be very simple or quite extensive — there’s no right or wrong way.

It’s good to draft some guidelines on what type of illustrations or photography you want to use (and avoid), for example:

  • Usage of imagery: What type of imagery (illustration, photography, abstract shapes and symbols, etc.) do you use? If you use different types: Are there rules around when to use which?
  • Stock imagery: Do you use stock images? If so, from which sources, and what are the usage guidelines?
  • Visual language system: Especially if you use abstract shapes — do these shapes follow a pattern or a system? Are they taken from existing elements (like your logo or your organization name)?
  • Image library: Do you provide access to an image library with images that have been “vetted” and can be used / reused?
  • Making your imagery inclusive: Do you consider diversity and inclusion as part of your imagery choice? Do you specifically try to look for a diverse range of images and photographs?

Brand voice

The brand voice is the foundation of how you communicate with your users, stakeholders, and community. It’s important to have a clear idea of the brand voice to make your communication consistent and avoid confusion.

Some things to consider and questions to ask when defining your brand voice:

  • Personality: What is your brand’s personality?
  • Humor: Is your organization more on the fun or the serious side? Do you bring humor into your communication?
  • Versatility: Do you adapt to the communication platforms you use and to the different types of users you have, or do you keep a similar voice across all communication types?
  • Specific guidelines: Do you use American or British English spelling when communicating? Do you use emojis?

Brand guide formats

There is no right or wrong format for a brand guide; as with everything, it will depend on your audience and your needs and resources.

Some things you might want to consider before choosing a brand guide format for your organisation:

  • Who will be using the brand guide?
  • Are there any specific needs of the users / designers / developers?
  • How often will the brand guide be updated and by whom?

Option 1: PDF Especially for smaller organisations, a static file (usually a PDF) is one of the most common formats for a brand guide. Having a PDF brand guide is easiest when the brand guidelines have already been established and will not be updated regularly (as making changes and exporting the PDF again can quickly become tedious). It might be the best solution for you if you want an easily shareable format that will not need constant updates; you can add it (or a link to it) to your organisation’s centralised knowledge database / system to make sure the latest version is always accessible to everyone. Note: Make sure your PDFs are versioned, so that when you do make changes to the brand guide, it’s clear from the version name.

Option 2: Brand guide website Having a website for your brand guide is a bit of work, but it might be the most versatile type of format for a brand guide. It can be an internal or password-protected site, but can also be shared externally. While it might need to be maintained, it will also allow you to be able to add cross-references, links, and embed different types of content. This might be a good solution if you have people who can update / maintain the site, and if you have an extensive brand guide with the needs for cross references.

Option 3: A user-specific platform Many organizations or teams, especially smaller ones, tend to put their brand guide in whatever tool is most accessible to or most used by them. This could be something like Notion or Confluence (a centralized knowledge / documentation tool), Figma (or another design tool), or GitHub/GitLab/Bitbucket (their code repository). This comes with advantages and disadvantages: A change of tooling might mean having to find a new home for your brand guide; on the other hand, when your brand guide is on a platform your whole team uses regularly, it also means that it’s more likely to be up-to-date than a static document.

Whatever tool or format you use, make sure you don’t accidentally exclude some of your users — for example, by putting your brand guide in Figma even though it should also be used by developers who might not be using Figma, or even have access to it. This will ensure everyone is on the same page and will avoid information silos.

Accessibility considerations

In order to provide an inclusive and accessible experience for all of your users, it’s essential to think about accessibility at every step of the branding process. Accessibility can help users with permanent or temporary disabilities, but also, for example, users navigating your site on low data plans and bad connections. Often, when thinking about accessibility, we focus on the “obvious”, but text readability and color contrast are only the first step to an accessible brand.

Here are a few things to consider to make sure you can avoid discriminatory design and biassed branding:

  • Make your text readable: Choose an appropriate text size that also factors in your choice of typeface
  • Make your text clear: Think about your users when writing your content, rather than about hypothetical “experts”. Everyone benefits from clear and concise explanations!
  • Check your color contrast: Use contrast checkers to make sure your brand colors work well together, and that you have alternate colors and a neutral palette to fall back on where needed.
  • Consider screen reader and keyboard users: your site should be compatible with screen readers and the content should be easily navigated using a keyboard.
  • Provide a clear hierarchy for your content: Among other things, use semantic HTML — this is particularly helpful for users navigating your site using a screen reader.
  • Write short and clear alt text for images: It’s important to provide alternate text for users with visual impairments or users who might be unable to download or view images on their device, and to learn a bit about how to write alt text that is useful to users and provides the right context
  • Provide alternatives for media content: Provide an alternative to audio content for people with hearing impairments in the form of audio descriptions, captions, and transcripts
  • Avoid unnecessary animations, autoplay, or flashing content and text: video and audio should never start playing on their own, and flashes must be limited to 3 per second for photosensitive viewers.
  • Consider the importance of inclusive representation: Think about the variety and diversity of your users — would they all feel represented by the imagery and photography you have selected?

Color considerations

Colors are a powerful tool in your toolkit. When choosing your brand or organization’s colors, it’s important to think about the context in which color will be used.

Colors are often associated with certain feelings, moods, or adjectives. The easiest and most obvious example is for the color red, which is often used in Western cultures to signify “Danger” (think of the specific usage of red in road signs and traffic lights).

Before settling on a specific brand color, it might be beneficial to learn more about color theory (how colors work in the physical world) and color psychology (how colors are perceived by humans).

Geography, culture and religion will also play a role in your choice of brand colours: depending on where your users, community, stakeholders, etc. are located, are from, or which culture they belong to, they will have formed different associations to certain colors, which is something you will need to be aware of.

Lastly, what field or area your organization is in, as well as the experience you want to be associated with, might impact your color choices: Think about how many tech and business companies have blue as a primary brand color, or how organizations that focus on the environment often use green in their communication and branding.

Considerations for digital-first logos

A digital-first logo should be both simple and versatile. When designing primarily for digital media, you have to deal with different sizes, resolutions and contexts; because of that, your logo should be, first and foremost, recognizable at small sizes (think, a browser tab favicon or app icon), so here are a few tips and questions to think about when creating a digital-first logo.

  • Use a vector format where you can: For example, SVG. This allows you to scale the logo up and down without losing quality.
  • Use an appropriate format and size: This will always work in your favor, as it will positively impact loading speed and image quality, as well as compatibility with devices and platforms. You might not always have the possibility to use a vector format for your logo, but it’s still important to think about falling back on an array of sizes for raster formats (png/jpg).
  • Avoid too many details: When designing an icon at smaller sizes, for example as a favicon, it’s ok to let some details go in favour of readability — adapt your logo as needed so that it’s clean and can be recognized or seen well.
  • Offer different image ratios: it’s important to think about the different contexts of your logo and where it will be seen. It could be that you need different image ratios based on where your logo is used, such as 2:3, 3:4 and 1:1 ratios.
  • Be prepared: Ask yourself an array of questions to be prepared for different situations. Will our logo look good on a small screen and as an app icon? How will it look scaled down to the size of a favicon, on a variety of background colours?

Choosing a typeface

Choosing a typeface might be a daunting task that feels like one of the hardest things in branding; we might not have all the answers, but we have a few thoughts on what can make your typeface decision easier.

  • Lean into your brand’s style: Every typeface has different elements that contribute to a certain style and visual aesthetic; be aware of this when picking a typeface. You can use your brand’s non-visual foundations to find a typeface that embodies the mood you want to create in your content.
  • Choose legibility over aesthetics: Ideally, the typography should be both readable and visually appealing; unless your style is purposely “messy” or “artsy”, prioritie finding a typeface that is legible.
  • When in doubt, use fewer different typefaces or styles: An interface, website, or even a print medium can start to look messy fast if there are too many styles and typefaces being used. One of the most difficult things about type is pairing them, so where you can, stay on the minimalist side and think about where the fonts will be used (digital / printed material).
  • Do a typography audit to help with consistency: If your issue is an existing product or interface, try going through all of your content and material, writing down where you’re using which typeface, style, and size. You might uncover some inconsistencies or an overload of variations that can easily be fixed.
  • Free typefaces are totally okay: Just because a typeface is free, doesn’t mean it’s bad; and vice-versa, just because you paid a lot of money for a font, doesn’t mean it will serve you well or be perfect for your purpose. There are many free quality typefaces out there!
  • Think about your audience: Another potential consideration to make is that of accessibility. Will the typeface need accented or non-English characters, diacritic marks, etc? If so you might want to make sure that all of those characters are included in the typeface.

Choosing images and illustrations

Just like many other aspects of your branding, the imagery you choose will support your message and your story. It’s important to think a bit about the type of images you want to display (or not), the style of photography and illustration you want to use across your brand, and how it reflects and supports your values.

Sometimes this is really obvious, at times it’s less clear — regardless, it’s always helpful to take a step back and collect your thoughts before jumping into imagery research. This is also the right place for you to have fun, and collect inspiration! So, while we can’t do the work for you, we can help guide some of your decisions with a few suggestions below.

  • Make it cohesive: Ideally, pick a single illustration style. It doesn’t really matter if it’s found illustration (but don’t forget to credit!) or if you work with an illustrator for custom or bespoke illustrations — the style across all the illustrations you use should be similar enough that it doesn’t confuse your audience.
  • Have guiding principles around photography: It doesn’t have to be a whole book of guidelines, it’s enough to have one or two guiding principles. For example, “photographs of people will be candid and spontaneous as opposed to posed” or “we will always use a backdrop with one of our primary brand colors for studio photography”.
  • Explore and experiment: Try out different things, brainstorm, and play around. Get a feel for what imagery feels like your brand, and see what’s possible and what isn’t. Especially when it comes to illustrations, there are so many things to consider — shadows, perspective (such as flat vs. 3D), usage of shapes, lines, and colors.
  • Last but not least, credit where credit’s due: Make sure you only ever use photos and graphics that you are allowed to use, and that you credit as originally agreed with the image author. And since working on a team can be chaotic and messy — make sure credit guidelines are saved in the same place where you save your images, as this will definitely avoid some headaches later.

To AI, or not to AI?

If you’ve gotten this far, chances are you’ve tried generating images in your target image style using a generative AI tool (e.g. Midjourney, DALL-E). You may have been shocked by how good the results look, at a cost (to you) of pennies per image. Even so, we strongly recommend against using generative AI for your brand.

  • The images won’t actually match each other: The line weight won’t be the same. The color palette will be slightly off. The characters’ faces won’t match from image to image. Even if you use the exact same style keywords and parameters, the generative AI will give results that just don’t look quite right with each other.
  • Yes, people can tell, part 1: Generative AI images have a subtle whiff of just not quite making logical sense. Elements are the wrong size, lit wrong, oriented wrong. Brushstrokes don’t have a start and an end, phones have three headphone ports, geometric shapes don’t have matching angles, every woman looks 23 years old with perfectly clear skin.
  • Yes, people can tell, part 2: Even if the image itself looks fine (no six-finger hands, mismatched glasses lenses, or garbled background text), your use of imagery needs to make sense with your likely budget and staffing. If a 12-person nonprofit posts studio-quality photography on Instagram every day, this smells fishy to your audience.
  • Are you really ok with this? We won’t belabor the point here, but the environmental and cultural cost of using generative AI to create “art” that represents your organization may not be something you want to support. (If you’d like to get in touch with great illustrators, we at Superbloom are happy to help!)

Where to find inspiration

Logo and brand inspiration

BP&O is a regularly updated creative blog with handpicked, high-quality brand designs. It’s not just a collection of cool design, it also offers more context, insights and opinion on each work. You can get site updates sent through a weekly newsletter.

Typewolf is a typography resource by designer & art director Jeremiah Shoaf. The site has several interesting sections, including a typography blog, a “site of the day” section (one inspiring site screenshot every day with a description of the typefaces used), and a collection of their favorite portfolio and design studio sites.

Inspiration Grid is a huge collection of images from around the web, encompassing design, photography, art and industrial design. If you’re looking for branding or illustration ideas, this is a great place to start building your moodboard. The sheer size of the site can get overwhelming, and the articles for each piece are usually image-heavy and have minimal amounts of text (i.e. little context about the work) but it’s a great place to see a variety of images.

Brand guidelines and design system inspiration

We’ve collected a few interesting design systems and brand guidelines from around the web.

This toolkit was developed with the support of the Open Technology Fund Learning Lab. Got feedback? Want to work together? Please write to us at [email protected].