Design system

The decision triad, as UI.

Delego’s design system ships as a public shadcn registry — the theme and the signature components that render authorization state: decisions, approvals, signed receipts. Listed in the shadcn registry directory as @delego.

install a component
$ npx shadcn@latest add @delego/decision-pill

Works with any shadcn-compatible project. Swap decision-pill for any component below, or start with @delego/delego-theme for the tokens alone.

@delego/decision-pill

The allow / needs_approval / deny verdict as a compact, color-coded pill — the protocol's decision triad as UI.

@delego/signed-receipt

An audit receipt card: phase, outcome, fingerprint, intent hash, chain link, and the Ed25519 signature state.

@delego/status-badge

Approval lifecycle states — pending, approved, denied, consumed — with consistent semantics across surfaces.

@delego/field

Labelled form field with validation states, tuned to the theme's type scale.

@delego/button

Primary / secondary / ghost actions on the indigo brand ramp.

@delego/delego-theme

The full token set — OKLCH color ramps, type, radii — as CSS variables for light and dark.

Tokens

Semantic color, mapped to the protocol.

The palette is semantic before it is decorative: allow, needs_approval, and deny each carry contrast-safe variants for dark and light surfaces, so a decision reads the same anywhere it renders.

indigo · brand
signal · allow
amber · needs_approval
red · deny
ink · surface
paper · light
Browse the registry How shadcn registries work