Colors for the project are classified based on their names. The class naming scheme and the default colors are influenced by the Tailwind CSS project. Each color is represented by two HTML classes. One for the text color and the other for the background color.

When creating classes for a new color, duplicate the zs-section below and replace (do not rename) the class names on elements with text-{color name}-{scale unit} and bg-{color name}-{scale unit} with text-{new color name}-{scale unit} and bg-{new color name}-{scale unit} respectively.

  
  /* 
   * Class naming convention for text color.
   */
  .text-{color name}-{scale unit}
  
  /*
   * Class naming convention for background color.
   */
  .bg-{color name}-{scale unit}  
  

• Blue Violet
• Navy Blue
• Fun Blue
• Yellow
• Red
• Green
• Orange
• Gray
• Neutrals