Patterns
Common components backed by open data structures. Standard shapes, styled for context. Any conforming payload renders in any conforming renderer.
Avatar
Identity at a glance. Handle, image, presence.
sm
md
lg
<div class="flex items-center gap-8">
<div class="flex flex-col items-center gap-2">
<div class="size-8 rounded-full bg-surface-overlay flex items-center justify-center">
<span class="text-xs font-medium text-brand">
R
</span>
</div>
<span class="text-xs text-neutral-500">sm</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="size-10 rounded-full bg-surface-overlay flex items-center justify-center">
<span class="text-sm font-medium text-brand">
RA
</span>
</div>
<span class="text-xs text-neutral-500">md</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="size-14 rounded-full bg-surface-overlay flex items-center justify-center">
<span class="text-base font-medium text-brand">
RA
</span>
</div>
<span class="text-xs text-neutral-500">lg</span>
</div>
<div class="flex flex-col items-center gap-2">
<div class="relative">
<div class="size-10 rounded-full bg-surface-overlay flex items-center justify-center">
<span class="text-sm font-medium text-brand">
RA
</span>
</div>
<span class="absolute bottom-0 right-0 size-2.5 rounded-full bg-green-400 ring-2 ring-surface-base">
</span>
</div>
<span class="text-xs text-neutral-500">online</span>
</div>
</div>
{
"type": "avatar",
"handle": "riveraudio",
"initials": "RA",
"image": null,
"status": "online"
}
Item Card
A thing that exists. Name, image, price, tags.
Vintage Receiver
Pioneer SX-780 from 1978. Clean channels, warm sound.
250,000 sats
Untitled Item
No description
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-surface-raised rounded border border-neutral-800 overflow-hidden">
<div class="aspect-[4/3] bg-surface-overlay flex items-center justify-center">
<span class="text-5xl">
🎧
</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-neutral-50 truncate">
Vintage Receiver
</h3>
<p class="mt-1 text-sm text-neutral-500 line-clamp-2">
Pioneer SX-780 from 1978. Clean channels, warm sound.
</p>
<div class="mt-3 flex items-center justify-between">
<span class="text-lg font-semibold text-brand font-mono">
250,000 sats
</span>
</div>
<div class="mt-2 flex gap-1">
<span class="px-2 py-0.5 bg-surface-overlay text-neutral-400 text-xs rounded-full">
vintage
</span>
<span class="px-2 py-0.5 bg-surface-overlay text-neutral-400 text-xs rounded-full">
audio
</span>
<span class="px-2 py-0.5 bg-surface-overlay text-neutral-400 text-xs rounded-full">
pioneer
</span>
</div>
</div>
</div>
<div class="bg-surface-raised rounded border border-neutral-800 overflow-hidden">
<div class="aspect-[4/3] bg-surface-overlay flex items-center justify-center">
<span class="text-5xl">
📦
</span>
</div>
<div class="p-4">
<h3 class="font-semibold text-neutral-50 truncate">
Untitled Item
</h3>
<p class="mt-1 text-sm text-neutral-500">
No description
</p>
</div>
</div>
<div class="bg-surface-raised rounded border border-neutral-800 overflow-hidden animate-pulse">
<div class="aspect-[4/3] bg-surface-overlay"></div>
<div class="p-4 space-y-3">
<div class="h-4 bg-surface-overlay rounded w-3/4"></div>
<div class="h-3 bg-surface-overlay rounded w-full"></div>
<div class="h-5 bg-surface-overlay rounded w-1/3 mt-3"></div>
</div>
</div>
</div>
{
"type": "item",
"name": "Vintage Receiver",
"description": "Pioneer SX-780 from 1978.",
"price": { "amount": 250000, "unit": "sat" },
"emoji": "🎧",
"tags": ["vintage", "audio", "pioneer"],
"images": ["/uploads/receiver-01.jpg"]
}
Post Card
A thing someone said. Content, author, time.
Just listed a batch of restored receivers. All tested, all clean.
audiosmith
·
2 hours ago
<div class="max-w-lg">
<div class="bg-surface-raised rounded border border-neutral-800 p-5">
<p class="text-neutral-300">
Just listed a batch of restored receivers. All tested, all clean.
</p>
<div class="mt-4 pt-3 border-t border-neutral-800 flex items-center gap-2">
<div class="size-6 rounded-full bg-surface-overlay flex items-center justify-center">
<span class="text-xs font-medium text-brand">
A
</span>
</div>
<span class="text-sm text-neutral-400">
audiosmith
</span>
<span class="text-neutral-600">·</span>
<span class="text-sm text-neutral-500">
2 hours ago
</span>
</div>
</div>
</div>
{
"type": "post",
"body": "Just listed a batch of restored receivers.",
"author": { "handle": "audiosmith" },
"created_at": "2025-05-16T10:30:00Z"
}
Contact Card
A person or entity. Name, handle, bio, location.
River Audio
@riveraudio
Restoring vintage hi-fi since 2019
Portland, OR
<div class="max-w-sm">
<div class="bg-surface-raised rounded border border-neutral-800 p-5">
<div class="flex items-start gap-4">
<div class="size-12 rounded-full bg-surface-overlay flex items-center justify-center shrink-0">
<span class="text-sm font-medium text-brand">
RA
</span>
</div>
<div class="min-w-0">
<h3 class="font-semibold text-neutral-50">
River Audio
</h3>
<p class="text-sm text-neutral-400">
@riveraudio
</p>
<p class="mt-2 text-sm text-neutral-300">
Restoring vintage hi-fi since 2019
</p>
<p class="mt-1 text-xs text-neutral-500">
Portland, OR
</p>
</div>
</div>
</div>
</div>
{
"type": "contact",
"name": "River Audio",
"handle": "riveraudio",
"bio": "Restoring vintage hi-fi since 2019",
"location": "Portland, OR",
"avatar": null
}
Transaction Receipt
A thing that happened. Amount, parties, txid.
Payment
Confirmed
250,000 sats
From
@audiosmith
To
@riveraudio
txid
a3f2...8b1c
<div class="max-w-md">
<div class="bg-surface-raised rounded border border-neutral-800 p-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-medium text-neutral-300">
Payment
</span>
<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded bg-green-400/20 text-green-400">
Confirmed
</span>
</div>
<p class="text-2xl font-semibold text-neutral-50 font-mono">
250,000 sats
</p>
<div class="mt-4 space-y-2 text-sm">
<div class="flex justify-between">
<span class="text-neutral-500">From</span>
<span class="text-neutral-300">@audiosmith</span>
</div>
<div class="flex justify-between">
<span class="text-neutral-500">To</span>
<span class="text-neutral-300">@riveraudio</span>
</div>
<div class="flex justify-between">
<span class="text-neutral-500">txid</span>
<code class="text-neutral-400 font-mono text-xs">
a3f2...8b1c
</code>
</div>
</div>
</div>
</div>
{
"type": "transaction",
"amount": { "value": 250000, "unit": "sat" },
"from": { "handle": "audiosmith" },
"to": { "handle": "riveraudio" },
"txid": "a3f2...8b1c",
"status": "confirmed"
}
Listing Card
An item offered for sale. Item reference, price, seller, status.
Vintage Receiver
Active250,000 sats
audiosmith
<div class="max-w-sm">
<div class="bg-surface-raised rounded border border-neutral-800 overflow-hidden">
<div class="aspect-[3/2] bg-surface-overlay flex items-center justify-center">
<span class="text-4xl">🎧</span>
</div>
<div class="p-4">
<div class="flex items-center justify-between">
<h3 class="font-semibold text-neutral-50">
Vintage Receiver
</h3>
<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded bg-green-400/20 text-green-400">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</span>
</div>
<p class="mt-2 text-xl font-semibold text-brand font-mono">
250,000 sats
</p>
<div class="mt-3 pt-3 border-t border-neutral-800 flex items-center gap-2">
<div class="size-5 rounded-full bg-surface-overlay flex items-center justify-center">
<span class="text-[10px] font-medium text-brand">A</span>
</div>
<span class="text-sm text-neutral-400">
audiosmith
</span>
</div>
</div>
</div>
</div>
{
"type": "listing",
"item": { "name": "Vintage Receiver", "emoji": "🎧" },
"price": { "amount": 250000, "unit": "sat" },
"seller": { "handle": "audiosmith" },
"status": "active"
}