Comflow 3.0 Color Guide

Comflow 3.0 Color Guide

There is a standard pattern of colors implemented within Comflow. This page specify the color codes and the applications of them.

Color codes

These are the standard colors used in Comflow, which can be altered in Custom.css.

• Very Light Blue - #f6fcff
• Light Blue - #73bce8
• Blue - #007ec1
• Dark Blue - #006da8
• Green - #2ecc71
• Light Yellow - #f3e512
• Dark Yellow - #f1c40f
• Orange - #f39c12
• Red - #e74c3c 
• White - #fff
• Ebony - #fffef8
• Black - #333
• Light Grey - #f8f5ed 
• Grey - #eee
• Dark Grey - #777
• Silver - #d8d9da

General color application

There are several applications that utilize the colors, based on the required focus of the user.

• Data (when background is white)  - Black
• Data (when background is colored)  - White
• Labels - Dark Grey
• Input field - Ebony
• Odd list row - Light Grey
• Action, Focus, Information, Link - Blue (- See Comflow Action Color below)
• Success - Green
• Mandatory field, Attention - Light Yellow
• Warning - Dark Yellow
• Alarm, Required - Orange
• Danger, Error- Red
• Hoover - Very Light Blue

Comflow Action Color

Comflow is styled with an action color, meaning that a certain color shall always signify to the user that it has some action connected to it. Standard wise this color is blue, but it can in the comflow.css be changed another color, like the company color.

The purpose is as said to signify to the user that you can click on it and then expect some type of action. The main features for this are:

• Buttons - For performing actions
• Function Key Enter - To signify that at button is connected to Enter
• Tabs - For selecting the tab. The selected tab does NOT have the action color, since they are not available for action.
• Column headers - For sorting the list based on that column
• Links - To open the link.

Exceptions

There are exceptions to the rule, mostly to balance the layout, which otherwise can be overwhelmed of the action color. The exceptions are tool-bar icons and paging actions.