Proportion

QuickBooks green is a brand equity and mandatory component of our design system. Its application builds brand recognition and allows for a consistent element throughout our ecosystem.

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

Accessibility pro tip

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
CMYK: 85/25/100/13
RGB: 16/128/0
HEX: #108000
PMS: 348
SASS: $green01
QUICKBOOKS GREEN
CMYK: 80/10/100/0
RGB: 44/160/28
HEX: #2CA01C
PMS: 362
SASS: $green02
GREEN 03
CMYK: 70/0/100/0
RGB: 83/183/0
HEX: #53B700
PMS: 361
SASS: $green03
GREEN 04
CMYK: 54/0/100/0
RGB: 127/208/0
HEX: #7FD000
PMS: 375
SASS: $green04
GREEN 05
CMYK: 37/0/97/0
RGB: 169/232/56
HEX: #A9E838
PMS: 374
SASS: $green05
BLACK
CMYK: 75/70/70/100
RGB: 0/0/0
HEX: #000000
PMS: BLACK 6
SASS: $black
QUICKBOOKS DK GRAY
CMYK: 70/63/58/50
RGB: 57/58/61
HEX: #393A3D
PMS: 432
SASS: $gray01
GRAY 02
CMYK: 60/50/45/15
RGB: 107/108/114
HEX: #6B6C72
PMS: 431
SASS: $gray02
GRAY 03
CMYK: 48/38/35/2
RGB: 141/144/150
HEX: #8D9096
PMS: 430
SASS: $gray03
GRAY 04
CMYK: 27/20/16/0
RGB: 186/190/197
HEX: #BABEC5
PMS: 429
SASS: $gray04
GRAY 05
CMYK: 15/10/9/0
RGB: 212/215/220
HEX: #D4D7DC
PMS: 427
SASS: $gray05
GRAY 06
CMYK: 0/0/0/0
RGB: 227/229/232
HEX: #E3E5E8
PMS: N/A
SASS: $gray06
QUICKBOOKS LT GRAY
CMYK: 6/4/3/0
RGB: 236/238/241
HEX: #ECEEF1
PMS: N/A
SASS: $gray07
GRAY 08
CMYK: 3/1/1/0
RGB: 246/247/249
HEX: #F4F5F8
PMS: N/A
SASS: $gray08
WHITE
CMYK: 0/0/0/0
RGB: 255/255/255
HEX: #FFFFFF
PMS: N/A
SASS: $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
CMYK: 70/0/100/0
RGB: 83/183/0
HEX: #53B700
PMS: 361
SASS: $green03
PAYROLL
CMYK: 7/93/0/0
RGB: 227/28/158
HEX: #E31C9E
PMS: 225
SASS: $pink03
PAYMENTS
CMYK: 74/30/0/0
RGB: 0/151/230
HEX: #0097E6
PMS: 2925
SASS: $blue03
TIME TRACKING
CMYK: 0/60/100/0
RGB: 255/128/0
HEX: #FF8000
PMS: 151
SASS: $orange03

Accent colors

Use sparingly.

TEAL 03
CMYK: 86/0/28/0
RGB: 0/193/191
HEX: #00C1BF
PMS: 7466
SASS: $teal03
TEAL 04
CMYK: 65/0/22/0
RGB: 0/215/215
HEX: #00D7D7
PMS: 319
SASS: $teal04
GREEN / TEAL GRADIENT
CMYK: 70/0/100/0, 86/0/28/0
RGB: 83/183/0, 0/193/191
HEX: #53B700, #00C1BF
PMS: 361, 7466
SASS: $green03, $teal03
Gradient: Linear, 45 degrees

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).

 

Overall color proportion is aligned

Overall proportion isn’t aligned with color proportion

Gradient is used sparingly

Gradient is over-used

Offering color is used to differentiate

Accent color is misused

  • Was this Helpful?
  •