design preview
Primitives and composition
Every primitive in the design system, rendered in the active theme. Toggle theme from the nav.
01
Color tokens
02
Primitives
LogoBeaker
Hand-authored SVG, currentColor.
StatusPill
6 states, lives in Cell header.
idlereadyrunningpassfailwarn
CaveatPill
Caveat key=value, three satisfier states.
Chip
Neutral kicker labels.
L402LSATmainnetscheme=L402
ViewModeToggle
raw | json | code segmented control.
TruncMiddle
Fixed-width identifier with hover tooltip.
BigBlob
Long mono value, copy + wrap toggles.
Generated value
254 chars
MDAxYWxvY2F0aW9uIGxzYXQuYm9sdHdhbGwuaW8KMDAyNGlkZW50aWZpZXIgYjEyM2YwMDljYWZlYmFiZTU1NTU2NjY2N2YwMQowMDIzY2lkIGV4cGlyZXM9MjAyNi0wMS0wMVQwMDowMDowMFoKMDAxYWNpZCBpcD0xMC4wLjAuMQowMDJmc2lnbmF0dXJlIDdkOWMxMzMyZmFhZGRlY2FmZTk5OTljYWZlZGVhZGJlZWY1NTY2NzcwMDhkCg
CodeStrip
Visible when Cell view = code.
// rendering preview — production highlighting uses Prism const token = await client.build({ preimage, macaroon, });
HeaderRow
Title · subtitle · trailing slot.
Parse a token
ready
Cell
The only top-level container.
Inspect identifier
parsed
Identifier
03
MacaroonStripe
4-segment macaroon visualization. Click a segment to reveal raw bytes.
04
CodeSnippet
Live-updating syntax-highlighted snippet. Type in the field to see the template update.
import { L402 } from "@boltwall/l402";// Build an L402 Authorization headerconst token = new L402({macaroons: "AgEDbHRu…",paymentPreimage: "0001020304…",});const header = token.toAuthorizationHeader();
05
Composite — Validate a token
Validate a token
3 / 5 passed
Checks
pass
Signature verified
HMAC-SHA256 over canonical bytes
pass
Preimage matches payment hash
sha256(preimage) == payment_hash
pass
Not expired
expires=2026-01-01T00:00:00Z
warn
Token size within limit
612 / 1024 bytes
fail
All caveats satisfied
1 caveat unsatisfied: ip=10.0.0.1
Caveats