Design system
The parts list.
Every token, component and motion curve this site is built from. Toggle the theme to see both modes.
Logo
pumba
A checkmark built from three chain nodes: agent, proof and storefront. The final node is solid, which is the settled state.
Holo Foil palette
Semantic tokens · change per theme
--bg
--bg-deep
--surface
--surface-2
--line-strong
--ink
--ink-2
--ink-3
--accent-ink
--accent-2-ink
--holo
Type · Geist & Geist Mono
Display · --text-3xl
Proof-based checkout
H2 · --text-2xl
Verify, then fulfil
XL · --text-xl
Two proofs per checkout
H3 · --text-lg
Present a passport
Body L · --text-md
The storefront verifies the settlement proof.
Body · --text-base
The storefront verifies the settlement proof.
Small · --text-sm
Same-chain today, cross-chain when needed.
Mono · labels & code
proof.verify(fill) → paid
Buttons
Chips, keys & status
Cards · spotlight hover
Card title
Move your cursor across the card.
Card title
The border lights where you point.
Static card
No spotlight.
Form controls
Icons · 24px grid, 1.6 stroke
- passport
- intent
- proof
- store
- agent
- lattice
- chain
- layers
- key
- keys
- lock
- receipt
- swap
- globe
- policy
- terminal
- code
- file
- check
- check-circle
- x
- alert
- search
- command
- arrow-right
- arrow-up-right
- sun
- moon
- copy
- github
- x-logo
- play
- pause
- reset
- sparkle
- bolt
- eye
- clock
- menu
Motion
--ease-outEntrances, reveals, hovers
--ease-in-outLoops, page exits
--ease-springTicks, toggles, toasts
Every animation is turned off when the visitor's system asks for reduced motion.