Section 10 · Components

Badges & tags.

Two distinct things. Tags classify (HTTP, SMTP). Badges annotate state (200 OK, failed, draft). Don't mix shapes.

Protocol tags

3- to 4-letter monospace. Each protocol has a fixed colour. The colour does not vary across the app.

HTTPSMTPIMAPLDAP

tag.css.tag {
  display: inline-block;
  font: 600 10.5px/1 var(--vp-font-mono);
  letter-spacing: 0.08em;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: color-mix(in oklch, currentColor 12%, transparent);
}
.tag.http { color: var(--vp-color-protocol-http); }
.tag.smtp { color: var(--vp-color-protocol-smtp); }
.tag.imap { color: var(--vp-color-protocol-imap); }
.tag.ldap { color: var(--vp-color-protocol-ldap); }

Status badges

● 200 OK ● 301 ● 500 FAILED DRAFT RUNNING

2xx · successneon-lime · "● 200 OK"

3xx · redirectwarn · "● 301"

4xx · clientdanger · "● 404"

5xx · serverdanger · "● 500"

FAILEDdanger · transport-level (no response, timeout)

RUNNINGinfo · with pulse animation

DRAFTfg-mute · saved but never run

The pulse dot

For "live" anything — running probe, streaming response, connected proxy. Not an icon — a stylised ::before.

proxy live · :8080

Don't

Don't add new protocol colours. The four are the four.
Don't use a pill shape (border-radius: 999) for tags. 3px corners — this is technical surface, not consumer.
Don't put more than one badge on a row. Pick the most informative one. A row that says HTTP · "200 OK" · "fast" is noise.