Dashboard Styles

A style is a named set of styling applied to blocks, so a dashboard looks like one thing rather than a collection.

Where to find it

Architect Panel → Dashboards:

• Custom Dashboard Blocks — the blocks themselves
• Dashboard Styles — the styling applied to them
• Shared Dashboard Layout — the arrangement shared across users

Architect Panel → Styling:

• Fonts — the fonts available
• Logo — branding

How it works

A style carries CSS classes and is applied to blocks. Defining a few and reusing them keeps a dashboard consistent and means a change to one style updates every block using it.

Use colour to mean something

The most valuable thing you can do here. A dashboard where red means "needs attention" and green means "fine" is scannable in a second.

A dashboard where colours were chosen because they look pleasant is prettier and slower to read, because the viewer has to read every number rather than glancing at the shape.

Colour must not be the only signal

The rule that applies everywhere and matters especially on a dashboard, where colour is doing so much work. Around one man in twelve has some colour vision deficiency, and red-against-green is exactly the pairing that fails.

Pair colour with a label, a number, an icon or a position. A dashboard readable only in colour is unreadable to a real proportion of your staff, and in print.

Keep the palette small

Three or four states — normal, watch, urgent, and perhaps a neutral. More than that and the colours stop signalling and start decorating, because nobody remembers what the fifth one meant.

Consistency across dashboards

If red means urgent on one dashboard and simply "sales" on another, both are harder to read. Agree what your colours mean once, and use the same styles everywhere.

Restraint reads as authority

A dashboard where everything is bright is a dashboard where nothing stands out. Keep most blocks plain and let the exceptional state be the thing that draws the eye — that is what makes the alert visible.

Check it on the screen it will be on

A dashboard on a wall display is read from several metres away and needs larger, higher-contrast treatment than one on a laptop. If it is going on a screen in an office, look at it there.

Worked example

An organisation defines four styles — neutral, good, watch, urgent — with the meaning written down. Blocks are neutral unless a threshold is crossed. Each coloured block also carries a label, so the dashboard works in black and white and for colour-blind staff, which was tested rather than assumed.

Recommendations

• Give each colour a meaning and write it down.
• Never rely on colour alone.
• Three or four states, no more.
• Keep most blocks plain so exceptions stand out.