code

The whole brand is monospace, so code blocks don't need to announce themselves. Border, soft surface, no horizontal scrollbar drama. Highlight three things if you must: comments, keys, strings.

inline

Set <code class="inline">warn_threshold: 0.005</code> in
<code class="inline">config/default.yaml</code> to bump the warn band.

block

Plain block — fine for any language. Use the three spans if you want minimal highlighting without a JS highlighter.

# Watch USDC and USDT, 50bps warn, 100bps critical
stablecoins:
  - symbol: USDC
    warn_threshold: 0.005
    critical_threshold: 0.01

<pre class="block">
<span class="c-comment"># comment</span>
<span class="c-key">stablecoins</span>:
  - <span class="c-key">symbol</span>: <span class="c-str">USDC</span>
</pre>

shell

For terminal sessions. The .prompt span is user-select: none so a reader copying the command never grabs the dollar sign.

$ pip install -e .
$ depeg-monitor --config config/default.yaml
Starting depeg-monitor — checking every 30s
Watching: USDC, USDT, DAI

<pre class="shell">
<span class="prompt">$ </span>pip install -e .
<span class="prompt">$ </span>depeg-monitor --config config/default.yaml
<span class="out">Starting depeg-monitor — checking every 30s</span>
</pre>

css

code.inline {
  font-family: var(--font); font-size: 0.92em;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 5px; color: var(--fg);
}
pre.block, pre.shell {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font); font-size: var(--t-1);
  color: var(--fg); overflow-x: auto;
}
pre.block .c-comment { color: var(--fg-faint); }
pre.block .c-key     { color: var(--mark); }
pre.block .c-str     { color: var(--ok); }
pre.shell .prompt    { color: var(--fg-faint); user-select: none; }
pre.shell .out       { color: var(--fg-muted); }