40 lines
749 B
Markdown
40 lines
749 B
Markdown
|
# Front-end Style Guide
|
||
|
|
|
||
|
|
## Layout
|
||
|
|
|
||
|
|
The designs were created to the following widths:
|
||
|
|
|
||
|
|
- Mobile: 375px
|
||
|
|
- Desktop: 1440px
|
||
|
|
|
||
|
|
## Colors
|
||
|
|
|
||
|
|
### Primary
|
||
|
|
|
||
|
|
- Blue: hsl(246, 80%, 60%)
|
||
|
|
|
||
|
|
- Light red (work): hsl(15, 100%, 70%)
|
||
|
|
- Soft blue (play): hsl(195, 74%, 62%)
|
||
|
|
- Light red (study): hsl(348, 100%, 68%)
|
||
|
|
- Lime green (exercise): hsl(145, 58%, 55%)
|
||
|
|
- Violet (social): hsl(264, 64%, 52%)
|
||
|
|
- Soft orange (self care): hsl(43, 84%, 65%)
|
||
|
|
|
||
|
|
### Neutral
|
||
|
|
|
||
|
|
- Very dark blue: hsl(226, 43%, 10%)
|
||
|
|
- Dark blue: hsl(235, 46%, 20%)
|
||
|
|
- Desaturated blue: hsl(235, 45%, 61%)
|
||
|
|
- Pale Blue: hsl(236, 100%, 87%)
|
||
|
|
|
||
|
|
## Typography
|
||
|
|
|
||
|
|
### Body Copy
|
||
|
|
|
||
|
|
- Font size: 18px (card titles e.g. Work, Play)
|
||
|
|
|
||
|
|
### Font
|
||
|
|
|
||
|
|
- Family: [Rubik](https://fonts.google.com/specimen/Rubik)
|
||
|
|
- Weights: 300, 400, 500
|