Colors

One accent. Three statuses. Everything else is grayscale.

BehalfID is a permission product. Color carries meaning: indigo is the brand and the “allowed” decision; status colors only appear when a decision must be read at a glance. Avoid recoloring the UI to liven it up — restraint is the brand.

Surfaces

--bgCanvas#000000Page background. The lowest layer.

--panelPanel#0a0a0aSolid surface — code blocks, logo mark, sidebar.

--surfaceSurfacergba(10,10,10,.82)Default card. Translucent so radial glows show through.

--surface-softSoft surfacergba(5,5,5,.54)Empty states, secondary panels, console rows.

Ink

--textText#fafafaPrimary type. Headings, body, decision values.

--mutedMuted#707070Captions, labels, kicker descriptions, sidebar links.

--borderBorderrgba(255,255,255,.08)Default 1px hairline. Used for almost every divider.

--border-strongBorder strongrgba(255,255,255,.16)Buttons, badges, form-control idle borders.

Brand accent

--accent · #6366F1Indigo is the only brand color.Used on primary buttons, kicker eyebrows, the “ID” of the wordmark, and the “allowed” status pill. Never a fill on body cards.

--accent-glow · rgba(99,102,241,.16)Glow tintBackground for allowed pills, focus rings, and selection. Borders use 0.45–0.5 alpha.

Indigo ramp (use only the named tokens — ramp shown for reference)

900

800

700

600

500

400

300

200

Status

Status colors carry a specific decision. Use them on borders and chip backgrounds; reserve the bright text variant for the decision word itself.

--okAllowed#6ee7b7Decision = allowed. Border #22c55e at 32% alpha.

--denyDenied#fca5a5Decision = denied. Border #ef4444 at 30% alpha.

--warnNeeds approval#fcd34dDecision = needs_approval. Border #eab308 at 34% alpha.

--accentActive / brand#6366F1Active state, primary CTA, "ID" wordmark accent.

Status pills in context

alloweddeniedneeds approvalactivedisabledrevokedexpired

Usage matrix

Token

Use for

Don't use for

Pairs with

--bg

Page canvas. Empty space.

Card fills.

--text, --muted

--panel

Code shells. Sidebar. Logo mark.

Hero backgrounds.

--text, --accent

--accent

Primary buttons, kickers, "ID" wordmark.

Body backgrounds. Decorative gradients.

--text on top.

--ok

"allowed" word + chip border.

General success toasts.

--ok-bg, --ok-border

--deny

"denied" word + chip border.

Form validation errors.

--deny-bg, --deny-border

--warn

"needs approval" word + chip border.

Warnings, cautions, deprecation banners.

--warn-bg, --warn-border

Accessibility

Test contrast against --bg and --panel. Body text on canvas is 14.7:1 — well above WCAG AAA. Muted text is 5.9:1 — AA for body, AAA for large. Don't use --muted on --surface-soft for body copy without bumping size.