web-design-system's Introduction

web-design-system

My version of the Codecademy project Build a Website Design System

The tasks required were:

Your style guide should include a labeled section outlining the colors to be used.

Each color should have:

A name (you can come up with this name yourself)
A box displaying the color itself.
The CSS value used to create the color (in hex, rgb(), rgba(), hsl(), or hsla()).
An optional description of how you intend to use the colors.

Your style should include a labeled section of the fonts to be used (we recommend importing fonts from Google Fonts).

For each font, the goal is to to demonstrate the various styles that you intend to use (font weight, style, size, and text decorations). To do this, you should include the following for every font:

The font name
A series of styles that you intend to use (for example, styles could include: plain, bold and italic, underlined).
For each style, include a sentence or series of words to demonstrate the text style (our example site uses the quick brown fox…). Make sure to display each of the sections in the proper font, size, and style.

In addition to the list of possible fonts, your style guide should include a section for specific text styles for page elements. For example, you could set main heading (<h1>) guidelines about text size, fonts, font styles, font weight, and more.

Include at least 3 element styles, and ideally as many as you’d like to use in future sites.

For each page element, include:

A page element name (for example, “Subheading”).
All style rules (for example, font-weight: 700).

Add any additional styles that you’d like to include to make your style guide/design system look great. This could include positioning, layout, additional colors, box model properties, and more.