Elevation
In this system elevation does not mean importance. It means temporary — floating above the page, and about to go away. Which is why static content never gets a shadow, and why the alarm layer sits at the top of the stack.
Overview
Most design systems use elevation as emphasis: more important things float higher. That reading fails here for two reasons. Importance in clinical software is already carried by the alarm palette, which is governed and unambiguous — and a raised card that never goes away teaches clinicians that raised things are permanent, which then undermines the components where transience is the entire point.
So elevation carries one meaning: this is floating, and it will be dismissed. Popovers, menus, tooltips and dialogs are elevated. Cards, panels and rows are not.
Transience, not importance
A shadow says "temporary". Priority is said by the IEC palette, never by height.
Sparing
Four levels, and most screens use none of them. Static content is separated by a 1 px border.
Strictly ordered
One stacking order for the whole product, defined here. Nothing chooses its own
z-index.
The stacking order
Five layers, fixed. The one that matters is the top.
A dialog traps focus, dims the record and demands an answer — but it never conceals a
patient signal. The alarm region renders above the dialog scrim, stays
readable, and does not steal focus. This is the single most consequential rule on this page,
and it is the reason the stacking order is defined centrally rather than left to whichever
component last set a z-index. See Dialog.
| Layer | z-index | Shadow | Members |
|---|---|---|---|
| Content | 0 | None — 1 px border | Cards, data grids, layout panels, worklist rows |
| Sticky | 10 | Level 1 | Masthead, patient header, sticky table headers |
| Popover | 20 | Level 2 | Menus, select listboxes, popovers, tooltips |
| Dialog | 30 | Level 3 | Scrim and dialog surface |
| Alarm | 40 | Level 3 | The docked alert region. Never obscured by anything. |
Shadow levels
Border only. All static content.
Sticky. Just enough to separate on scroll.
Popovers and menus.
Dialogs and the alarm region.
Shadows are tinted with the brand's deepest teal rather than neutral black, so they sit in the warm palette instead of greying it. In dark mode they deepen rather than invert — a light glow reads as a highlight, which would collide with the meaning of the alarm layer.
Rules
- No shadow on static content. A card that needs one to be found is a card on the wrong surface. Fix the surface.
- Elevation never encodes priority. A Critical alarm and an Advisory alarm sit at the same height; only their hue and wording differ.
- Nothing sets its own
z-index. Components take a layer name from the scale. Arbitrary values are how a dialog ends up over an alarm. - Never elevate on hover. Lifting a row on hover implies it has become temporary. Hover changes background, nothing else — see Interaction states.
- One elevated surface at a time. Popovers do not open over dialogs; dialogs do not stack.
Troponin
RisingStatic card, border only. Its urgency is carried by the chip, where a clinician already knows to look for it.
Troponin
Raised to signal importance. It now reads as floating and dismissible, and it competes with the layer real alarms occupy.
Outcomes of use
What this contributes to, in the terms of Usability & context of use.
- Effectiveness — an alarm is seen whatever else is on screen. That single guarantee is most of what this foundation is for.
- Efficiency — transient surfaces are recognisable as transient, so a clinician knows without testing which things will go away when dismissed.
- Satisfaction — a visually calm record. Elevation used for emphasis produces screens that feel agitated, which costs attention across a shift.
Do's and don'ts
Only the transient surface is raised, so elevation still means “this will go away”.
Everything floats. Elevation distinguishes nothing, and genuinely dismissible surfaces stop reading as dismissible.
.alarm-region { z-index: 40; } /* layer name */
.dialog { z-index: 30; }
Layers come from one central scale, so the alarm region is provably above the modal layer.
.dialog { z-index: 9999; }
/* fixes overlap bug */
An ad-hoc value chosen to win a stacking fight. It has just placed a dialog over the alarm region.
Clinical safety notes
Trace these in your risk file (ISO 14971) and usability engineering file (IEC 62366-1).
- Alarm layer above the dialog layer. Mitigates: a modal concealing an active patient signal.
- Single central stacking order. Mitigates: an ad-hoc
z-indexplacing something over the alarm region. - Elevation never encodes priority. Mitigates: a second, informal urgency channel competing with the IEC palette.
- No shadow on static content. Mitigates: transience losing its meaning, so genuinely dismissible surfaces stop reading as dismissible.
- One elevated surface at a time. Mitigates: a decision made without the context of the layer beneath it.
Related
- Grid & layout — the reserved region alarms occupy.
- Dialog — why alarms render above the scrim.
- Card — border rather than shadow.
- Interaction states — why hover never lifts.