Visual Framework

Harmony’s visual characteristics are flat, bright, geometric, crisp, sharp, pop, and fast. There is minimal chrome, embellishments, clutter, and texture.

Color

Harmony’s UI color palette is derived from Intuit’s brand palette, consisting of Intuit blue and a selection of accent colors that compliment our brand.

Grays, gray-blues, and Intuit blue form the foundation for the UI. Use for key UI elements like navigation, backgrounds, the stage, buttons, links, and text.

Teals, greens, oranges, reds, and fuchsias are used for Insights, data visualization, alerts, and communication with the user. These vibrant colors are meant to draw focus, and should not be used in the UI or “chrome” except for on hover, when the user is interacting with the system.

Important!

Everyone should use these Harmony Color Settings to ensure consistency between files. This will avoid accidentally changing hex colors. We also have palettes for photoshop and illustrator, that have all the correct hex colors in swatch form.

Please download and unzip Adobe Color Zip file.

Install Color Settings in Photoshop CC:

  1. Navigate to the Edit > Color Settings menu in Photoshop.
  2. Navigate to the Color settings folder you just unzipped and load “Intuit Harmony Web” color settings

Install Photoshop Palettes:

  1. In finder go to Applications > Adobe Photoshop CC > Presets > Color Swatches
  2. Place the .aco files from your zip into the Color Swatches folder

Install Illustrator Palettes:

  1. In finder go to Applications > Adobe Illustrator CC > Presets > en_US.Swatches
  2. Place the .ase files from your zip into the Swatches folder

 

Mobile Iconography

Each icon clearly communicates the task it solves for. When applied consistently, icons enable our customers to quickly complete a task (examples: delete an item, attach a file). Icons should never be used as decoration, and should always correspond to an action.

© Intuit 2016 | Terms of use