Brand
The BotIdBadge is the mark: ring construction is the tier, ring colour is fault status, and the two are independent. Everything below is rendered by the same components and tokens the rest of the interface uses, so this page cannot drift from what ships.
Badge construction
The second channel: fault status
Both marks above are Gold. Tier is carried entirely by the geometry, so it survives greyscale, deuteranopia and a screenshot run through a compressor — none of which preserve hue. That is the whole reason the construction is not decorative.
Type
--font-heading · h1–h3 and the headline numerals, and nothing else. It is loud because it is rare; setting h4–h6 in it too would spend the emphasis on section labels. The Sans cut, not the family's Script — this variable also sets the 34px numerals on the overview, and a script numeral is a poor way to state a fact.
--font-body · 500 for reading, 700 for h4–h6 and button labels. Both faces are self-hosted and preloaded; the interface makes no third-party font request.
Palette
Four hue families that never borrow from each other: accent is the interface talking, score is a diverging ramp around 5000, tier is metal, liveness is one reserved signal. Ratios are measured against --color-bg in the dark theme, which is the default.
| Role | Token | Value | Swatch | Contrast on ground |
|---|---|---|---|---|
| Ground | --color-bg | #171615 | — | |
| Ink | --color-text | #f3f2f2 | 16.2:1 | |
| Accent | --color-accent | #ff563c | 5.7:1 | |
| Tier — Bronze | --tier-bronze | oklch(66% .09 55) | 5.7:1 | |
| Tier — Silver | --tier-silver | oklch(78% .02 250) | 9.1:1 | |
| Tier — Gold | --tier-gold | oklch(82% .12 85) | 10.3:1 | |
| Score — critical | --score-critical | oklch(62% .20 25) | 4.5:1 | |
| Score — good | --score-good | oklch(74% .14 152) | 8.3:1 | |
| Score — strong | --score-strong | oklch(84% .16 152) | 11.7:1 | |
| Liveness | --live | oklch(72% .13 240) | 7.4:1 |
Do / Don't
- Use the badge everywhere an agent is referenced.
- Let construction carry the tier, so it survives greyscale.
- Take colour from a token; never write a hex in a component.
- Flush-left every label.
- Recolour the badge rings to match the tier.
- Reuse a token across two hue families — that is how Gold once rendered identically to a failing score.
- Round a corner on cards or buttons.
- Centre button labels.