I read that the use of bold colors is appreciated in the new Material design but up to what extent?

Here is some context with an example.

I have a tabbed page with the background color of the tabs as well as header set to indigo. The page has many cards with each card having a title at the bottom. As you can see below the background of the title is set to gray.

enter image description here

Now as per the design guidelines suggested by Google should I change the gray to a more bold color such as: #FF4081?

enter image description here

  • 1
    This question is somewhat subjective and borders on closure because it's someone's opinion on how the colors should be used but you asked a question an hour ago please give time for someone to answer instead of asking for answers within 30 mins of you asking.
    – user9447
    Commented Sep 30, 2014 at 15:59
  • This is quite subjective. The second attracts the attention of the user better than the first, it depends on how much focus you want on the button whether or not you should change it to the more bold color Commented Sep 30, 2014 at 18:06
  • This is more a question for User Experience. What do you want the user to do on this page? If the number one thing is to click that "peekaboo", then the pink is the right way to go. If clicking that "peekaboo" is secondary, then it shouldn't draw the most attention. Googles design guidelines are just that - guidelines. Make sure they actually apply to what you're trying to accomplish rather than trying to shoe horn them in. Commented Sep 30, 2014 at 19:01
  • @Zach thank you for your insights. Yes, the buttons are the primary focus of the page. So I guess I should stick with the bold colour. I was wondering, wether the use of the bold color on every card would make the page look very unappealing or not? Commented Oct 1, 2014 at 2:37
  • @Robinson Yes the number one thing is to click on peekaboo. I was wondering, as there are many cards in the page and each card having a dark pink background would somewhat give an unappealing feel to the page? Commented Oct 1, 2014 at 2:41

1 Answer 1


In MDL, the background color is white. There is also a 1dp border of black at 12% opacity. If the buttons are your primary actions, use the bold color as the text color (making sure it's readable).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.