Tier 1Tier 1 · Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--radius-lg · --alert-danger-body · --radius-sm · --alert-radius
01Alert: inline, in-page messaginginfo · brand · success · destructive
An alert is attached to the page and persists until the condition clears. A toast (see Notification) floats, is dismissed by time, and reports something that already happened.

If the user must act on it, it is an alert. Tinted surfaces use the semantic component-bg + border step; text uses that scale's own text steps, never --text on a tint.
Transfers are paused while your account is over quota.
Free up space or upgrade to resume automatically.
You're on the last week of your trial.
Pick a plan to keep your files streaming.
Folder shared with 3 people.
Anyone with the link can stream, not download.
4 transfers failed.
The tracker refused the connection. Retry all.
02Density & placementpage-level vs. in-form
page level
Maintenance tonight, 02:00–03:00 UTC.
Full width, above the content, one line, no body copy.
in form

That magnet is missing a tracker.

Field errors stay plain text under the field: never an alert box.
Never do this
Stacking three alerts at the top of a page · using the destructive alert for anything the user can't fix · a red fill behind body copy · an alert that repeats what the toast already said · dismissible alerts for conditions that are still true after dismissal.