Skip to content

Latest commit

 

History

History
43 lines (27 loc) · 1.1 KB

style-guide.md

File metadata and controls

43 lines (27 loc) · 1.1 KB
Raw

Front-end Style Guide

Layout

The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.

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

💎 Upgrade to Pro for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.