Propeller Design System · v0.1

Calm, clear, credible.

Foundations for Propeller, an AI collections associate. Collections is a sensitive domain — the visual language stays professional and respectful, never aggressive. Mobile-first and WCAG 2.1 AA from day one.

Color — neutrals

slate-100
#f1f5f9
slate-300
#cbd5e1
slate-500
#64748b
slate-700
#334155
slate-900
#0f172a

Color — primary

primary-100
#e0e7ff
primary-500
#6366f1
primary-600
#4f46e5
primary-700
#4338ca

Status — collections workflow

Tinted background + dark text, so meaning never rides on color alone (paired with a label).

Due soon Needs approval In cadence

Typography

System sans stack; modular scale (1.200). Base 16 px, mobile-first.

Heading 3xl --pr-text-3xl
Heading 2xl --pr-text-2xl
Heading xl --pr-text-xl
Body lg — readable lede text --pr-text-lg
Body base — the default reading size --pr-text-base
Small — hints & metadata --pr-text-sm

Spacing — 4 px base

TokenValueScale
--pr-space-20.5rem
--pr-space-41rem
--pr-space-61.5rem
--pr-space-82rem
--pr-space-123rem

Buttons

Min 44 px tap target. Hover + visible keyboard focus.

Form controls

Agent will not negotiate below this without approval.

Patterns

Reference compositions of the system against real product surfaces. See also the component catalog for the full .pr-* layer.

Component catalog → Book dashboard → Account record → Escalation review → Policy envelope → Edit draft (modal) → Cadence adherence →