Molecule
Outage
The product is down and the page still has to be useful. 3 instances across 3 screens: service unavailable, planned, and partial.
It says what is out, since when, what still works and what to do meanwhile, in that order. It is the one surface where the analyst is not deciding anything and the interface is answering for itself.
Anatomy
dark, shipped
Service unavailablesince 04:12 UTC · incident INC-2291
light, the pair
Service unavailablesince 04:12 UTC · incident INC-2291
.outagea 660px column, centred, in a zone with no pane and no listh1 .subsince when and which incident. Mono, because both are quotable into a ticket.out-linea fact and its label. Not a table: there are three of them and they read as sentences, and a table of three rows is a table nobody reads as one::beforethe mark, and this is the only component that carries one. A fixed 120px image beside the text, never a background: a page with no product on it may carry a mark and may not carry a scene
Behaviour at width
Below 1280, the system's one point (Width), four things change and the reading order is one of them. The mark drops from 120px to 84px, so it cannot take the fold from the sentence that says what is happening. Each line stacks its label above its value, because a 128px label column costs a third of a phone. The contact takes order:-1 and reads first, since on a phone at 03:00 she wants a number rather than an understanding. And .out-act becomes sticky against the bottom edge with its buttons stretched, so the retry stays under her thumb once the contact has pushed it down the page. DOM order is untouched, so the heading structure and the tab order both stay as written: this is one live page narrowed, not a second file.
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| kind | unavailable | 1 | everything is out |
| planned | 1 | it is out on purpose and there is an end time | |
| partial | 1 | some of it works, and the What still works line is the reason the component has that zone at all | |
| severity | no values | – | Prohibited. An outage is not a case. Painting it in the severity ramp would spend a colour that means something specific on a page that means something else |
| a retry control | not here | – | The buttons live in .out-act, which is a place and not part of this component. Three of the three carry one and it is still the container’s |
The path to the mark is relative to the component file, and it is the one thing in this package that is not portable by itself. Named rather than left to be discovered: lifting design/system/ into another project takes design/visuals/ with it, or this rule resolves to nothing.
When to use it
On the three systemic screens, and nowhere else. It is the only component in the system whose job is to be read when the product cannot do its job.
Where she meets it. At 03:00, from a phone, when a page she was paged to will not load. That is why the mark drops to 84px at 360: it must not take the fold from the sentence that says what is happening.
Rule and anti-rule
Do
A label and a fact, as a sentence. She can act on it: the log still opens, so the thing she was paged about can still be read.
Do not
Something went wrong. Please try again later.
Never a stock apology. It names nothing, dates nothing and leaves the analyst with no way to tell whether the case she was paged about is readable.
States
It has none, and it is not interactive.
dark, shipped
Service unavailablesince 04:12 UTC · incident INC-2291
light, the pair
Service unavailablesince 04:12 UTC · incident INC-2291
The buttons in .out-act are, and they carry their own.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--text-primary | ink 4.5:1 | the heading and the facts | ||
--text-secondary | ink 4.5:1 | the subline and the labels | ||
--line-separator | line, exempt | the rule above each fact |