41 lines
962 B
Markdown
41 lines
962 B
Markdown
# Front-end Style Guide
|
|
|
|
## Layout
|
|
|
|
The designs were created to the following widths:
|
|
|
|
- Mobile: 375px
|
|
- Desktop: 1440px
|
|
|
|
## Colors
|
|
|
|
### Neutral
|
|
|
|
- Dark Blue (Dark Mode Elements): hsl(209, 23%, 22%)
|
|
- Very Dark Blue (Dark Mode Background): hsl(207, 26%, 17%)
|
|
- Very Dark Blue (Light Mode Text): hsl(200, 15%, 8%)
|
|
- Dark Gray (Light Mode Input): hsl(0, 0%, 52%)
|
|
- Very Light Gray (Light Mode Background): hsl(0, 0%, 98%)
|
|
- White (Dark Mode Text & Light Mode Elements): hsl(0, 0%, 100%)
|
|
|
|
## Typography
|
|
|
|
### Body Copy
|
|
|
|
- Homepage Items: 14px
|
|
- Detail Page: 16px
|
|
|
|
### Fonts
|
|
|
|
- Family: [Nunito Sans](https://fonts.google.com/specimen/Nunito+Sans)
|
|
- Weights: 300, 600, 800
|
|
|
|
## Icons
|
|
|
|
For the icons, you can use a font icon library. Don't worry if the icons that you choose don't look exactly like they do on the design.
|
|
|
|
Some suggestions can be found below:
|
|
|
|
- [Font Awesome](https://fontawesome.com)
|
|
- [IcoMoon](https://icomoon.io)
|
|
- [Ionicons](https://ionicons.com) |