Snapshots of completed Figma mockups can be found on the Hi-Fi Prototypes page.

The implementation of this system is accomplished using the Material-UI framework for React. For more detail on this, see the Frontend documentation.

Logo

Focus logo - Download from Google Drive Should only be seen once on each page. Should be given sufficient padding as to avoid overcrowding. Colour should either be #30A0F5 on a light background, or white on a blue background.

Focus Icon - Download from Google Drive To be used as the page icon. and should be #30A0F5.

Colours

#30A0F5 - To be used as an accent colour on widgets and primary buttons.
#606BEA to #16D1FA - Secondary Blue colour for gradients. Only used on the landing page.
#000000 - Text headers and important text. Also used as the global drop shadow colour.
#7D7D7D - Deactivated/sub-text color for buttons, and widgets.
#E04F5F - Warning/Cancel colour used sparingly throughout some of the widgets.
#F0F2F5 - Background colour for the widget dashboard.

Typography

Daily Focus uses Ropa Sans as its heading and body font.

Heading - Ropa Sans 36px
Body - Ropa Sans 24px

Components

Buttons

All buttons follow the same standard shape:

Height: 40px
Border radius: 50%
Box Shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)

Primary button

A primary button is used for the main action on a page - the use of our primary colour invites the user to that action. In most instances, there should only be one primary button within a given UI container (modal, window, etc) to avoid overwhelming the user.

Background colour: --primary-colour
Color: #ffffff

Secondary button

A secondary button is used for secondary actions, such as cancelling an action or closing a modal dialog.

Background colour: #ffffff
Border: 1px solid --primary-colour
Color: #000000

Icons

Daily Focus uses icons from Font Awesome 5.

Modals

Modal dialogs are used when special interaction from the user is needed, overlaying on top of the existing UI. Clicking outside of the modal should dismiss it.

Background colour: #ffffff
Border radius: 25px
Box shadow: 2px 4px 31px 13px rgba(0, 0, 0, 0.1);