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

• Nutmeg: hsl(14, 45%, 36%)
• Dark Raspberry: hsl(332, 51%, 32%)

Neutral

• White: hsl(0, 0%, 100%)
• Rose White: hsl(330, 100%, 98%)
• Eggshell: hsl(30, 54%, 90%)
• Light Grey: hsl(30, 18%, 87%)
• Wenge Brown: hsl(30, 10%, 34%)
• Dark Charcoal: hsl(24, 5%, 18%)

Typography

Body Copy

• Font size (paragraph): 16px

Fonts

• Family: Young Serif

• Weights: 400

• Family: Outfit

• Weights: 400, 600, 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.