alerts

Two shapes. A log is a dense stream — many short messages, one severity character per line. A banner is one event you want a reader to handle. Use the log for ambient state; reserve the banner for something the user must read.

log

<div class="log">
  <h3>alert log</h3>
  <ul>
    <li class="hot">
      <span class="lvl">hot</span>
      <span class="ts">14:21:03</span>
      <span class="msg">USDT depeg: -198.0 bps via coinbase</span>
    </li>
    ...
  </ul>
</div>

banner

The banner is the loud cousin. A 4px colored bar on the left, content on the right. Place at the top of a view or above the affected card; never two at once.

<div class="banner hot">
  <div class="mark"></div>
  <div class="body">
    <div class="lead">USDT depegged on coinbase — -198.0 bps</div>
    <div class="sub">first observed 14:21:03</div>
  </div>
</div>

css

.log { background: var(--bg-elev); border: 1px solid var(--line);
       border-radius: var(--radius); padding: var(--s-3) var(--s-4); }
.log h3 { font-size: var(--t-1); text-transform: uppercase;
          letter-spacing: 0.12em; color: var(--fg-faint); }
.log ul { list-style: none; padding: 0; margin: 0;
          font-family: var(--font); font-size: var(--t-1); }
.log li { display: grid; grid-template-columns: 56px 84px 1fr;
          gap: var(--s-2); padding: 6px 0;
          border-top: 1px solid var(--line); color: var(--fg-muted); }
.log li.ok   .lvl { color: var(--ok); }
.log li.warn .lvl { color: var(--warn); }
.log li.hot  .lvl { color: var(--hot); }

.banner { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4);
          border: 1px solid var(--line); border-radius: var(--radius);
          background: var(--bg-elev); }
.banner .mark { flex: 0 0 4px; align-self: stretch; background: var(--fg-muted); }
.banner.ok   .mark { background: var(--ok); }
.banner.warn .mark { background: var(--warn); }
.banner.hot  .mark { background: var(--hot); }