MUASHOP STYLE GUIDE USAGE
The majority of people are constantly being bombarded with a stream of messages and visual images numerous times a day—on a continually expanding number of devices and platforms. This can pose a challenge for organizations who need to be heard and seen to make a lasting impression. The MuaShop style guide is a continually evolving set of guidelines and recommendations to help strengthen the brand.
Practicing these guidelines help connect with target audiences and establishes credibility with individuals and organizations. Followed consistently, it communicates a distinct message and becomes identified quickly.
This style guide is a reference tool for anyone involved in the creation of visual communication material. This guide will assist all departments to apply a harmonious brand look to all the MuaShop print and web communications. It will outline brand elements such as logos, color palette, and typefaces.
As the brand is continually developed, it is important to update these guidelines to ensure that important changes are reflected here. Style guides published online can be refreshed and iterated as the brand naturally evolves. Moreover, they tend to expand to include pattern libraries, "atomic" interface elements, foundational video clips and even sample code all in the spirit of consistency. Centralizing guidelines also will make it simpler to share when updates are posted and stay abreast of what is new.
LOGOS
When incorporating the logo in communication material it is important that the logo is placed in a way that enables the logo to be surrounded with adequate space on all sides.
Depending on the context in which the logos will be placed in, there are two options to choose from depending on the color of the background where the logo will be set. It is essential that the logo that will provide the most contrast with the background be selected to assure readability.
Layout
12-Column Grid System
Grid
The grid system is based on 12-columns and is a subset of the Bootstrap grid.
PRIMARY COLOR PALETTE
The primary color palette comprises of three central colors that have been adopted as the signature colors for the KB4UGO brand. These colors are yellow, black and white.
Medium and light gray should be applied as neutral colors to better frame blocks of content or individual design elements to further create visual structure when warranted.
hex code #17AEBC
RGB 23,174, 188
CMYK 0, 17, 91, 1
hex code #000000
RGB 0,0,0
CMYK 0,0,0,0
hex code #ffffff
RGB 255, 255, 255
CMYK 0, 0, 0, 0
rGB 229, 229, 229
RGB 0,0,0
CMYK 0, 0, 0, 10
hex code #f6f6f6
RGB 246, 246, 246
CMYK 0, 0, 0, 4
typography
Heading Title
Family: Montserrat
Weight: 400
Size: 25px
Line-height: 30px
Letter-spacing: 0px
Color: Black #000000
H2 Heading
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
Heading
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
FOOTER LINKS
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
Being smart with your money is the key to being successful and living independently. Knowing how to handle your money doesn’t come easy. You need to know some basics, so you can make good decisions when it comes to spending and saving what you earn.
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
Know Before You Go started as a collaboration between the Alliance for Children’s Rights (Alliance) andChildren’s Law Center (CLC) after California’s Fostering Connections to Success Act (AB 12) passed in 2012 extending foster care from age 18 to 21. With these added three years of support from the foster care system, came a need to educate and empower transition-age foster youth so they could become self-sufficient adults. The Alliance and CLC joined forces to create a campaign in L.A. County and across California. That campaign is Know Before You Go. The name came from a brainstorm with a group of foster youth.
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
Family: Montserrat
Weight: 400
Size: 17px
Line-height: 25px
Letter-spacing: 2.5px
Color: Black #000000
Dos and Don'ts of Typeface usage:
- Do use a combination of uppercase and lowercase
- Do use only approved colors
- Do use only the approved typefaces
- Do align text in body copy flush left and ragged right
- Do avoid using all uppercase for long bodies of text
- Don't place type in a hard-to-read format
- Don't use special effects to emphasize type
- Don't change kerning when setting headlines or copy
- Don't distort the typefaces
VISUAL ELEMENTS
