Create a site style guide

[travishathaway]

Description

After completing this issue, we will have a site style guide that will contain a color palette and a set of fonts that will inform the rest of the design work for conda.org. The goal of this issue is to pick the colors and fonts we will use for the website and to accordingly update the CSS files for the website.

Items we need:

• Primary color (obviously green, but which green? 😅 🟢 )
• Secondary color (basically a contrast color to our primary)
• Fonts
  • Header
  • Body/paragraph
• Background color (probably white, but again which one?

The color palette should be accessible. So please check it with a tool similar to this: https://webaim.org/resources/contrastchecker/

Tasks

• Pick a font combination (header and body text)
• Create a site color palette and update the site custom.css with this
  • Primary and secondary colors should be updated accordingly

[jaimergp]

From @isabela-pf's proposal at #1 (comment):

Green and a little bit of pattern using the repeated ‘C’s. Header text is League Mono bold, and body text is Junction. Colors are #3DB049, #454545, #F5F5F5, and #FCFCFC for the background. I’ve shown it on all the options described in the above comment.

I added some variants on the prototype now but it's far from perfect.

[travishathaway]

We are now voting on fonts! Please go checkout these open pull requests:

• Font combo one: Lato and OpenSans #64
• Font combo two: Oswald and Source Sans Pro #65
• Font combo three: Nunito and OpenSans #69

[asmitbm]

We are now voting on fonts! Please go checkout these open pull requests:

• Font combo one: Lato and OpenSans #64
• Font combo two: Oswald and Source Sans Pro #65
• Font combo three: Nunito and OpenSans #69

#69 👍🏻

[asmitbm]

Also, I just found out that Docusaurus has this color tool, where we can set our primary color and it will adjust light and dark colors for us. https://docusaurus.io/docs/styling-layout

[travishathaway]

Thanks for the recommendation @asmit2952

I was poking around with the accessibility tool to see how our primary color choice scores. Unfortunately, this does not have the needed contrast to be completely accessible (#43B02A vs #FFFFFF).

I propose that we just pick a darker version of the primary color we currently have. A color that gives a better score is #348721

This wouldn't apply to dark mode because the color contrast there is good enough.