In this post, we’ll explore seven prime examples of brand style guides across a variety of disciplines, all of which inspire us as web creators, in our ongoing mission to improve our own brand identities.
Web creators and business owners alike know how crucial it is to solidify their brand identity, with the ultimate goal of building a presence that resonates with website visitors and clients alike. Brand guidelines are certainly the ticket to consistent, powerful branding, and there’s no better place to look for inspiration than at breathtaking brand style guides done by design experts themselves.
A brand style guide is a compilation of guidelines that spells out the elements of a brand’s identity and design system, such as logo, color palette, typography, imagery, and more. The role of a brand style guide is to serve as a reference for designers, writers, and content creators alike for how to represent the brand in the design assets and content they create. While different brands have unique and individualistic ways of how they craft their style guide, their goal is uniform: to ensure brand consistency and clarify what they stand for.
In this post, we’ll explore seven prime examples of brand style guides across a variety of disciplines, all of which inspire us as web creators in our ongoing mission to improve our own brand identity when designing websites, visual assets, and brand content at large.
Skyscanner’s brand style guide struck our attention for a bunch of reasons. For starters, it’s always inviting when a brand opens the forum with brand transparency, as Skyscanner does by stating the idea and theme behind their rebranding process in their style guide homepage’s hero text, which reads “A new look and a bolder outlook”.
Layers of Logo Design
From our perspective, one of our most favorite things about Skyscanner’s brand style guide is the way they illustrate their brand personality, by specifying the thought process behind their brand assets. For example, exhibiting the formation of their logo design and how it combines four illustrations, each one symbolizing a different brand value, and how they morphed these four graphics into one cohesive illustration.
This logo design process as depicted by Skyscanner can actually be considered a case study in the outcome of the brainstorming and rounds of iterations that make up the process of designing a brand’s logo from scratch.
A best practice in logo design is to draw sketches of various images that illustrate and symbolize what your brand represents and eventually to produce a final logo that combines these different ideas. If you look closely, you can see that the semi-circle in both the “Optimism” and “Ideas” images is combined with a derivative of the downward “Destinations” arrow. Given the circular nature of Skyscanner’s new symbol, the “Sustainability” globe is also incorporated into their finalized symbol.
Color Palettes With Character
What’s truly unique about the way Skyscanner compiles their color palette is that they take the atypical route. Instead of showing a color swatch of each color with their respective HEX and RGB values, Skyscanner shows the name of each color as well as a short description or definition of what that color represents to them as a brand.
By doing this, Skyscanner’s color palette becomes more than just a technical index that represents their brand’s visual identity; it goes one step further, and shares how each of their color choices relates to their brand identity and personality.
We also noticed that each color swatch actually represents a country which people can travel to (ideally using Skyscanner to plan their itinerary), and that the primary brand color of Sky Blue encapsulates the concept of worldwide travel that knows no boundaries.
2. Mozilla Firefox
Among its many strengths, what was particularly impressive to us about Firefox’s style guide is how effectively it communicates Firefox’s brand personality. In essence, this visual representation of Firefox’s brand personality in their style guide is living proof to the very voice and tone and brand identity that the guide’s content describes and visualizes. We see this correlation as prevalent in several branding elements, such as the color palette, voice and tone, visuals, etc.
Brand Personality: Bold and Beautiful
Firefox spells out the characteristics of their brand personality loudly and clearly, with the bold confidence that they account for themselves as a brand. They’re opinionated and they know it, and are proud of their openness, radicalness, and are confident about their kindness.
But it’s not only the words that they use or the large font size that they use to make these bold statements. The brand colors which Firefox uses speak for themselves. Their analogous color palette of deep purple, dark pink, bright orange and bright red are visual expressions of the very words that Firefox spells out in their Personality section.
This is where color psychology comes into play. As they accounted for themselves, red is bold and attention-grabbing, orange represents creativity and adventure, purple is royal and extravagant and pink is loving and playful. These color choices definitely match up with the descriptive words that Firefox uses to characterize their brand personality.
Voice and Tone: Transparency Is Key
Firefox’s voice and tone is merely an extension of their brand personality, which is, if you think about it, true for human personalities as well. For as individual people, our voice and tone is a verbal expression of our existential personalities.
They’ve also chosen a super creative way to exemplify what their tone of voice is like in relation to what it is not like. On the whole, what’s interesting is that they approach the brand voice section of their style guide as a way to qualify the brand personality that they’ve reflected upon earlier in the guidelines.
The legendary brand of Fisher-Price has certainly needed to rethink their brand strategy and style guide since…way before brand style guides existed. Dating back to 1930, Fisher-Price’s mission statement has always been to create toys that “appeal to the imagination, and that do something new and surprising and funny.”
Over the past 90 years, Fisher-Price has had to repeatedly recreate and recalibrate their brand strategy according to rapidly changing market trends and audience interests. But somehow, they’ve managed to maintain loyalty to their original brand values, despite the stark differences between generations of children and their parents or caretakers buying them their treasured toys.
Brand Voice: “Let’s Be Kids”
Fisher-Price communicates their brand values with both wording and graphics that evoke our inner-child, with their bright, jovial brand colors and playful, care-free choice of words. It’s clear that their brand, as well as their brand voice, are rooted in the value of play and the opportune, once-in-a-lifetime experience of being a kid.
We see a categorical difference between the red graphic and the blue graphic. The declarative and descriptive sentences that they use to share what they’re about, “We don’t act a day over five” and “We’re heading back to childhood”, create a personal connection between them as a brand and us as the ones experiencing that brand.
The blue graphic is all about imagination, and sensational experiences that invite us to unleash our creativity and go soaring: “Bang Boom Bzz” and “Cloud-Jumping”, for example, that resonate with children who are looking to surround themselves in a world of imaginative play where they create a self-made environment of unlimited fun and laughter.
Typography: Never Stop Playing
We’ve seldom come across a choice of typography, whether it’s a custom brand typeface or not, that has the two variations as created by Fisher-Price: a regular version and a “bouncy” version. Fisher-Price created their own typeface which they named “Let’s Be Glyphs”, sticking to their characteristic language of “Let’s Be Kids”, an inclusive way of saying “come and play”.
The brand’s choice to create a “bouncy” variation of their typeface attests to their creativity of how to communicate with children, so it’s no wonder that they’ve been one of the world’s most popular and successful toy manufacturers for 90 years.
As we mentioned earlier, brand transparency is truly a virtue when it comes to a product’s branding and community building. The choice to be transparent about your brand decisions and design thinking builds user trust, brand confidence, and a positive rapport with both existing and prospective users. We especially appreciate the way Waze has shared their rebranding process with us, as we at Elementor are soon embarking on a comprehensive company rebranding. Stay tuned.
Rebranding: “Block by Block”
In their brand guidelines, Waze shares their rebranding process step-by-step, where they elaborate how they’ve “refreshed their brand identity” into a new phenomenon:
“A universal system that enhances the platform’s collaborative spirit and provides a better experience on the road. The identity updates the iconic Wazer symbol, introduces a set of new “Moods” that help users more authentically express themselves within the app and streamlines the platform’s signature use of illustration. The system introduces a colorful visual language called “Block by Block” that is inspired by the modular design of the city grid, roads and streets.”
Given that as a product, Waze is a crowdsourced community where drivers help drivers find their way around the world, it makes perfect sense that their brand language and collective design elements are centered around the theme of navigation, and building structure with an exclusive block-like (or you can also call it grid-based) design.
Iconography: Goodbye Flat, Hello Filled Outline
While we do indeed love both icon styles, meaning Waze’s previously used flat icons, as well as their new filled outline icons, they shared that the filled outline style is more aligned with their new brand identity.
From a UX perspective, using filled outline icons in place of filled-in icons has actually proved to positively impact task performance. With outline icons, it is easier for users to recognize and select icons when they are outlined rather than filled.
From a branding perspective, Waze shared that “the simple shift of all of them now having black strokes makes them a more cohesive set and they now look much better integrated with the Wazer icon.”
The essence of WeWork as a “product” is physical gatherings and social interactions that take place within a physical space that the company builds for their users. In this regard, it makes perfect sense that their branding, be it their style, their brand values, or their design language, is a robust, cohesive set of principles that can be applied to architecture, community ethos, and of course, visual design principles.
If you’ve been to one or more WeWork locations around the world, even though their locations across the globe amount to a whopping 848, the interior design style that’s used in every WeWork is actually incredibly uniform, all following a similar layout and design style.
Different to your usual brand that may either be consumer packaged goods or a digital brand such as Waze, WeWork has mastered their need to be a powerful, remarkably consistent brand. This is no small feat, as there are so, so many areas that their branding needs to cover: arts and letters, marketing materials, digital assets, architecture and interior design, brand values and personality, and so much more.
Design System: Consistency Is Key
The value that any brand can find in creating their own design system is, as we see it, indisputable. It makes perfect sense that a company such as WeWork would see creating a design language of their own as a strong incentive to their success.
In terms of visual design, WeWorks brand assets and design elements also follow this principle of balancing structure and flexibility. While their primary brand colors are black and white, as you scroll through their style guide, you’ll come across almost every color in the rainbow.
Their visual assets, be them digital, paper, and so on, abide by a meticulously structured layout which dictates column width, margins, and information architecture. They call their layout guidelines “Snap-to-fit”, characterizing it with how its “layout and hierarchy can be restructured nimbly and efficiently. WeWork represents the frame, the underpinning, the substrate that supports and empowers the content, members and communities to thrive.”
Brand Values: People All Over the World
Bearing in mind that WeWork locations are found all over the world, the people that fill up their coworking spaces all speak different languages and dialects. Nonetheless, their locations are remarkably consistent with each other, despite being in different cities, countries and continents that would in theory find it a challenge to identify commonalities with one another and share a common language.
The tightrope that exists between crafting a brand, both physical and visual, that people of all cultures and walks of life are drawn to, is thinner and narrower than we can imagine. Nonetheless, WeWork, identifies and embodies values that resonate with a wide spectrum of humans that only gets wider by the day. It is precisely the investment in carving out well-defined brand values that allows an international company such as this to thrive without borders.
Copper is unique as a brand in that it caters to a highly-defined target audience: teenagers who are learning to make financial decisions. Copper’s product is a mobile app and a debit card that lets teenagers receive money from other people, whether family or people they do work for, and they can also transfer money to friends, etc. Their value proposition is to lay “the path to financial freedom being rooted in a solid education.”
Target Audience: Finding the Right Mindset
Copper’s mission statement is to bridge the gap between young teenagers and adults who need the knowledge and experience to make responsible financial decisions. It is therefore very logical to understand that their brand identity (in this instance, represented by their brand name and their logo), is a visual fusion of multiple concepts: the traditional copper penny coin, the history of Abraham Lincoln, one that teenagers will have learned about in their American History classes, transformed into a modern, upbeat illustration with a bright purple surrounding and a friendly avatar.
The goal of the brand, as we see, is to help teenagers make that transition from what they learn (either in the classroom, or by informal educational tools such as the Copper app), and executing it in the here and now, in a setting and style that suits their lifestyle.
Taking a historical figure such as Abraham Lincoln, whose picture is hammered into every American penny, and adapting the man on the coin into a trendy, modern-day avatar is a spot-on way to connect to Copper’s narrowly defined target audience. This shows us that while smaller target audiences may indeed be challenging, since you’re narrowing your pool of potential customers, when you have a precise approach that can really resonate with that audience, you’re bound to be in good shape.
Illustrations: Maximum Engagement
What Copper calls their “Abe illustrations” is what we consider to be a way to maximize the potential of your brand’s imagery and illustrations. Advancing past their graphical adaptation of Abraham Lincoln’s picture, Copper creates eight additional avatars that represent Lincoln doing a variety of activities.
This extends Copper’s brand identity to take their engagement one step further, and integrate the Abraham Lincoln imagery into different processes and user journeys within the app. The parallel between the mature, adult-like skill of financial management and engaging, youthful avatars represents exactly what the app users’ experience should be: transitioning from youth to adulthood in an educational, positive framework.
Uber, the world-famous ride-hailing brand, finds multiple ways to set their style guide, especially their brand story apart from the crowd. In their section called “System Elements”, for example, they dedicate a lot of their discussion to their spacing and layout specifications, as well as to photography composition. In general, Uber goes into great depth about the design principles they’ve created and follow when creating and using their visual assets.
Brand Statement: What We’re All About
A brand statement is a written mission statement about what your company was built to create and achieve, what your vision is, and what challenges you aim to solve. When reading your brand statement, people will understand what makes you unique and how your personality will affect the experience you create for them.
You can think of a brand statement the same way you would think about marketing your product. What we mean by this is just as a product’s website contains a short heading (usually an h1 in the hero section of its homepage), stating the value proposition and added value of its product, the same method can be applied to crafting your brand statement.
Essentially, you’re portraying your brand as a product in it and of itself.
Value Proposition: Our North Star
If you compare the two h1 headings on both the Uber homepage and the Uber brand story homepage, both sentences are stating the added value that the user will experience, both from the brand perspective and from the service (product) experience, respectively. This is precisely the kind of information that we as a brand built for web creators and designers believe in communicating in a brand style guide.
At the end of the day, your value proposition is your north star, and every component of your brand and your mindset looks to it for guidance. This is true for a brand as a product, as well as a style guide as a product.
When communicating your value proposition, you want users to understand what your brand’s goals are in terms of what you’re executing. When crafting your style guide, the primary medium for communicating who you are, you want users to internalize what your identity is about and how you want to be perceived.
Show Us Who You Are
Now that you have an in-depth understanding of what an up to par brand style guide looks like and includes, it’s a great time to start solidifying your brand identity by creating your own style guide. Once your website has a cohesive visual identity that is consistent throughout your site, your presence as a brand will have a much more powerful resonance.
Once you finish compiling your style guide, we’d love to see what you come up with.