← Design system

Components

The .pr-* component layer (built on the tokens). These are the primitives the operator-console patterns and the React product UI compose. Every one is exercised by a pattern; consume tokens.css + components.css.

Status badges .pr-badge

Tinted background + dark text; meaning always carries a label, never color alone.

Paid Overdue In negotiation Needs approval Open

InvoiceStatus → variant: paid·promised → is-paid · overdue → is-due · in_negotiation → is-pending · disputed → is-escalate · open·written_off → is-neutral

Actor chips .pr-actor

Who took an action — maps Interaction.actor.

Propeller Operator Debtor

agent = Propeller · human = operator · debtor = customer.

Buttons .pr-btn

44px min tap target; hover + visible keyboard focus. .pr-btn-sm for row actions.

Stat tiles .pr-stat / .pr-stats

Total overdue
$83,050
7 accounts
DSO
38
▼ 4 days
Needs attention
2
escalations

Card & panel .pr-card / .pr-panel-head

Panel title

header slot
Card body — surface, border, soft elevation.

Account row .pr-row / .pr-draft

Audit timeline .pr-timeline / .pr-event

  1. Decision Send follow-upMay 15
    Envelope: in bounds
  2. Decision Hold & escalateMay 27
    Envelope: out of bounds

Conversation thread .pr-thread / .pr-msg

  1. PropellerMay 15
    Outbound follow-up (left accent = agent).
  2. DebtorMay 27
    Inbound reply (left accent = debtor).

Callouts .pr-callout

Out of boundsHeld for your decision — the agent did not act.
Heads-upInformational context for the operator.

Comparison .pr-vs

Debtor's request
30% off
Settle at $6,860.
Policy floor crossed
15% max
Floor $8,330 — $1,470 below.

Form controls .pr-field / .pr-segmented / .pr-check

$ Help text describes the bound.
Tone
Always escalate disputes.

Chips & pills .pr-chip / .pr-count-pill

To dana@northwind.example Channel Email 2 need approval

See these composed in context: dashboard · account record · escalation · envelope editor · draft modal.