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.
- Dark Blue (Dark Mode Elements): hsl(209, 23%, 22%)
- Very Dark Blue (Dark Mode Background): hsl(207, 26%, 17%)
- Very Dark Blue (Light Mode Text): hsl(200, 15%, 8%)
- Dark Gray (Light Mode Input): hsl(0, 0%, 52%)
- Very Light Gray (Light Mode Background): hsl(0, 0%, 98%)
- White (Dark Mode Text & Light Mode Elements): hsl(0, 0%, 100%)
- Homepage Items: 14px
- Detail Page: 16px
- Family: Nunito Sans
- Weights: 300, 600, 800
For the icons, you can use a font icon library. Don't worry if the icons that you choose don't look exactly like they do on the design.
Some suggestions can be found below:
馃拵 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.