Front-end Style Guide

Layout

The designs were created to the following widths:

Mobile: 375px
Desktop: 1440px

Colors

Primary

Blue: hsl(246, 80%, 60%)
Light red (work): hsl(15, 100%, 70%)
Soft blue (play): hsl(195, 74%, 62%)
Light red (study): hsl(348, 100%, 68%)
Lime green (exercise): hsl(145, 58%, 55%)
Violet (social): hsl(264, 64%, 52%)
Soft orange (self care): hsl(43, 84%, 65%)

Neutral

Very dark blue: hsl(226, 43%, 10%)
Dark blue: hsl(235, 46%, 20%)
Desaturated blue: hsl(235, 45%, 61%)
Pale Blue: hsl(236, 100%, 87%)

Typography

Body Copy

Font size: 18px (card titles e.g. Work, Play)

Font

Family: Rubik
Weights: 300, 400, 500

Report for Jeremy Robson

Daily Weekly Monthly

Work 5hrs Previous - 7hrs 32hrs Previous - 36hrs 103hrs Previous - 128hrs

Play 1hr Previous - 2hrs 10hrs Previous - 8hrs 23hrs Previous - 29hrs

Study 0hrs Previous - 1hr 4hrs Previous - 7hrs 13hrs Previous - 19hrs

Exercise 1hr Previous - 1hr 4hrs Previous - 5hrs 11hrs Previous - 18hrs

Social 1hr Previous - 3hrs 5hrs Previous - 10hrs 21hrs Previous - 23hrs

Self Care 0hrs Previous - 1hr 2hrs Previous - 2hrs 7hrs Previous - 11hrs monthly