In this project, you’ll be building your own basic design system for a website. In essence, you’ll be building a website to help you build MORE websites in the future! On your site, you’ll collect all the colors, fonts, and some of the repeating styles.
In this project, you’ll build a style guide/design system for your website. Developers and designers use design systems in order to organize the look and feel of a website or web application. Design systems help to document the visual vocabulary and reusable components of a large website.
Your style guide/design system will include at least a section on colors, fonts, and specific text styles, but it can be extended to as many other areas as you’d like.
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
In addition to the list of possible fonts, your style guide should include a section for specific text styles for page elements. 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.
© 2021 by mayur