Contents Purpose Anatomy Variants States Tokens Used Accessibility Behavior Platform Notes Component: alert Purpose Communicate a message with contextual severity. Anatomy icon — optional, leading icon (inherits text color) title — optional, bold heading (alert-title) message — required, description text (alert-message) close — optional, dismiss button (alert-close) Variants Class Visual Usage alert Base — surface-secondary bg, border-default left border Neutral informational message alert-info info-subtle bg, info-text, info-base left border Informational alert-success success-subtle bg, success-text, success-base left border Positive confirmation alert-warning warning-subtle bg, warning-text, warning-base left border Caution alert-error error-subtle bg, error-text, error-base left border Error / destructive States Rest only. Dismissible alerts have a close button (interactive — follows btn-ghost pattern). Tokens Used --font-sans, --font-serif, --text-base --leading-relaxed --space-3, --space-4 --color-surface-secondary --color-text-secondary --color-border-default --color-info-subtle, --color-info-base, --color-info-text --color-success-subtle, --color-success-base, --color-success-text --color-warning-subtle, --color-warning-base, --color-warning-text --color-error-subtle, --color-error-base, --color-error-text Accessibility role="alert" for urgent messages (error, warning) role="status" for informational messages (info, success, neutral) Close button: aria-label="Dismiss alert" or similar Functional color is not the sole indicator — icon + text carry the meaning Contrast: functional color tokens are designed to meet WCAG AA on their respective subtle backgrounds Behavior Left border: 2px solid in the variant's base color. Padding-left compensated. Icon + text layout: inline-flex row, gap space-3 Title: font-sans, font-weight 600, text-base Message: font-serif, text-base, leading-relaxed Close button: positioned top-right, btn-ghost sizing Dismissal removes or hides the alert (JS responsibility) Platform Notes Web: CSS in @layer components. One file: alert.css. macOS: Map to a styled NSAlert or SwiftUI inline alert view.