Skip to content

Latest commit

 

History

History
93 lines (57 loc) · 2.15 KB

style-guide.md

File metadata and controls

93 lines (57 loc) · 2.15 KB
Raw

Front-end Style Guide

Layout

The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

Colors

Theme 1

Backgrounds

  • Very dark desaturated blue (main background): hsl(222, 26%, 31%)
  • Very dark desaturated blue (toggle background, keypad background): hsl(223, 31%, 20%)
  • Very dark desaturated blue (screen background): hsl(224, 36%, 15%)

Keys

  • Desaturated dark blue (key background): hsl(225, 21%, 49%)

  • Desaturated dark blue (key shadow): hsl(224, 28%, 35%)

  • Red (key background, toggle): hsl(6, 63%, 50%)

  • Dark red (key shadow): hsl(6, 70%, 34%)

  • Light grayish orange (key background): hsl(30, 25%, 89%)

  • Grayish orange (key shadow): hsl(28, 16%, 65%)

Text

  • Very dark grayish blue: hsl(221, 14%, 31%)
  • White: hsl(0, 0, 100%)

Theme 2

Backgrounds

  • Light gray (main background): hsl(0, 0%, 90%)
  • Grayish red (toggle background, keypad background): hsl(0, 5%, 81%)
  • Very light gray (screen background): hsl(0, 0%, 93%)

Keys

  • Dark moderate cyan (key background): hsl(185, 42%, 37%)

  • Very dark cyan (key shadow): hsl(185, 58%, 25%)

  • Orange (key background, toggle): hsl(25, 98%, 40%)

  • Dark orange (key shadow): hsl(25, 99%, 27%)

  • Light grayish yellow (key background): hsl(45, 7%, 89%)

  • Dark grayish orange (key shadow): hsl(35, 11%, 61%)

Text

  • Very dark grayish yellow: hsl(60, 10%, 19%)
  • White (text): hsl(0, 0, 100%)

Theme 3

Backgrounds

  • Very dark violet (main background): hsl(268, 75%, 9%)
  • Very dark violet (toggle background, keypad background, screen background): hsl(268, 71%, 12%)

Keys

  • Dark violet (key background): hsl(281, 89%, 26%)

  • Vivid magenta (key shadow): hsl(285, 91%, 52%)

  • Pure cyan (key background, toggle): hsl(176, 100%, 44%)

  • Soft cyan (key shadow): hsl(177, 92%, 70%)

  • Very dark violet (key background): hsl(268, 47%, 21%)

  • Dark magenta (key shadow): hsl(290, 70%, 36%)

Text

  • Light yellow: hsl(52, 100%, 62%)
  • Very dark blue: hsl(198, 20%, 13%)
  • White (text): hsl(0, 0, 100%)

Typography

Body Copy

  • Font size (numbers): 32px

Font