There are some places in the webapps (cockpit / tasklist) where we could improve the visual design in a simple way so that usage of color is more consistent with other Camunda applications (e.g. Optimize)

Examples:

• In Cockpit, primary buttons are red:
  • This is a signal color (ie. danger)
  • The same type of button is blue in Optimize
• The header has currently a top red border:
  • We have moved away from this in other application (Optimize)
• In Cockpit: menu hover state currently uses a vertical bar for hovers
  • this is inconsistent with other applications
  • (Note: at the same time this is currently consistent within the webapps for communicating "highlight" and "hover")

Is there a simple approach to address the above topics? If true this could be a pragmatic step to create further alignment between applications. One way of approching it would be to set a timebox within which we want to address some of the above.

 

Design Suggestions

Header
Basic improvements:

• Remove red top boarder
• Smaller icon, smaller title text
• User/Home menu styling (Background and option states)

Nice to have's:
•Link css update and divider lines
•Discuss breadcrumb style, Position of 'Dashboard' option

Buttons
• Primary button style – no size changes
• Icon combo button style

Card
• App page padding
• Card background
• Card title size and title caps
• App background colour update
Nice to have;
• Add cards to no card pages (see example) 

Selections
• in table and list
• Blue highlight, not red.

 

Icons
Switch out check, error and arrow (menu and open/close panel)
Icons attached. 

UI Components design -> https://zpl.io/2EQlR0M 
Page Examples -> https://zpl.io/bPEpx0M