Material design's colors: primary/accent vs green/red

Question

We have a big enterprise app to manage a lot of business data. We were using bootstrap and now are changing the design according to Google's Material Design guidelines.

The guidelines offer to use just two colors with no particular meaning plus monochrome. But before that we were highlighting actions like 'save', 'create' and 'approve' with green and actions like 'decline', 'delete', 'cancel' and such with red.

Now I wonder how I would choose colors for buttons with just primary/accent. Maybe we should use something like primary/accent/red with red for dangerous actions? How to choose between green and primary/accent and monochrome for buttons like 'OK', 'agree', 'create', 'approve'?

Answer 1

I think guidelines are there to serve as, well a guide. Something for you to keep in mind when applying best practices, you shouldn't be limit by what the guide says. No one app is the same, what works for them might not work for you. I have seen style guide which contain more than 2 basic colors (excluding monochrome), used as primary, secondary and tertiary color palette.

Here are some examples:

• Lonely Planet
• Salesforce
• Alistapart

If one button color is performing two different actions, then you might want to look at introducing a new color. A safe color palette for buttons would usually be:

• Primary action such as Submit: blue or green
• Secondary action such confirm/ok/done: Ligher shades of primary action
• Disable: gray
• Alert: red

You could also use a button with a gray border and transparent background to denote it as undesirable course of action.