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

• Marine blue: hsl(213, 96%, 18%)
• Purplish blue: hsl(243, 100%, 62%)
• Pastel blue: hsl(228, 100%, 84%)
• Light blue: hsl(206, 94%, 87%)
• Strawberry red: hsl(354, 84%, 57%)

Neutral

• Cool gray: hsl(231, 11%, 63%)
• Light gray: hsl(229, 24%, 87%)
• Magnolia: hsl(217, 100%, 97%)
• Alabaster: hsl(231, 100%, 99%)
• White: hsl(0, 0%, 100%)

Typography

Body Copy

• Font size (paragraph): 16px

Font

• Family: Ubuntu
• Weights: 400, 500, 700

💎 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.