Color Scheme and Typography

[tophergates]

Color Scheme

Establish a color scheme for Pet Hero in addition to typography requirements. For example:

Color Scheme

Name	RGB	HSL	HEX
Primary	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx
Primary Light	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx
Primary Dark	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx
Accent 1	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx
Accent 2	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx
Typography Light	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx
Typography Dark	rgb(xx, xx, xx)	hsl(xx, xx%, xx%)	#xxxxxx

Typography

Name	Font Family	Font
Special (Logo)	sans-serif	"font name", [fallbacks], sans-serif
Headers	serif	"font name", [fallbacks], serif
Primary Text	sans-serif	"font name", [fallbacks], sans-serif
Accent Text	sans-serif	"font name", [fallbacks], sans-serif

This will eventually be added to a master style guide on the Wiki to keep branding, formatting, and views consistent across the application.

[tophergates]

@baltz1 would you be willing to work on this? I have created the home page mock up, which I posted on the team discussion board, that you can use as a guide for the colors. You can use https://coolors.co/ to assist with this.

In addition @ryancmartin has been working on putting together the home page and has been looking for the right typography to use. The two of you can work together to determine the right typography style.

[baltz1]

@ryancmartin i came across some fonts i wrote my thoughts on the ones i choose let me know what you think. If none of them work out let me know ill look into it more. Header/Logo font link to the font right here: https://fonts.google.com/?selection.family=Bangers|Concert+One|Fredoka+One

Concert One: I enjoy how this one is for the logo and also maybe use it as well for headers i feel that it is almost identical to the mock up

Fredoka One: I feel this one is completely identical to the logo but does not work well as header

Banger: This one has a real comic book feel to it thought you might want to check this one out, to help fit the style of the page.

Primary text Link to primary text fonts: https://fonts.google.com/?category=Serif,Sans+Serif&selection.family=Fira+Sans|Neuton|Work+Sans

Fira Sans: I like how it is a little bold in the curve of text when used as primary text

work sans: Not as bold as fira sans but it is clean primary text.

Neuton: text looks clean and has a nice bold on the curves of the character.

[baltz1]

Here is the color scheme sitting flowing together with out the typography color https://coolors.co/edf5ea-d8dfd5-ffffff-33658a-a2c4c9

• Typography logo dark: #FF9900 rgb(255,153,0)

• Typography logo light: #FEE498 rgb(254,228,152)

• Accent dark: #33658A rgb(51,101,138)

• Accent light: #A2C4C9 rgb(162,196,201)

• Primary light: #FFFFFF rgb(255,255,255)

• Primary color: #EDF5EA rgb(237,245,234)

• Pirmary dark: #D8DFD5 rgb(216,223,213)

• Jumbotron primary #030202 rgb(3,2,2)

• Jumbotron light #363636 rgb(54,54,54)

[elioqoshi]

I'd suggest to not go for a complete comic feel typeface for the UI Headers as it will not be ideal for the UX. Sure it can be playful and not serious. Something along the lines of Duolingo (maybe even more playful would be nice)

[tophergates]

@elioqoshi I agree with what you're saying. If the design is too devoted to the comic book style we could detract from the main message we are trying to achieve.

@ryancmartin and I did some pair programming last night and finished up the header of the mobile view. There is still some work to be done to touch this up a bit more, but what do you think about our usage of the fonts here? In your opinion, are we too heavy on the comic-style?

[tophergates]

@baltz1 really nice job on the font recommendations. After trying out multiple fonts in the context of the design, I think I like Fira Sans for primary text content, Bangers for headings, and Shadows Into Light for subheadings. The example header view above demonstrates the usage of these three fonts. I think it would be good to stick to no more than two or three fonts in the design. The color scheme looks great as well. Nice job.

[baltz1]

Thank you @tophergates , i wanted to give out a list of options for the team to narrow down which font fits best for the site, i really like the Shadows Into Light looks really nice as a subhead in my opinion.

[ryancmartin]

@baltz1 @elioqoshi Thank you guys for your input on the fonts and color schemes. The fonts you suggested ended up working very well. Sorry I have not been very active on here lately as my work schedule and life in general is all up in the air right now but I have been trying to make more time.

@elioqoshi, Do you have any input on how the home page is looking so far? Do you think we struck a good balance between being playful/serious? I think we are happy with it overall but I'm interested to hear your thoughts since you mentioned it.

[tophergates]

Alright all. I'm going to close this issue since I think we have come to an agreement on the font styles and color scheme. I've outlined these selections in the repo Wiki on the Style Guide page. If there are any objections or further point to be made let me know and I'll reopen this issue.