The direction

A dark Midnight ground, one blue for action, four colours for status, and the network in the middle.

The ground#0B121F · #222D42 · #2B3952
Save
The blue#00B0CC · #45DDF5
Statusred, orange, yellow, green
0O 1l
The typeNoto Sans

Four design principles

  • 01Easy to Consume
  • 02Context is the King
  • 03Guidance
  • 04Delightful

Status colours

Red 600#FF5C5C · 6.2:1
Orange 600#FF9147 · 8.4:1
Yellow 600#F5D50A · 12.9:1
Green 600#33D633 · 9.6:1
32 (Poor) 70 90

Colour

AaBlue on Midnight 900, links and tabs · 7.2:1
AaMidnight on blue, the main button · 7.2:1
AaWhite on blue, never · 2.6:1
Accents, for chart lines: Lyla 300 is the client count in the timeline

Blue Extreme is for action and selection; accents are for charts.

Type

0O 1lI

Display · Noto Sans28 / 600
Display 2 · Public Sans22 / 400
Headings H1 to H425 · 22 · 19 · 16 / 400
Content13 / 400 and 600
Assistive11 / 400 and 700

Hierarchy

1. Search & Filters
2. Health Timeline
2. Alarms & Events panel
3. Map (Network)
4. Details & Action panel

Spacing

A scale from 2 to 64px

spacing-010.125rem2pxspacing-020.25rem4pxspacing-030.5rem8pxspacing-040.75rem12px

Controls

SaveCancel
Wi-fi EfficiencyCritical
Resolution GuideRaise Ticket
Type your comment here
The topology workspace: the health timeline across the top, alarm and event counts at the left, the network map in the middle and a device's insights panel at the right.

The whole network, one experience