layout

Three containers, one grid system, one section rhythm. The kit defaults to prose-width (--col: 720px); reach for wide (--col-wide: 1280px) only on dashboards and product surfaces where information density is the point.

containers

Width is a choice the page makes once, at the top. Don't mix widths within a view.

--col · 720px · prose · the default

--col-wide · 1280px · dashboards, product surfaces

fluid · full viewport · use when the content is itself a canvas (charts, maps)

<div class="container"></div>          /* default 720px */
<div class="container wide"></div>     /* 1280px */
<div class="container fluid"></div>    /* no max-width */

responsive grid

A grid that breaks at the same widths everywhere in the system. 1 col under 640px; 2 cols 640–960; 3 cols 960–1200; 4 cols above. The auto variant fills available columns at a 220px minimum and is the right default for module dashboards.

.grid.cols-2

.grid.cols-3

.grid.cols-4

.grid.auto · min 220px, fill the row

<div class="grid cols-3">
  <div></div> <div></div> <div></div>
</div>

<!-- or, fill-as-you-go: -->
<div class="grid auto"></div>

two-col

Sidebar + main. Collapses to one column under 880px, with the sidebar on top.

sidebar · 240px

main · fills the rest

<div class="two-col">
  <aside></aside>
  <main></main>
</div>

stack — vertical rhythm

Use to space children of a container by one of the system steps. Defaults: s3 (16px) for tight bodies, s4 (24px) for sections, s5 (40px) between section blocks.

item

<div class="stack s4">
  <div></div>
  <div></div>
</div>

section

The unit of long-form structure on a page. Section head sits at --t-4 (20px), with an uppercase meta-tag right-aligned. A 1px top rule separates sections; the first one drops the rule.

multi-chain settlement

issue #59 · design

Switchboard becomes chain-agnostic. Agents transact on TRON, AVAX, Base, or ETH; PQ-signed receipts anchor on LUX. The settlement layer is the only place an agent has to be.

post-quantum signatures

PQ-0 → PQ-5 · in flight

Every PaymentProof carries a signature_alg and a PQ signature. The wire format adds two fields; the verifier is dilithium-default with optional precompile dispatch on LUX.

<section class="section">
  <div class="section-head">
    <h3>heading</h3>
    <span class="meta">tag · status</span>
  </div>
  <p>body</p>
</section>

hero

Single, big statement. t-6 (44px) headline, t-3 (15px) lead. Vertically padded so the rest of the page begins with breathing room.

programmable payments for agents.

One Python library, one contract suite, one binary wire. Chain-agnostic. Token-agnostic. Post-quantum.

<section class="hero">
  <h2>headline</h2>
  <p class="hero-lead">lead</p>
</section>

principles

Width is a choice. Prose default. Wide opt-in. Fluid only when the content is itself a canvas.

One grid. The same 1/2/3/4 col breakpoints everywhere in the system. Bespoke breakpoints are bespoke debt.

Space is the section. Section rhythm is the dominant cue; rules and meta-tags are the secondary cue. If you find yourself reaching for a third cue, restructure.