Callout
A bordered notice with an icon. Used for in-context tips, info banners, and important warnings inside a long form.
Four tones
Info, success, warn, danger. Each pairs a soft background with a saturated icon.
The June 2026 returns format includes mandatory site coordinates. Existing templates will auto-update.
12 reminders queued for the 14 guardians in arrears. They’ll send at 09:00 tomorrow.
Estimated stock-out by 16:00 at current rate. Reorder placed automatically.
Counted cash is $ 240 below expected. Supervisor sign-off required to close shift.
With action
A right-aligned button keeps the callout actionable.
Fee balance shows real-time updates after payment. Push to your parents from Settings.
Inline tip
A small, low-emphasis tip inside a long form. Less stripe, more whisper.
Configure how settlements behave once the refinery confirms.
Do & don't
Match tone to severity. Danger is for things that block work; info is for nice-to-knows.
Use a callout when a plain paragraph would do. Callouts cost attention.
Keep callouts to two sentences. The body, then what the user can do about it.
Stack three callouts on one page. The reader stops parsing them.