Creating Color Palette(s)
One of the essentials of every UI style guide is the color palette(s). There are certain things you need to follow in order to create more scalable UIs.
Before diving into the creating color palettes always look for a brand style guide and follow the instructions for color usage.
We rather use same or very similar namings for our layer styles on the projects we work. You should decide upon a sustainable style naming convention with your team. It is always helpful to include developers to the naming processes.
You should always start with the primary color and it's tints and shades to create a better harmony. We set 5 tints and 4 shades (ranging from 50 to 900) of the main color which is usually named 'Primary/500'.
An average UI usually has on primary color and one or two accent colors. There is no restrictions for the number of colors to have but it's highly recommended to stick to two or three(including primary) colors.
Gray scale is usually for text colors along with the backgrounds, divider colors and the disabled states.
Every UI design has to have certain colors for certain states. These states are named after their purpose; Success, Danger(Error), Warning, Info. Always good to have their tints and shades.
For keeping the color usage consistent you should have a dedicated layer style for each and every color set on the style guide.