50 lines
944 B
Markdown
50 lines
944 B
Markdown
|
# 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](https://fonts.google.com/specimen/Hanken+Grotesk)
|
||
|
|
- Weights: 500, 700, 800
|