aWebsite Design System

Build whatever I want — faster.

Codecademy WEB DEVELOPMENT FOUNDATIONS Challenge Project: Build a Website Design System

This is my attempt at the challenge project I'm doing for the Web Development Foundations part (Chapter 1-7) of the Full-Stack Engineer Career Path I'm participating in at Codecademy. Check out the repo for this project to read more about what I learned from working on it.

Colors

I created this color palette at Coolors and used the color palette page for initial page design inspiration. For color naming convention I looked to Bootstrap for this one.

  • Primary 1D3557
  • Secondary 457B9D
  • Tertiary A8DADC
  • Background F1FAEE
  • Danger E63946
  • Gray 636369
View on Coolors

Fonts

For this section I took inspiration from a fellow student @final-aerith and the website design system she created. The Inter font is used by both Coolors and Tailwind CSS! The Fira Code font I took from Tailwind.

aA Inter ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789¡!$%&/()=?;: ¡“”@\
View on Google Fonts
aA Fira Code ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789¡!$%&/()=?;: ¡“”@\
View on Google Fonts

Text Styles

Initially I took inspiration from the color palette page designing the headings and footer text. For fine tuning however, I looked at Tailwind CSS and how they designed their docs pages.

Heading 1

Black 900 at 3 rem | inherit line height | 100% max width | Black

Whereas a common understanding of these rights and freedoms is

Heading 2

Extrabold 800 at 2 rem | 2.25 rem line height | 72 rem max width | Primary

No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.

Heading 3

Bold 700 at 1.25 rem | 1.75 rem line height | 56 rem max width | Black

Everyone has the right to an effective remedy by the competent national tribunals for acts violating the fundamental rights granted him by the constitution or by law.

Paragraph

Regular 400 at 1 rem | 1.75 rem line height | 48 rem max width | Gray *

No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.

Small Text

Light 300 at .875 rem | 1.5 rem line height | 32 rem max width | Gray Black White

Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance. Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers. Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.

* Font size set at 16 pixels at root

Utility Classes

I was glad to see utility classes be included in the Web Development Foundations part of the career path. Obviously, I took a lot of inspiration from Tailwind CSS here as well.

Font Size

Utilities for controlling the font size of an element.

Class Properties
text-xs font-size: .75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */
text-2xl font-size: 2rem; /* 32px */
line-height: 2.25rem; /* 36px */
text-3xl font-size: 3rem; /* 48px */
line-height: inherit;
text-4xl font-size: 8rem; /* 128px */
line-height: inherit;

Font Weight

Utilities for controlling the font weight of an element.

Class Properties
font-light font-weight: 300;
font-normal font-weight: 400;
font-medium font-weight: 500;
font-semibold font-weight: 600;
font-bold font-weight: 700;
font-extrabold font-weight: 800;
font-black font-weight: 900;

Text Color

Utilities for controlling the text color of an element.

Class Properties
text-primary color: #1D3557;
text-secondary color: #457B9D;
text-tertiary color: #A8DADC;
text-background color: #F1FAEE;
text-danger color: #E63946;
text-gray color: #636369;
text-black color: #000;
text-white color: #fff;

Background Color

Utilities for controlling an element's background color.

Class Properties
bg-primary background-color: #1D3557;
bg-secondary background-color: #457B9D;
bg-tertiary background-color: #A8DADC;
bg-background background-color: #F1FAEE;
bg-danger background-color: #E63946;
bg-gray background-color: #636369;
bg-black background-color: #000;
bg-white background-color: #fff;

Buttons

For the buttons and the overall look and feel of the page I took what I learned from the book Refactoring UI by Adam Wathan and Steve Schoger.