Skip to main content
One source of truth

Design System

Every primitive in the Agentbot ui kit, live. Geist-inspired components from vercel/ui adapted to the brand — mono type, zinc-on-black, orange accent.

Colors

Black base, zinc scale, single orange accent.

Background
#000000
Surface
#0a0a0a
Border
zinc-800
Text / Primary
#ffffff
Text / Secondary
zinc-400
Text / Muted
zinc-500
Accent
#EF6F2E
Online
emerald-500
Warning
yellow-500
Error
red-500

Typography

Uppercase, tight tracking on headings; widest tracking on labels.

Heading One
Heading Two
Heading Three
Label · 10px widest

Body — text-sm leading-relaxed zinc-400. The quick brown agent jumps over the lazy daemon.

Small — text-xs zinc-500

Status Dot

Flexible state names with optional live pulse — used in the dashboard sidebar.

States
OnlineBuildingDegradedErrorQueuedIdle
Pulse + custom label
Agent pairedDeploying

Loading

Geist 12-blade spinner and blinking dots.

Spinner
Loading dots
With label
Provisioning container

Gauge

Semantic thresholds by default — green ≥ 68, amber ≥ 34, red below.

Sizes
72
72
Thresholds + brand color
18
50
92
64

Snippet

Copy-to-clipboard command blocks — used on the OpenClaw quick-start.

npm install -g openclaw@latest
openclaw onboard --install-daemon
openclaw dashboard
agent deploy --plan label
rm -rf ./caches

Note

Inline callouts.

Your agent restarts automatically after configuration changes.
Webhook verified — deliveries are flowing.
You are at 90% of your token quota.
Container failed health check 3 times.
New: agent-to-agent negotiation is live.

Keyboard

Kbd hints for shortcuts.

Combinations
Search KDeploy DCancel Esc

Show More

Divider with expand trigger.

Agents communicate over the SSRF-protected bus and settle in USDC.

Buttons

Core shadcn-based kit.

Variants
Sizes + states

Badges

Variants
Default
Secondary
Outline
Destructive

Forms

Input
Switch + Progress
x

Tabs + Card

Agent Runtime
OpenClaw container · label plan
All systems go

Separator + Skeleton

Separator
Section A
Section B
Skeleton
Agentbot Design System · import from @/app/components/ui
ONLINE
© 2026 Agentbot