Spaces:
Running
Running
| # 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 | |
| - Green 500: hsl(158, 36%, 37%) | |
| - Green 700: hsl(158, 42%, 18%) | |
| ### Neutral | |
| - Black: hsl(212, 21%, 14%) | |
| - Grey: hsl(228, 12%, 48%) | |
| - Cream: hsl(30, 38%, 92%) | |
| - White: hsl(0, 0%, 100%) | |
| ## Typography | |
| ### Body Copy | |
| - Font size (paragraph): 14px | |
| ### Font | |
| - Family: [Montserrat](https://fonts.google.com/specimen/Montserrat) | |
| - Weights: 500, 700 | |
| - Family: [Fraunces](https://fonts.google.com/specimen/Fraunces) | |
| - Weights: 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. | |