I came up with a color system for the Data Source primary color, the accordian bar colors and the pill colors in both default and selected state.

I'm not sure if the CSS translates very well for this in InVision Inspect mode so I'll put it down here:

Both Accordian bars and Pills have 2 fill colors applied one on top of the other---a percentage of the primary color and a percentage of black. For both UI elements, the color percentages are fixed and should work for all of the primary colors.

I did this to prevent it from looking too pastel.

Accordians:
Fill #1: 5% Black
Fill #2: 20% of Primary Color (Data Source)

Pill - Default State:
Fill #1: 3% Black
Fill #2: 10% of Primary Color

Pill - Selected or Hover State
Fill: 100% primary color
Text: Roboto, bold, 11pt, #FFFFFF

This system will make it easier to add additional data sources in future or for other instances of the dashboard with different requirements.

Let me know if you want to discuss this in person . . .

• Comment from lgatzke in InVision