cards

A bounded container — hairline border, one elevation, no shadow. Cards hold a single thought. If you find yourself nesting cards, restructure the page.

basic

title

One card, one thought. The border is the boundary; the background is the elevation. Both come from tokens.

<div class="card">
  <div class="top"><h3>title</h3></div>
  <p>One card, one thought.</p>
</div>

metric

For dashboards. The metric is the visual subject; the chip and delta annotate it.

USDC

pegged

$1.0009

+9.0 bps vs $1.00 peg

USDT

warn

$0.9928

-72.0 bps vs $1.00 peg

DAI

depeg

$0.9750

-250.0 bps vs $1.00 peg

<div class="card">
  <div class="top">
    <h3>USDC</h3>
    <span class="chip ok">pegged</span>
  </div>
  <div class="metric">$1.0009</div>
  <div class="delta ok">+9.0 bps vs $1.00 peg</div>
</div>

module

For documenting a library, capability, or piece of infrastructure. Title + status, a sentence of body, a footer row of links. Same skeleton as basic; the footer is the only addition.

x402_middleware

shipped

Server-side HTTP 402 gate. Drop into FastAPI or Flask; verifies X-PAYMENT signatures and emits the standard accepts[] envelope.

source PR #19 docs

zap_transport

in PR

Binary wire for PaymentOffer / PaymentProof. Zero-allocation; an order of magnitude smaller than JSON.

source PR #21

SettlementRegistry

design

PQ-signed receipt anchor on LUX. The settlement surface for chain-agnostic agent payments. Pending Z's review.

issue #59

<div class="card module">
  <div class="top">
    <h3>x402_middleware</h3>
    <span class="chip ok">shipped</span>
  </div>
  <p class="body">Server-side HTTP 402 gate. Drop into FastAPI…</p>
  <div class="foot">
    <a href="#">source</a>
    <a href="#">PR #19</a>
    <a href="#">docs</a>
  </div>
</div>

css

.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
}
.card .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.card .metric {
  font-family: var(--font);
  font-size: var(--t-5);
  color: var(--fg);
}
.card .delta { font-size: var(--t-1); color: var(--fg-muted); }
.card .delta.ok   { color: var(--ok); }
.card .delta.warn { color: var(--warn); }
.card .delta.hot  { color: var(--hot); }

/* module variant */
.card.module .body {
  color: var(--fg-muted);
  font-size: var(--t-2);
  margin-bottom: var(--s-3);
}
.card.module .foot {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-1);
}
.card.module .foot a { border-bottom: none; color: var(--fg-faint); }
.card.module .foot a:hover { color: var(--mark); }