.callout{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.6}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:4px 0 0}
.callout-placeholder{background:#F9FAFB;border:1px dashed #D1D5DB;border-left:4px solid #9CA3AF}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.prototype-note{font-size:12px;font-style:italic;color:#6B7280;border-left:2px solid #D1D5DB;padding-left:10px;margin:6px 0 12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Notifications

Status notifications and alerts in Petrel must convey meaning through text or icon in addition to colour. 100% of participants in the SNTC Findability Study failed to notice colour-only status indicators.
## Purpose

Notifications inform users about the state of operations, errors, and important system events. If these rely on colour alone (for example, showing a red border for an error), users with colour vision deficiencies will miss them entirely.

## Core requirements

- Never use colour as the only means of communicating status. Always pair colour with text, icon, or pattern.
- Error states must include an error message text, not only a red indicator.
- Programmatic notifications must use `AutomationPeer` to announce status changes to screen readers.
- Persistent notifications must remain visible until dismissed or resolved — not auto-dismiss within less than 5 seconds.
- Critical error notifications must not auto-dismiss.


## Notification levels

Level
Colour cue
Required secondary cue
Announcement behaviour
Information
Blue
Info icon (ℹ) + message text
Polite (screen reader reads at next opportunity)
Success
Green
Checkmark icon + message text
Polite
Warning
Amber
Warning icon (⚠) + message text
Assertive (screen reader reads immediately)
Error
Red
Error icon (✕) + message text + field association
Assertive
Prototype value. Confirm exact icon set and LiveRegion announcement timing with the Petrel development team.
## Do and Don't

DO
Display error states with an icon, a short error message adjacent to the field, and a summary error message in the dialog. All three elements work together and are individually meaningful without colour.
DON'T
Don't change only the border colour of a text field to red when it contains an invalid value. This pattern was the most-failed item in the SNTC Findability Study — 100% of participants missed it.
## Petrel example

Petrel example placeholder
Examples of accessible and inaccessible error states in a Petrel data entry dialog will be added here.
### Related pages

Colour and contrast
— Contrast for notification colours
Notifications and feedback
— Component library for notification patterns
Labels and accessible names
— Accessible announcements