A compact message in the flow of a form, directly under the field or control it explains. Tinted background, 1px border, caption text and a 14px tone icon. It carries no margins, so the surrounding form keeps control of spacing.
A Banner speaks for a page or a section and is padded to match; a Callout speaks for one field. Use a Banner when the message survives beyond the field it sits next to, and a Callout when it explains what the user is filling in. The two can share a page when the Callout sits next to the field it explains. A page-level message that loses to a more severe Banner folds into that Banner, or moves next to the field it concerns — it never becomes a Callout floating in the page body.
Four tones: info, success, warning and critical. Warning and critical render as alerts and interrupt a screen reader; info and success are status regions, so a change to their text is read politely, without interrupting. An unknown tone falls back to info (with a warning in development). One optional action renders under the message as a link-tone button — a Callout is a hint, not a decision, so it never carries two.