Design

Framework

• Bootstrap 4.5.x

For this application, we are using Bootstrap version 4.5 to align with our current Django lessons on the Full-Stack Frameworks module.

This will also allow us to utilize django-crispy-forms for cleaner forms.

---

Color Scheme

Palette: Primary Colors

--p-orange	--p-blue	--p-grey	--p-navy	--p-red
#E84610	#009FE3	#4A4A4F	#445261	#D63649

Palette: Secondary Colors

--s-grey	--s-yellow	--s-pink	--s-teal
#E6ECF0	#EFB920	#FF5A60	#23BBBB

Palette: Tertiary Colors

--t-grey
#E0E7FF

CSS Color :root Variables

:root {
    /* P = Primary | S = Secondary | T = Tertiary */
    --p-orange: #E84610;
    --p-blue: #009FE3;
    --p-grey: #4A4A4F;
    --p-navy: #445261;
    --p-red: #D63649;
    --s-grey: #E6ECF0;
    --s-yellow: #EFB920;
    --s-pink: #FF5A60;
    --s-teal: #23BBBB;
    --t-grey: #E0E7FF;
    --bg-grey: #F5F5F5;
}

/* How To Use CSS Root Variables */
element {
    color: var(--p-orange);
    background-color: var(--bg-grey);
}

---

Icons

• Font Awesome 5.14

Please be sure to use the Font Awesome version 5 icon set, not version 4.

Library of all Font Awesome version 5 free icons.

---

Typography

• Montserrat : primary font-family, with sans-serif fallback.
• Rubik : secondary font-family, with sans-serif fallback.

Both fonts above come from Google Fonts.