Erick Jones

The Branding-oriented Gmail tabs color palette

Expressing their true colors through colors

I want to register here the simple and great way Gmail expresses its Color Palette in its material layout. I like the effective way Google can solve problems using Design thinking as an initial stage where everything falls into place nicely and meaningfully.


Gmail has the red color as the main color in its Brand (just as youtube), but inherits the multicolor palette from Google. So there are many ways these colors can help. In this specific case they used in the Hierarchy of the Tabs. In Gmail we have the main tab, your inbox. The other tabs work as filters that separate actual messages from updates, e-mail notifications from your Social Networks, and many other email categories. These secondary tabs are partially customizable.

So, how did they do that?

The Inbox tab is selected as a default state of the interface:

Screen Shot 2018-07-23 at 10.45.36

The secondary tabs have the secondary colors to indicate their selected state:

Screen Shot 2018-07-23 at 10.45.45
Screen Shot 2018-07-23 at 10.45.52
Screen Shot 2018-07-23 at 10.46.11

The Design Principle applied here is Hierarchy. If you don’t know the Design Principles, take a look on this article here from Wikipedia. The hierarchy of the tabs determine which color with equivalent ‘position’ in the hierarchy will be used.

Share it like it’s hot.


Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles

See all