Code

Courier New, 11px, ink. No syntax highlighting — this brand never asks the reader to parse a rainbow.

Inline — the .mono utility

Wrap any token reference in .mono: the institutional blue --color-link is set to #003366, served as a CSS custom property on :root.

Block

:root {
  --color-text: #1f2120;
  --color-link: #003366;
  --color-red:  #990000;
  --color-divider: #708776;
}

.btn-primary {
  background: var(--ink);
  color: var(--color-white);
  border: 1px solid var(--ink);
  /* square is the law */
  border-radius: 0;
}

Filename / token labels

When a doc page calls out a specific token name, render it in accent-colored mono — for example --fs-hero or .quote-inspect. This is the only place the red accent appears outside the .red utility itself, and it's how every other token reference on the site reads.

Anatomy

Family — Courier New, Courier, monospace (via --font-mono).
Inline size — 11px. Tight against the surrounding Georgia or Verdana copy.
Block — 13px, var(--surface) fill, 1px hairline, overflow-x:auto for long lines.
No syntax highlighting. The brand reads as a regulatory document; multi-colored tokens fight that intent.