othamae / build-a-website-design-system

WEB DEVELOPMENT FOUNDATIONS

Challenge Project: Build a Website Design System

Project Requirements

Your style guide/design system will include at least a section on colors, fonts, and specific text styles.

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.

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…).

For each page element, include:

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

URL to see the result:

https://othamae.github.io/Build-a-Website-Design-System/