frontend-mentor/results-summary-component/style-guide.md

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Light red: hsl(0, 100%, 67%)
• Orangey yellow: hsl(39, 100%, 56%)
• Green teal: hsl(166, 100%, 37%)
• Cobalt blue: hsl(234, 85%, 45%)

Gradients

• Light slate blue (background): hsl(252, 100%, 67%)

• Light royal blue (background): hsl(241, 81%, 54%)

• Violet blue (circle): hsla(256, 72%, 46%, 1)

• Persian blue (circle): hsla(241, 72%, 46%, 0)

Neutral

• White: hsl(0, 0%, 100%)
• Pale blue: hsl(221, 100%, 96%)
• Light lavender: hsl(241, 100%, 89%)
• Dark gray blue: hsl(224, 30%, 27%)

Notes

Use transparency to get the colour variations necessary to match the design. Hint: look into using hsla().

Typography

Body Copy

• Font size (paragraphs): 18px

Font

• Family: Hanken Grotesk
• Weights: 500, 700, 800