chips

Inline labels for status, meta, or tags. Monospace, soft background, never bold. A chip describes a value; it does not replace one.

status

Three states — ok, warn, hot — for any signal that has a runtime severity. The neutral chip carries metadata; the colored ones carry alarm. Never both at once.

<span class="chip">neutral</span>
<span class="chip ok">ok</span>
<span class="chip warn">warn</span>
<span class="chip hot">hot</span>

with dot

Add .dot when the chip is the entire status indicator — the bullet draws the eye to the state before the word.

<span class="chip ok dot">pegged</span>
<span class="chip warn dot">drifting</span>
<span class="chip hot dot">depeg</span>

mark

Use .mark sparingly — it borrows the brand yellow for emphasis. One per view, the same rule as the wordmark.

<span class="chip mark dot">live</span>

css

.chip {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--fg-muted);
  font-family: var(--font);
  font-size: var(--t-1);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.chip.ok   { background: var(--ok-soft);   color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.hot  { background: var(--hot-soft);  color: var(--hot); }
.chip.mark { background: var(--mark-soft); color: var(--mark); }
.chip.dot::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  margin-right: 6px; vertical-align: 1px;
}