Color — neutrals
Color — primary
Status — collections workflow
Tinted background + dark text, so meaning never rides on color alone (paired with a label).
Paid
Due soon
Needs approval
In cadence
Typography
System sans stack; modular scale (1.200). Base 16 px, mobile-first.
Heading 3xl
--pr-text-3xlHeading 2xl
--pr-text-2xlHeading xl
--pr-text-xlBody lg — readable lede text
--pr-text-lgBody base — the default reading size
--pr-text-baseSmall — hints & metadata
--pr-text-smSpacing — 4 px base
| Token | Value | Scale |
|---|---|---|
--pr-space-2 | 0.5rem | |
--pr-space-4 | 1rem | |
--pr-space-6 | 1.5rem | |
--pr-space-8 | 2rem | |
--pr-space-12 | 3rem |
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.