Color — Base Palette
Root#09090B
Surface#18181B
Elevated#1F1F23
Hover#27272A
Active#2E2E33
Border#3F3F46
Text 2#A1A1AA
Text 1#FAFAFA
Color — Semantic
Success bg12% opacity
Success#22C55E
Error bg12% opacity
Error#EF4444
Warning bg10% opacity
Warning#EAB308
Info bg10% opacity
Info#71717A
Typography
Display
2.2rem / 600
Payment OS
H1
1.6rem / 500
Agent Wallets
H2
1.2rem / 500
Spending Mandates
H3
0.93rem / 600
Transaction Details
Body
0.87rem / 400
Every transaction must pass the spending mandate before execution. Policy enforcement is fail-closed by default.
Caption
0.73rem / 500
Section Label
Mono
0.8rem / 400
wal_0x99085505f506576c5C53
Mono sm
0.7rem / 400
0x787f86e0...454f64f5
HEADING FONT
Space Grotesk
Geometric sans. Technical precision without coldness.
MONOSPACE FONT
JetBrains Mono
Code, addresses, hashes, tabular data.
Borders & Elevation
subtle
6% white
default
8% white
prominent
12% white
focus
20% white
shadow-sm
shadow-md
shadow-lg
inset-top
Icons — Phosphor (Regular weight)
wallet
shield-check
key
lock-simple
arrow-up-right
arrow-down-left
credit-card
robot
code
terminal
chart-line-up
list-checks
pulse
plugs
gear
clipboard
Phosphor Icons — Regular weight only. Consistent stroke width. 1,300+ icons.
unpkg.com/@phosphor-icons/web
Buttons
Status Badges
Completed
Blocked
Pending
Inactive
Toasts
Payment of $10.00 USDC to openai.com completed.
Policy violation: merchant not in allowlist.
Metric Cards
Balance
$12,480.00
USDC on Tempo
Volume (24h)
$3,210.50
14 transactions
Policy Pass Rate
98.2%
3 blocked / 164 total
Active Agents
7
2 sessions active
Transaction Table
| Transaction |
Amount |
Merchant |
Chain |
Status |
Time |
| mpp_pay_8f3a...c91d |
$10.00 |
openai.com |
tempo |
Completed |
12s ago |
| mpp_pay_2e7b...a44f |
$15.00 |
anthropic.com |
tempo |
Completed |
2m ago |
| mpp_pay_9c1d...f882 |
$200.00 |
gambling.com |
tempo |
Blocked |
5m ago |
| bridge_4a8f...12ce |
$500.00 |
— |
base → tempo |
Pending |
8m ago |
Sidebar Navigation
Navigation Pattern
Left sidebar, always visible. Icon + label. Active state uses elevated background. Sections separated by divider + uppercase label. Phosphor regular weight, 16px.
// Keyboard shortcuts
const shortcuts = {
'g o': 'Overview',
'g w': 'Wallets',
'g t': 'Transactions',
'g a': 'Audit Trail',
}; // vim-style: press g then letter
Cards
MPC Wallet
Non-custodial wallet backed by Turnkey MPC. Private keys never leave the secure enclave.
Spending Mandate
Natural language policies enforced before every transaction. Fail-closed by default.
Audit Trail
Merkle-anchored append-only ledger. Every payment decision is cryptographically verifiable.
Code Block
# Create a wallet and execute payment on Tempo
from sardis import Sardis
client = Sardis(api_key="sk_live_...")
wallet = client.wallets.create(chain="tempo")
payment = client.payments.execute(
wallet_id=wallet.id,
amount=10.00,
merchant="openai.com",
token="USDC",
)
# payment.status == "completed"
# payment.tx_hash == "0x787f86e0..."
Keyboard Shortcuts
G O Overview
G W Wallets
G T Transactions
/ Search
N New payment
? All shortcuts
Design Rules
Color is signal. Green = passed. Red = blocked. No other colors. Everything else is zinc.
No gradients. Hierarchy through shade, border weight, and typography alone.
Mono for data. Addresses, hashes, IDs, amounts — always JetBrains Mono.
Inset top highlight. Cards get inset 0 1px 0 rgba(255,255,255,0.04) for depth.
Phosphor Regular only. Single icon weight across the entire product.