Sami ERP's color systems are utilized across the UI in a significant way.
They are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
All colors are available as CSS variables in the src/atoms.css file.
In order to avoid misuse of colors, we created text and background color classes for each of these variables.
To use the text and background color classes we use the .use-category-brightness pattern, that is, to access the text and background color of the color Neutral with 0 brightness, we use .color-neutral-0 and .bg-neutral-0.
These colors are used to support secondary colors in backgrounds, text colors, tabs, templates, etc.
The primary color palette is used for all interactive elements such as CTA, links, inputs, active states etc.
The secondary color palette is used in conjunction with the primary to indicate to the user their secondary focus.
These colors represent a feeling of positivity. Generally used in full success states.
These colors show an emotion to hold. Usually used in warning or waiting states.
These colors represent an emotion of negativity. Usually used in error states.
These colors will be used as support on Dark mode backgrounds.
These colors will be used on labels.
These colors will be used in tags.