Front-end Style Guide

Layout

The designs were created to the following widths:

Mobile: 375px
Desktop: 1440px

Colors

Neutral

Dark Blue (Dark Mode Elements): hsl(209, 23%, 22%) in RGB -> #2B3945
Very Dark Blue (Dark Mode Background): hsl(207, 26%, 17%) in RGB -> #202C37
Very Dark Blue (Light Mode Text): hsl(200, 15%, 8%) in RGB -> #111517
Dark Gray (Light Mode Input): hsl(0, 0%, 52%) in RGB -> #858585
Very Light Gray (Light Mode Background): hsl(0, 0%, 98%) in RGB -> FAFAFA
White (Dark Mode Text & Light Mode Elements): hsl(0, 0%, 100%) in RGB -> FFFFFF

Typography

Body Copy

Homepage Items: 14px
Detail Page: 16px

Fonts

Family: Nunito Sans
Weights: 300, 600, 800

Icons

For the icons, you can use a font icon library. Don't worry if the icons that you choose don't look exactly like they do on the design.

Some suggestions can be found below: