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

• Pink: hsl(322, 100%, 66%)
• Light Pink: hsl(321, 100%, 78%)
• Light Red: hsl(0, 100%, 63%)

Neutral

• Very Dark Cyan: hsl(192, 100%, 9%)
• Very Pale Blue: hsl(207, 100%, 98%)

Typography

Headings

• Family: Poppins
• Weights: 700

Body

• Family: Open Sans
• Weights: 400, 600, 700

Icons

For the social icons, 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.