Front-end Style Guide

Layout

The designs were created to the following widths:

Mobile: 375px
Desktop: 1440px

Media Queries

Desktop: 1440px

Colors

Light

color-background: rgba(255, 255, 255, 1);
color-elements: rgba(255, 255, 255, 1);
color-text: rgba(0, 0, 0, 1);
color-placeholder: rgba(0, 0, 0, 1);
color-error: rgba(211, 114, 24, 1);
color-primary: rgba(24, 158, 211, 1);

Dark

color-background: rgba(0, 0, 0, 1);
color-elements: rgba(0, 0, 0, 1);
color-text: rgba(255, 255, 255, 1);
color-placeholder: rgba(255, 255, 255, 1);
color-error: rgba(211, 114, 24, 1);
color-primary: rgba(24, 158, 211, 1);

Typography

Sizes

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: