Google Fiber uses the same color palette as Google, but we lean into blue a little more.
Always start with white. White lends friendliness and simplicity to our communication, and it’s where we begin with all Google Fiber designs, illustrations, photography, and products.
After white, blue is the most important of the four core colors, and helps us identify ourselves as Google Fiber. It represents Google Fiber: bold, useful, and (when appropriate) accessible.
Red, yellow, and green
The other three core colors come from the Google Fiber logo, and help us align ourselves with the Google Family. A light hand with these will help add interest and playfulness.
Grey for text
Grey is useful because it doesn’t compete with the core colors. Use this for text, icons, UX elements, background elements and off states.
When you need a little more detail, these shades and tones of the core colors can help you out. The dark colors are best for adding contrast and depth, indicating links and buttons, and shading illustrations. The light colors are best for highlighting illustrations, data visualization, and creating points of focus within UI (such as notifications).
Color do’s and don’ts
Build from white. Use it more than any other color.
Use solid blocks of color sparingly.
Use white space and neutral backgrounds in illustrations.
Don’t feel the need to use all four core Google colors equally.
Only use the advanced colors in more complex illustrations and graphics.
Don’t change the color of illustrated elements.