2020-09-03 00:16:21 +02:00
|
|
|
# Front-end Style Guide
|
|
|
|
|
|
|
|
|
|
## Layout
|
|
|
|
|
|
|
|
|
|
The designs were created to the following widths:
|
|
|
|
|
|
2020-09-06 12:27:32 +02:00
|
|
|
- Mobile: 375px x 812px (design file is 750x1624)
|
|
|
|
|
- Desktop: 1440px x 1024px
|
2020-09-03 00:16:21 +02:00
|
|
|
|
|
|
|
|
## Colors
|
|
|
|
|
|
|
|
|
|
### Primary
|
|
|
|
|
|
|
|
|
|
- Blue: hsl(223, 87%, 63%)
|
|
|
|
|
|
|
|
|
|
### Secondary
|
|
|
|
|
|
|
|
|
|
- Pale Blue: hsl(223, 100%, 88%)
|
|
|
|
|
- Light Red: hsl(354, 100%, 66%)
|
|
|
|
|
|
|
|
|
|
### Neutral
|
|
|
|
|
|
|
|
|
|
- Gray: hsl(0, 0%, 59%)
|
|
|
|
|
- Very Dark Blue: hsl(209, 33%, 12%)
|
|
|
|
|
|
|
|
|
|
## Typography
|
|
|
|
|
|
|
|
|
|
### Body Copy
|
|
|
|
|
|
|
|
|
|
- Font size: 20px
|
|
|
|
|
|
|
|
|
|
### Fonts
|
|
|
|
|
|
|
|
|
|
- Family: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin)
|
|
|
|
|
- Weights: 300, 600, 700
|
|
|
|
|
|
|
|
|
|
## Icons
|
|
|
|
|
|
|
|
|
|
For the social icons, you can use a font icon library. Some suggestions can be found below:
|
|
|
|
|
|
|
|
|
|
- [Font Awesome](https://fontawesome.com)
|
|
|
|
|
- [IcoMoon](https://icomoon.io)
|
|
|
|
|
- [Ionicons](https://ionicons.com)
|
