Skip to content

Latest commit

 

History

History
50 lines (33 loc) · 2.11 KB

style-guide.md

File metadata and controls

50 lines (33 loc) · 2.11 KB
Raw

Front-end Style Guide

Layout

The designs are crafted for the following screen widths:

  • Mobile: 360px
  • Desktop: 1280px

📏 While these are the primary design widths, make sure the layout is flexible and meets accessibility standards across a wide range of devices, from 320px mobile screens to extra-large desktops.

Colors

  • Background: hsl(0, 0%, 100%) - A clean, white background for a fresh look.
  • Accent: hsl(275, 100%, 97%) - A soft pink used to highlight sections and create visual interest.
  • Text: hsl(292, 16%, 49%) - A subdued purple for main text, providing good readability against the background.
  • Header: hsl(292, 42%, 14%) - A darker purple used for headings and important elements to create contrast.

Typography

Body Copy

  • Font Size: 16px for standard text to ensure readability.
  • Line Height: 1.5 to enhance text legibility and improve readability.

Font

  • Family: Work Sans - A modern sans-serif font that provides clarity and professionalism.
  • Weights:
    • 400: Regular weight for body text.
    • 600: Semi-bold weight for subheadings and emphasis.
    • 700: Bold weight for main headings and important text.

Buttons and Interactions

  • Primary Button:

    • Background Color: hsl(275, 100%, 97%)
    • Text Color: hsl(292, 42%, 14%)
    • Hover State: Background color darkens slightly, text remains unchanged.

  • Interactive Elements:

    • Focus State: Add a visible outline or background change to indicate focus for improved accessibility.
    • Hover State: Ensure a clear visual change, such as a color shift or underline, to indicate interactivity.

Spacing and Alignment

  • Padding: Use consistent padding values to create a cohesive look across components. Recommended padding for container elements is 1rem.
  • Margins: Apply margins to separate sections and maintain readability. Standard margin for elements is 1rem.

By adhering to these style guidelines, you’ll ensure a consistent, accessible, and visually appealing user experience across all devices.