rmcg.dev/projects/FrontendMentor/junior/time-tracking-dashboard/style-guide.md

749 B

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