Uphold’s Brand Assets Web Page
Assigned task: To create Uphold’s ‘Brand Assets’ web page.
My process
Having had no prior knowledge of what a ‘Brand Assets’ page comprises of, I started off with research on that front.
I researched to understand the overall objective of such a page and looked into examples of how other brands do it.
I specifically referred to this comprehensive list of style guides for a holistic understanding.
For determining the taxonomy of the page, and to gather knowledge on brand IPR and brand guidelines, I teamed up with the Design Team and the Marketing Team.
Proposed draft: Brand Assets page
Brand Assets
Through our unique visual language, Uphold endeavors to represent the values of its community, i.e., a human-centered approach as our brand’s cornerstone. When using our brand resources, please follow the below-mentioned guidelines.
Our logo
The Uphold logo comprises the ‘hot air balloon and light bulb hybrid’ as the symbol and ‘Uphold’ as the wordmark. It’s our brand’s universal signature which we use across all our platforms and communications. It’s therefore pertinent that consistency is maintained when using it. Please don’t alter or attempt to recreate the Uphold logo in disregard of the below-mentioned guidelines. Only use the logo format that’s been made available for download below.
*include visual example*
*Download logo button*
Our Symbol
The Uphold symbol represents a hybrid of the hot air balloon and a light bulb.
The use of a hot air balloon as the symbol emphasizes the ‘Up’ in Uphold and alludes to feelings of ease and adventure as can be felt when traveling in one. The light bulb is associated with invention and innovation. The hybrid symbol is designed to invoke and inspire reassurance and continuous innovation as the bedrock of what Uphold stands for in offering access to safe, transparent, and affordable financial services to individuals and businesses alike.
Logo versions
We make use of two logo versions;
A combination of the symbol and the wordmark
Symbol alone
*include visual examples of both*
Predominantly, we use a combination of the symbol and the wordmark to represent Uphold. We also however use the symbol independent of the wordmark, as and when deemed required and whichever makes the most impact in a given use-case. When using the symbol in isolation, it is necessary to ensure that the Uphold brand name has been sufficiently referenced so as to avoid any confusion.
*Download symbol* button
Logo Colours
P06 is the official green that we use for the Uphold logo. However, there is room for flexibility depending on the background’s color where you choose to showcase the logo. For maximum visibility, when placing the logo on a dark background, the logo color should be N01. On a light background, the logo should be displayed in P6. On a dull background, switch between using either N01 or N06 for the logo color, whichever promises greater clarity.
Please adhere to the below-illustrated logo templates.
*include N01 and N06 color palettes*
*Include illustrated examples of the logo on different backgrounds*
Logo minimum size
Establishing a minimum size ensures that the impact and legibility of the Uphold logo is not compromised in application. While you can scale the logo as much as you’d like, it should never go below the minimum size requirements stipulated hereunder.
Use over photography
Visibility and legibility are the two guiding principles when trying to showcase the Uphold logo, especially when displaying it on top of photographs. When exhibiting the logo on a dark background, use N01 as the logo’s colour and P06 when displaying it on light backgrounds. You can always include a dark overlay with 20% opacity on top of a bright photograph, so as to showcase the logo in N01 colour.
*include image examples of the logo over photographs: light and dark and dark overlays*
Exclusion Zone
The wordmark and the symbol’s exclusion zone is equal to the height of ‘U’ in ‘Uphold’. The logo should be surrounded by a safe margin for it to have enough room to breathe and to ensure it always looks its best. No other graphic elements should enter this zone.
Brand colours
The Uphold brand colours comprises a primary set and a secondary set of colors used across all platforms and communications.
The use of the primary set of colors should be prioritised as much as possible. The use of the below illustrated primary colors are what identify us as Uphold. While our primary color is P06, there are also other shades of green that we make use of for more specific purposes such as hover effects on buttons or as gradients, etc. The use of the other shades should be limited. In most cases, we make use of the secondary set of colors for backgrounds or text.
“Connect with Uphold” button
The Uphold connect button is a way to trigger the login process to Uphold when used on any external website or app. When using the ‘Connect with Uphold’ button from our API, please strictly adhere to the versions and sizes provided therein so as to ensure a consistent design and experience.
There are two colour versions available for the button, one for dark backgrounds and the other for light backgrounds. Please use cautiously to ensure maximum visibility and legibility.
*Download ‘Connect with Uphold’ button*