Ample white space should be used to balance the colorful palette. Dark gray should predominantly be used for typography. Teal and shades of grays compliments when it used in combination with QuickBooks green. Green to Teal gradients should be used in combination with primary colors to draw attention to important content.
The scale below shows how the primary, supplementary and accent colors should be used in proportion to each other.
Primary
Secondary
Single point solutions
Don’t just use color. Make sure to include icons with text to make things clear. See accessibility guidelines
Color set for QuickBooks
We use these in the shell and UI for all web-based experiences.
GREEN 01 | ||||||||||||
|
||||||||||||
QUICKBOOKS GREEN | |||||||||||
|
|||||||||||
GREEN 03 | |||||||||||
|
|||||||||||
GREEN 04 | |||||||||||
|
|||||||||||
GREEN 05 | |||||||||||
|
|||||||||||
BLACK | |||||||||||
|
|||||||||||
QUICKBOOKS DK GRAY | ||||||||||
|
||||||||||
GRAY 02 | ||||||||||
|
||||||||||
GRAY 03 | ||||||||||
|
||||||||||
GRAY 04 | ||||||||||
|
||||||||||
GRAY 05 | |||||||||||
|
|||||||||||
GRAY 06 | ||||||||||
|
||||||||||
QUICKBOOKS LT GRAY | ||||||||||
|
||||||||||
GRAY 08 | ||||||||||
|
||||||||||
WHITE | ||||||||||
|
||||||||||
Color set for single-point solutions
Single point solution colors can be used in top of funnel pages to highlight different features within QuickBooks. These single point solution colors should be applied in an intentional and limited manner and should not be applied as large fields of color. Use these sparingly to differentiate single-point solutions from one another.
ACCOUNTING | ||||||||||
|
PAYROLL | ||||||||||
|
||||||||||
PAYMENTS | |||||||||||
|
|||||||||||
TIME TRACKING | ||||||||||
|
||||||||||
Accent colors
Use sparingly.
TEAL 03 | |||||||||||
|
|||||||||||
TEAL 04 | |||||||||||
|
|||||||||||
GREEN / TEAL GRADIENT | ||||||||||||
|
Color usage
Here are some guidelines to applying color to composite layouts:
Overall composition should align with the marketing color proportion.
Gradient should be used sparingly.
Offering-specific colors should be used sparingly and only in the context of the offering.
Avoid applying color to typography. Exceptions include text links and captions (see Typography for full detail).