Skip to content
Components

CalloutWarning: Draft

Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.

Every callout competes for the user’s attention, so every word must earn its place.

Only show information that is timely, relevant, and genuinely useful to the task at hand. Don’t interrupt active workflows unless it’s critical to do so.

If it doesn’t help the user move forward or make sense of something, it’s clutter.

29653cae-7a66-80a1-88d0-c119b10d4906.png
29653cae-7a66-8044-9fe5-c5e95b7e918c.png

Tone should reflect the situation — calm, clear, and appropriate to the message.

Whether it’s good news, a warning, or an error, write as if you’re speaking to a capable adult.

Use plain language that feels natural and respectful. Avoid sounding alarmist, accusatory, or patronising.

29653cae-7a66-807d-9f90-e9614e1aaeae.png
29653cae-7a66-80a8-a604-c423ae2144cf.png

Be specific about what’s happening and what the user can do next.

Avoid jargon, technical codes, and vague phrasing. Instead, use simple, direct language that tells users exactly what’s wrong (or right) and how to respond.

Always include a clear next step when possible — reassurance through clarity beats reassurance through tone.

29653cae-7a66-80f1-a01a-e807faf60bf5.png
29653cae-7a66-808f-97e2-cb633ecee11d.png

Not every message deserves a callout. Too many can make the experience feel noisy, patronising, or micromanaged.

Use them only when they genuinely add clarity or prevent confusion. If users feel constantly interrupted or nudged, even well-written messages start to lose credibility.

Aim for quiet confidence — say less, but make it count.

29653cae-7a66-8085-807a-ef79ce4571a7.png
29653cae-7a66-8004-8799-f58133402c05.png
This page is a draft. Its content is likely to change.