ds
Foundations
Tones and status

Tones and status

Seven tones for diagrams, three states for health.

Tones

Seven tones tell things apart in diagrams: tenants, teams, planes, environments. Each has a line colour (--t-*) and a wash (--w-*). In a diagram a tone sets --tc and --tw on the element, and the node, zone or link picks them up.

--t-purple#6e56cf#9b85f54.9 AA6.5 AA

--t-amber#d97706#fbbf242.9 decorative11.6 AAA

--t-green#1f8a4c#3ecf7a4.0 AA large9.6 AAA

--t-blue#2563eb#60a5fa4.7 AA7.6 AAA

--t-red#dc2626#f871714.4 AA large7.0 AA

--t-teal#0f8a86#2dd4bf3.8 AA large10.4 AAA

--t-pink#c2418a#f472b64.4 AA large7.3 AAA

tone=purple … tone=pink on components, rendered by topo

Use tones for meaning the reader needs a legend for. Two or three per diagram is plenty. Red is a tone like any other here; for health, use status.

Status

Three states, used for health and incidents. They have their own tokens so a tone and a status never collide.

--ok#1f8a4c#3ecf7a4.0 AA large9.6 AAAHealthy, recovered, passed.

--warn#d97706#fbbf242.9 decorative11.6 AAADegraded, slow, at risk.

--down#dc2626#f871714.4 AA large7.0 AAFailed. Blinks in diagrams.

Operational Degraded Down okwarndown

Code

<span class="status"><span class="status-dot"></span>Operational</span>
<span class="status"><span class="status-dot warn"></span>Degraded</span>
<span class="status"><span class="status-dot down"></span>Down</span>
<span class="badge ok">ok</span><span class="badge warn">warn</span><span class="badge down">down</span>