Front-end Style Guide

Layout

The designs were created to the following widths:

Mobile: 375px
Desktop: 1440px

Colors

Primary

very-light-purple: hsl(240, 100%, 96%);
light-purple: hsl(235, 100%, 83%);
medium-purple: hsl(234, 100%, 75%);
dark-purple: hsl(234, 100%, 69%);
color: hsl(218, 13%, 48%);
color-icon: hsl(218, 20%, 39%);
color-nav-p: hsl(218, 31%, 30%);

Neutral

color-heading-mobile: hsl(218, 54%, 20%);
color-heading-desktop: hsl(218, 76%, 15%);
light-blue: hsl(234, 97%, 62%);
bright-blue: hsl(235, 72%, 48%);
color-white: hsl(0, 0%, 100%);
color-milk-white: hsl(0, 0%, 90%);
color-light-gray: hsl(217, 13%, 74%);
color-smoke-white: hsl(240, 100%, 96%);
color-semi-white: hsl(218, 14%, 89%);

Typography

Body Copy

Font size: 16px

Font

Family: Poppins
Weights: 400, 500, 600, 700