Colours

These are the hex colour values that are used throughout the design.

#F3F5F9 - This is the default background colour used throughout.
https://www.color-hex.com/color/F3F5F9

#E2E8F0 - This is the divide between the navigation menu and the rest of the content.
https://www.color-hex.com/color/E2E8F0

#1A1A1A - This is used for the majority of text.
https://www.color-hex.com/color/1A1A1A

#EEEEEE - This is the default hover colour for interactive elements, such as the navigation buttons.
https://www.color-hex.com/color/EEEEEE

#C9E1F8 - This is the selected or highlighted colour used for active elements. It is also used as the default colour for the week schedule dropdown selector.
https://www.color-hex.com/color/C9E1F8

#FFFFFF - White is used as the background of certain elements, such as the weekly schedule boxes.
https://www.color-hex.com/color/FFFFFF

#EAEFF5 - This colour is used as the border for any white background elements.
#eaeff5 Color Hex

#4943E8 - This colour is used to highlight the user's name.
https://www.color-hex.com/color/4943E8

Persistant Navigation Bar

After the user has logged into the App they will have a navigation menu shown on the left.
This will always be accessible.

Open

Background colour: #F3F5F9
Border colour: #E2E8F0
Item hover colour: #EEEEEE
Item selected colour: #C9E1F8

The open/close icon is positioned vertically centred.
This allows either clicking to action or can be dragged.

box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);

Open