Overview
This project is slightly different than others you have encountered thus far on Codecademy. Instead of a step-by-step tutorial, this project contains a series of open-ended requirements which describe the project you’ll be building. There are many possible ways to correctly fulfill all of these requirements, and you should expect to use the internet, Codecademy, and other resources when you encounter a problem that you cannot easily solve.
Project Goals
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.
Colors
Neutral
Main visual
black
#000000
white
#FFFFFF
Primary
CTA
Primary
#0075FF
Secondary
Importance
Secondary
#FFB800
Success
Completed, done
Success
#00A52F
Error
Mistakes, wrong input
Error
#D90000
Fonts
Space Mono
Title, subtitles, captions
regular
The quick brown fox jumps over the lazy dog.
italic
The quick brown fox jumps over the lazy dog.
bold
The quick brown fox jumps over the lazy dog.
bold italic
The quick brown fox jumps over the lazy dog.
Roboto
Content, descriptions
regular
The quick brown fox jumps over the lazy dog.
italic
The quick brown fox jumps over the lazy dog.
bold
The quick brown fox jumps over the lazy dog.
bold italic
The quick brown fox jumps over the lazy dog.
Typography
H1: Display
Space Mono / Bold (700)
48px / 64 / -2%
Main page title
H2: Headline
Space Mono / Bold (700)
36px / 44 / 0%
Content headline
H3: Title
Space Mono / Bold (700)
24px / 32 / 2%
Content title
H4: Subtitle
Space Mono / Regular (400)
24px / 32 / 2%
Content subtitle
B: Body text
Roboto / Regular (400)
16px / 22 / 4.8%
Paragraph text
C: Caption
Space Mono / Regular (400)
12px / 18 / 7.4%
Captions and labels
U: Underlined text
Space Mono / Regular (400)
12px / 18 / 7.4%
Underlined and links