Colors

This document outlines best practices for using colors in our projects, focusing on brand colors, semantic colors, grayscale, and considerations for dark mode. Understanding and applying these principles is crucial for creating visually appealing and cohesive designs.

Brand Colors

Primary

• Use as the main color representing your brand identity.

Secondary/Accent

• Complementary to the primary color, used for highlighting and accentuating elements.

Semantic Colors

• Success (Green Tones): Use various shades of green to indicate success, completion, or positive actions.
• Warning (Yellow Tones): Utilize yellow tones for warnings or cautionary messages.
• Danger (Red Tones): Red tones should be used for error messages, alerts, or critical actions.
• Info (Tones of Primary or Secondary): Informational messages can use shades of either primary or secondary colors.

Grayscale

• Start with the Primary color, set encoding to HSL (Hue, Saturation, Lightness).
• Desaturate and create a palette by adjusting lightness.
• Avoid absolute blacks and whites.
• Scale:
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Dark Mode

• Desaturate Brand and Semantic colors.
• Use brightness rather than shadows to create depth.
• Avoid absolute blacks and whites.
• Dark mode specific colors:
  • Black (1E1E1E)
  • White (EBEBEB)

By adhering to these guidelines, you can effectively use colors to enhance your brand identity and user experience in both light and dark mode environments.