Create a static style guide

[samajammin]

Is your feature request related to a problem? Please describe.

Build a static style guide that serves as a reference for composing ethereum.org’s UI. To include:

• typography (typeface, font hierarchy & sizes)
• color palette for the site
• spacing rules
• common UI components (e.g. links, buttons, cards, form inputs, dialog notifications) across their states (e.g. hover, click, active, disabled)

This will help us code UI components for the site & establish consistent styles in our CSS (e.g. $colorPrimary $colorSecondary variables, .ui-card .button-primary classes)

Describe the solution you'd like

Build & publish a public Figma project/file

Describe alternatives you've considered

Additional context

Up until now, components have been built ad hoc with no consistent style to guide development.

[samajammin]

Hey folks! We've been working with some amazing designers from the community to create an updated style guide for the website, and we'd love your feedback: https://www.figma.com/file/rQK2dt9eaLOMmvTOf5ifdr/Ethereum.org-Style-Guide-RC1

The style guide will be used to upgrade the visual look of the site over the coming weeks, and be a helpful starting point for designers who want to contribute with new pages, or new takes on existing page designs.

Let us know what you think!

[samajammin]

Thank you all for the feedback! We've made adjustments to the style guide based on community input. Closing this out in favor of #753. Once #753 is complete, we'll continue to gather feedback & iterate on the site design.