design system

Patterns

Compositions that show the boundary.

Components are blocks; patterns are how they're arranged so the user reads the decision moment correctly. The decision packet is the signature element — every layout that explains how BehalfID works should make a verify call legible somewhere on the page.

Decision packet

The hero element. A vertical card with three regions: request, boundary, decision, then an audit footer. Use it to dramatize what verify does.

Action requestPOST /v1/verify
Agentagent_ollie
Actionpurchase
Vendorcoachella.com
Amount$742.00
BehalfID decision boundary
Decisiondenied
ReasonNo active purchase permission.
Auditverification.denied · req_3xZ9q

Product model pipeline

Four-step explainer used in marketing and docs introductions. Always in this order. Numbered 01–04.

01Action request

Agent, action, resource, vendor, amount, route — packaged before execution.

02Decision boundary

BehalfID verifies the request against the active passport before the tool runs.

03Execution state

Allowed actions continue. Denied or missing permissions fail closed.

04Audit event

Decision, reason, and enforcement result recorded for review and webhooks.

Marketing hero

Agent permission infrastructure

The permission layer between agents and action.

Define what an agent may do, verify every action before it runs, and fail closed when permission is missing.

SDK + REST verifyWebhooks & logsNative + connected
verify · livereq_3xZ9q
Actionpurchase
Amount$742.00
BehalfID
Decisiondenied

Action grid (sandbox pattern)

Used in the sandbox and demo pages to show how the same agent gets different decisions for different actions.

access_dataRead calendarAllowed by passport rule "calendar.read" until 2026-06-01.vendor: gmail.com
send_emailSend recapNeeds approval — passport requires human confirm above 5 recipients.vendor: gmail.com
purchaseBuy ticketDenied — no active purchase permission. Fail closed.vendor: coachella.com

App shell (console / dashboard / docs)

Workspace

Agents

agent_ollie
native · 3 permissions
activelast 4m
chat_claude_desktop
connected · provider claude.ai
disabledpaused 1h

Terminal log (audit pattern)

verification log · live
18:42:01denied agent_ollie · purchase · coachella.com · $742.00 · req_3xZ9q
18:39:18allowed agent_ollie · access_data · gmail.com · req_3xZ9p
18:36:44needs_approval agent_ollie · send_email · gmail.com · req_3xZ9o
18:31:02allowed agent_ollie · access_data · notion.so · req_3xZ9n

Do & don't

Do

  • Make the verify call visible. Show the agent + action + decision together.
  • Use one accent color (indigo) and one status color per decision.
  • Keep borders 1px. Resist the urge to add elevation to ordinary cards.
  • Number explanatory steps 01–04; never use icons in their place.

Don't

  • Don't recolor body cards with gradients. The card is a hairline; the surface is flat.
  • Don't introduce a fourth decision color — three states only.
  • Don't soften the decision word. “denied” not “blocked”, not “oops”.
  • Don't render a fake CTA over the decision packet. Let the moment land.