The direction

Surface the critical quietly: one meaning per colour, the loud ones kept for the few numbers that need them, and the rest of the page in greys and pastels.

Page and card#FAFAFA · #FFFFFF
The blue#0079B8
Three states#E12200 · #C47D00 · #2F8400
The unit metriccount · states · target · trend

The unit metric

Availability
43
213 degraded1,465 connected
offline edges
97% availability (99% ideal)↑ 2% connectivity
1The bad bucket first, in its state colour.
2Its label under the number.
3The other two buckets to the right.
4A 4px bar against the target.
5The percentage, the ideal, the trend.

One blue

primary#0079B8 · 4.7:1
tertiary#3A95C4 · second series

Three states

offline · poor#E12200 · 4.7:1
degraded · fair#C47D00 · 18px+
connected · good#2F8400 · 4.7:1

Surfaces

page#FAFAFA
card#FFFFFF
text#000000
secondary#565656 · 7.3:1
border#D7D7D7
track#DDDDDD · #EEEEEE

Chart fills

poor#F76F6C
fair#FAC400
good#AADB1E
threshold#D28F01

Type

Aa 1,721

Headline36 / 400
Page title · Section value28 · 22 / 400
Card title · Body14 / 500 · 13 / 400
Label12 / 500 · 0.1em
Caption · headers, ticks, hrs11 / 400

Layout and rhythm

4
8
12
16
24
32
48

Depth and shape

page
none
card
0 1 2 · 5%
drawer
0 1 4 · 10%
0
3
pill

Controls

Generate report Generate report View all
WorstBest
rest
hover
pressed

Status, in order

1down 0degraded 1stable 0unknown
Connected Offline

Chart recipes

Timeline
8.0 hrs
QoE strip
3.4
Threshold
75%
Treemap
SD-WAN ControlHTTPSMSRPCNetflowICA

Light and dark

Motion

Hover and focus150 ms · colour only
Alerts drawer200 ms · fade, 8px drop
Chart data0 ms · in place