Colour rule for multiple buttons in a complex platform
I'm currently designing a CRM which includes a lot of forms and modules. I have been struggling to decide the colour rule for the buttons especially having to incorporate branding colour into the palette.
Context: Form to register New Student
Usage: Main button
Example: 'Submit' button to submit the form
Issue: Blue seems more natural colour for the main button and links so I select it as the main button
Teal (Brand colour)
Usage: Secondary button
Example: 'Upload student image' & 'Add Subject' button
Issue: Since blue stands out more than teal I have selected teal as the secondary button, but the secondary button appears more often than the main button.
- Usage: to pair with the main button
- Example: 'Save as draft' button
How do I create a rule as to when to use the colours or is it better to just use 2 colours(teal and white)? However, there are many buttons and links in the CRM, so I feel that having 3 colours can help distinguish them better. What are your thoughts?
Don't rely on color to differentiate between hierarchy of action types.
Your current system relies on a single shape, with tone as the differentiating factor. This doesn't account for color blindness, screens with poor color, contrast issues and low resolution.
What you're trying to do is to teach users about the importance levels (or consequences) of actions in the application.
Try using shape as a factor of differentiation. Material design solves this by using 3 types, from high emphasis to low.
Contained: Use this type of button once per view. Creation of a new entity, submitting a form.
Outline: Can be used for sub-tasks: uploading an image, changing a setting.
Text: Can be used for 'learn more' or actions you want to deemphasize.