How Fees maps to 00-shared/02 tokens and 00-shared/03 components. No new
design tokens; money + finance get semantic aliases only.
| Purpose | Recipe (light / dark) | Used for |
|---|
| Paid / settled | successContainer / onSuccessContainer | paid chip, settled banners |
| Partial / pending | warningContainer / onWarningContainer | partial chip, "amount due" emphasis |
| Overdue | errorContainer / onErrorContainer + error icon | overdue chip, overdue amounts |
| Issued | primaryContainer / onPrimaryContainer | issued chip, info banners |
| Money emphasis | onSurface mono tabular (02 §2) | totals, dues, receipts |
| Money secondary | onSurfaceVariant | labels, per-item amounts |
| Negative/refund | error | refund amounts |
| Zero state | onSurfaceVariant | "Settled" text |
Semantic roles: success (paid), warning (partial), error (overdue/refund) —
standalone custom roles per 00-shared/02 §1.1.
| Widget | Tokens |
|---|
| AmountText | bodyLarge–displaySmall mono, tabularFigures, onSurface/onSurfaceVariant |
| StatusChip | *Container role colors, labelMedium, R-r-sm, e-0 |
| InvoiceCard | surfaceContainerLow, R-r-lg, e-1 |
| DueRow | surface, R-r-md, e-0; row height ≥ 56 |
| LineItemsTable | surfaceContainerLow, R-r-md; mismatch banner tertiaryContainer |
| ReceiptDocument | surfaceContainerHigh, R-r-lg, e-1; mono for numbers |
| MoneyField | surfaceVariant fill, outline border, error on error, focus primary |
| Payment sheet | surfaceContainerHigh, R-r-xl, e-5 |
| Token | Use |
|---|
displaySmall | invoice total, dues headline amounts |
titleLarge | screen titles (Fees, Dues) |
titleMedium | card titles, section headers, amounts on cards |
bodyMedium | secondary rows (structure meta, payment refs) |
bodySmall | captions ("Reduces total at issue time") |
labelMedium | chips, badges |
mono | all amounts, refs (transactionReference, receiptNumber, idempotencyKey display) |
Numerals: FontFeature.tabularFigures() mandatory on every amount
(00-shared/02 §2).
Material Symbols (outlined 24) + filled for status:
| Icon | Usage |
|---|
payments | fees destination, collect action |
receipt_long | receipt view |
description | invoice doc, draft chip |
mail | issued chip |
hourglass | partial chip |
check_circle | paid chip |
schedule | overdue chip, past-due dates |
cancel | cancelled chip |
wallet | payment method |
content_copy | copy reference |
qr_code | receipt QR (forward-looking) |
Every icon has a text label or tooltip+Semantics (02 §7).
| Token | Where |
|---|
Mo.m-instant | chip cross-fades under reduced motion, value changes |
Mo.m-fast | status chip AnimatedSwitcher, hover tints |
Mo.m-base | payment sheet spring, dialogs, card fade on delete, amount counting |
Mo.m-entrance | list item stagger (40 ms) |
Mo.m-slow | skeleton shimmer |
- All amount text ≥ 4.5:1 (
onSurface on surface); secondary amounts
onSurfaceVariant ≥ 3:1 minimum per 02 §10.
- Status chips: text + icon + container colors must pass 4.5:1 in both modes
(verify
tertiaryContainer/errorContainer pairs).
- Dark mode: elevation substitutes for color; no hardcoded light-only styles.
- Reduced-motion & dark QA hooks listed in 14_QA_Checklist.md.
| Width | Behaviour |
|---|
| < 600 dp | single pane; payment sheet full-height; bottom nav |
| 600–839 dp | 2-column lists; sheet as right drawer (proposed) |
| 840–1199 dp | master-detail (dues list + invoice detail), nav rail |
| ≥ 1200 dp | rail + full-width report (proposed); hover states |
- No color in widget code — tokens only (02 §10).
- Amounts always mono + tabular + currency — no exceptions.
- Status never color-only (09 §9 → icon + text + color).
- Tenant branding overrides
primary only (02 §1); fees semantics fixed.
AppTheme.light()/dark() unchanged; module adds constants only
(AppSpacing, AppRadius, AppMotion).