Skip to main content

Colors

This page explains the standard UI/UX colors used in the MIS plugins to better fit in.
These standard colors shall be defined in the tailwindcss configurations, and shall be used/referenced by the name ( not color-code or html/css names ) around the project.

- white​

Is the standard contrast color and used to display the contrast overlay. Examples are as follow:

  • Background color
  • Text color inside primary-colored buttons
  • Text color in dark-mode

Color-Code: #FFFFFF

- black​

Is used to create the opposite contrast color with white mix. Examples are as follow:

  • Text color when the background is white
  • lines and borders when background is white

Color-Code: #000000

- lightdark​

Is used to create secondary level of contrast for the white color. Examples are as follow:

  • Navbar clicks

Color-Code: #666666

- lightgray​

Is used to create the third level of contrast for the white color. Examples are as follow:

  • Page background color when widget background colors are white
  • Handlebars and scrollbars when the primary contrast is white

Color-Code: #FAFAFA

- darkgray​

Is used to create contrast with lighgray mix. Examples are as follow:

  • Text color ( mostly subtitles ) when background is lighgray,
  • borders, placeholders, bars and shadows with the lightgray background mix

Color-Code: #B5B5B5

- primary​

Is used to highlight the focus point of the component. Examples are as follow:

  • CTA buttons
  • selection status

Color-Code: #0AA6E7

- secondary​

Is used to less-highlight the focus point of the component after primary Examples are as follow:

  • Color THs of the tables,
  • The buttons used in the tables.

Color-Code: #73D5FF

- red​

In our system, we understand the importance of quickly communicating important information to the user. That's why we use red color as a visual cue to indicate potential dangers or warnings. Red is a color that naturally draws attention, and using it for alarms and warnings helps ensure that users take notice and proceed with caution.

Our use of red in the system is deliberate and carefully implemented to provide users with clear and concise warnings. We understand that the safety and security of our users are of utmost importance, and our use of red color is just one of the many ways we strive to keep them informed and protected.

Color-Code: #EB5252

- green​

Green is a color commonly associated with growth, success, and prosperity. In our system, we utilize this positive association by using green to indicate the successful completion or recording of an operation. By using green in these instances, we provide users with a clear visual cue that their task has been completed successfully.

Color-Code: #31B400