This is meant to be a basic outline of styling guidelines from Women Who Code. It includes basic guidelines such as: logo use, color palatte and typeography. The guide was updated July 2022.
The logo is the heart, soul and center of the brand identity. The logo stands for: Focus on the mission, elevate your leadership, rise to the occasion and embrace inclusion. -Do not alter the Primary logo in anyway. -Logo height should never be smaller than 50px or the typeography will be illegible. -The alignment of the typeography should never be adjusted. Secondary Logo
- The "O" in the logo can be replaced with any symbol that WWC brand determines relevant. No other brands can replace the icon in the the logo -Icon should remain with the brand colors.
The consistent use of colors is vital to effective brand recognition and these colors should always be used with WWC. -Teal (#007D7F) is an inclusive color and is the primary color of the brand. -Yellow (#FCED17) is the accent color and may be used text color. This should be used in a 1:10 ratio with the text and background color. Black (#000000) will be used as the text color when on White (#FFFFFF).
- Purple (#BB27A8), Green (#479F48) and Blood Orange (#E86431)should be used as accents on social media. They are not primary colors and should be used sparingly. -Blue (#3045BF) is another foundational color and can be used similar to the yellow and teal. Fun fact: Orange was the top color in 1994, which was the year women in computer science degrees peaked. The blood orange is a nod to that time in history.
Proxima Nova is the main typeface for all brand executions. It is a variable-weight typeface and customizeable. WWC uses three weights. Use contrast between heavy and lighter weights to communicate importance or hierarchy of imformation. Text can be italicized only the the bold weight and should be used for headlines.
The three weights are: -Bold Italic -Medium -Regular
The six type commandments: -Stay left-aligned, Rag right - Its more legible. -Skip weight and Double size - It creates more contrast. -Align X heights or baselines - Align the baselines ( the line the bottom of a lower case x sits on) or the x-heights( the top of a lowercase x) -Watch the Rag- the lines on the right side: dont create shapes,or leave any single words hanging (orphans). -Give things space, if need - dont try and cram to much into one space. -Keep line length reasonable - try and keep lines between 45 and 70 characters long, depending on font size.
If you have any questions not addressed here, please leave a question in the comments for it to be addressed.