nav

Headers and footers are the same shape — wordmark on the left, links on the right, one hairline border. The wordmark on every kcolbchain page is the same five-character mark; never replace it with a custom logo per product.

header

<div class="topbar">
  <a class="wm" href="#">
    <em>kcolb</em>chain &nbsp;/&nbsp; depeg-monitor
  </a>
  <nav>
    <a href="#" class="here">dashboard</a>
    <a href="#">history</a>
    <a href="#">docs</a>
    <a href="#">source</a>
  </nav>
</div>

footer

<div class="foot">
  <div>MIT · <a href="#">source</a></div>
  <nav>
    <a href="#">site</a>
    <a href="#">docs</a>
    <a href="#">github</a>
  </nav>
</div>

breadcrumb

A breadcrumb belongs at the top of a deep view; if the page is one level below a list, you can probably drop it. Use a forward slash as the separator — it reads as a path and pairs with the monospace.

<div class="crumbs">
  <a href="#">kcolbchain</a><span class="sep">/</span>
  <a href="#">depeg-monitor</a><span class="sep">/</span>
  <a href="#">history</a><span class="sep">/</span>
  <span class="here">USDC</span>
</div>

css

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-1);
}
.topbar .wm { color: var(--fg); font-weight: 500; }
.topbar .wm em { color: var(--mark); font-style: normal; font-weight: 700; }
.topbar nav { display: flex; gap: var(--s-3); }
.topbar nav a { color: var(--fg-faint); text-decoration: none; }
.topbar nav a:hover, .topbar nav a.here { color: var(--fg); }

.foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-1); color: var(--fg-faint);
}

.crumbs { font-size: var(--t-1); color: var(--fg-faint); font-family: var(--font); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs .sep { color: var(--fg-faint); margin: 0 6px; }
.crumbs .here { color: var(--fg); }