Toasts, inline alerts, empty states and loading. A save confirmation uses the success emerald. Alerts are a full subtle tint, never a coloured side edge.
Feedback
Saved.
Heads up
Your changes will publish at the next deploy.
Nothing here yet
Add your first client to get started.
<Toast tone="success">Saved.</Toast>
<Alert tone="info" title="Heads up">
Your changes will publish at the next deploy.
</Alert>
<EmptyState
icon="inbox"
title="Nothing here yet"
body="Add your first client to get started."
/>
<Skeleton rows={3} />
Guidelines
Do
Confirm a save with the success emerald, never the accent green.
Build alerts as a full subtle status tint with a hairline border.
Pair an empty state with a line icon, an on-voice line and a clear next step.
Use quiet skeletons that mirror the layout, with a light pulse and no shimmer.
Do not
Never build an alert as a coloured left border on a rounded box.
Do not write "No data" or "Error 500". Write in the brand voice.