Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add basic style guidelines #156

Merged
merged 2 commits into from
Oct 31, 2022
Merged

add basic style guidelines #156

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9e9d15b
add basic style guidelines
valeriecollinsdesign Oct 28, 2022
dd80142
update style guidelines
valeriecollinsdesign Oct 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions STYLE_GUIDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# Style Guidelines

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.

## Logo

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.


## Color

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.

### Typeography

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.