Monospace Alerts
Alerts set in a monospace typeface for a technical, code style tone. Use for build output, terminal messages, or warnings aimed at developers.
Alerts set in a monospace typeface for a technical, code style tone. Use for build output, terminal messages, or warnings aimed at developers.
Search blocks by description or jump to a page.
Monospace Alerts is a set of five stacked alert panels, each rendered in a fixed-width typeface. The stack runs default, destructive, success, warning, and info in that order. Every panel carries a two-character-wide status icon on the left, a short bold title, and a one-line description below it. The thicker border and muted background give the whole set a terminal or build-output feel rather than a standard UI notification.
Each panel is independent. You can drop in any one of the five, reorder them, or swap the title and description copy without affecting the others. The icon and color pairing on each variant is the only constraint: the icon signals tone, so keep those matched when you write new messages.
Reach for this block on a page where the audience is developers or technical users. It fits naturally on a CI status dashboard, a deploy log viewer, or a settings page inside a developer tools product where the monospace rendering matches surrounding code output. Compared to the plain Basic Alerts, this set signals a deliberately technical context rather than a general notice, so it reads in tune with a creative agency or studio that ships code-heavy internal tools and wants even their status messages to feel at home next to a terminal.
A natural flow around it on a Components page:
Before
After
The fixed-width typeface makes this set a natural fit for machine- generated output. A few ways to put it to work:
Tip: keep the description to a single short line. Monospace text expands quickly, and a second wrapped line breaks the scan rhythm.