38 lines
867 B
Markdown
38 lines
867 B
Markdown
# Front-end Style Guide
|
|
|
|
## Layout
|
|
|
|
The designs were created to the following widths:
|
|
|
|
- Mobile: 375px
|
|
- Desktop: 1440px
|
|
|
|
> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
|
|
|
|
## Colors
|
|
|
|
### Primary
|
|
|
|
- Soft red: hsl(10, 79%, 65%)
|
|
- Cyan: hsl(186, 34%, 60%)
|
|
|
|
### Neutral
|
|
|
|
- Dark brown: hsl(25, 47%, 15%)
|
|
- Medium brown: hsl(28, 10%, 53%)
|
|
- Cream: hsl(27, 66%, 92%)
|
|
- Very pale orange: hsl(33, 100%, 98%)
|
|
|
|
## Typography
|
|
|
|
### Body Copy
|
|
|
|
- Font size: 18px
|
|
|
|
### Font
|
|
|
|
- Family: [DM Sans](https://fonts.google.com/specimen/DM+Sans)
|
|
- Weights: 400, 700
|
|
|
|
> 💎 [Upgrade to Pro](https://www.frontendmentor.io/pro?ref=style-guide) for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.
|