style-guide.md

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

• White: hsl(0, 0%, 100%)
• Black: hsl(0, 0%, 0%)
• Dark Gray: hsl(0, 0%, 55%)
• Very Dark Gray: hsl(0, 0%, 41%)

Neutral

Typography

Body Copy

• Font size: 15px

Fonts

• Family: Alata

• Weight: 400

• Family: Josefin Sans

• Weight: 300

Icons

We provide the required social icons. But, if you prefer, you can use a font icon library. Some suggestions can be found below:

• Font Awesome
• IcoMoon
• Ionicons

💎 Upgrade to Pro for design file access to see all design details and get hands-on experience using a professional workflow with tools like Figma.