Skip to content

Latest commit

 

History

History
117 lines (97 loc) · 2 KB

style-guide.md

File metadata and controls

117 lines (97 loc) · 2 KB
Raw

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

Report for Jeremy Robson Daily Weekly Monthly Work 5hrs

Previous - 7hrs

32hrs

Previous - 36hrs

103hrs

Previous - 128hrs

Play 1hr
<!-- daily -->
Previous - 2hrs
<!-- daily -->
10hrs
<!-- weekly -->
Previous - 8hrs
<!-- weekly -->
23hrs
<!-- monthly -->
Previous - 29hrs
<!-- monthly -->

Study 0hrs
<!-- daily -->
Previous - 1hr
<!-- daily -->
4hrs
<!-- weekly -->
Previous - 7hrs
<!-- weekly -->
13hrs
<!-- monthly -->
Previous - 19hrs
<!-- monthly -->

Exercise 1hr
<!-- daily -->
Previous - 1hr
<!-- daily -->
4hrs
<!-- weekly -->
Previous - 5hrs
<!-- weekly -->
11hrs
<!-- monthly -->
Previous - 18hrs
<!-- monthly -->

Social 1hr
<!-- daily -->
Previous - 3hrs
<!-- daily -->
5hrs
<!-- weekly -->
Previous - 10hrs
<!-- weekly -->
21hrs
<!-- monthly -->
Previous - 23hrs
<!-- monthly -->

Self Care 0hrs
<!-- daily -->
Previous - 1hr
<!-- daily -->
2hrs
<!-- weekly -->
Previous - 2hrs
<!-- weekly -->
7hrs
<!-- monthly -->
Previous - 11hrs
<!-- monthly -->

Body Copy

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

Font

  • Family: Rubik
  • Weights: 300, 400, 500