Skip to content

style-guide.md

Latest commit

 

History

History
50 lines (29 loc) · 1.18 KB

style-guide.md

File metadata and controls

50 lines (29 loc) · 1.18 KB

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

Neutral

  • Neutral 900: hsl(0, 0%, 7%)
  • Neutral 800: hsl(0, 0%, 15%)
  • Neutral 500: hsl(240, 3%, 46%)
  • Neutral 400: hsl(240, 1%, 59%)
  • Neutral 0: hsl(0, 0%, 100%)

Blue

  • Blue 600: hsl(214, 100%, 55%)
  • Blue 400: hsl(210, 100%, 65%)

Red

  • Red 500: hsl(354, 63%, 57%)

Green

  • Green 500: hsl(140, 63%, 57%)

Yellow

  • Yellow 400: hsl(49, 85%, 70%)

Typography

Body Copy

  • Font size (labels): 16px

Font

  • Family: Sora
  • 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. The design file for this challenge also includes a design system and tablet layout to help you build a more accurate solution faster.