Polish and Testing
12 min read
Audit Text Contrast Without Losing the Ledger Style
Open client/src/lib/constants.js and the components that use the text colors.
Keep the warm paper aesthetic, but distinguish between primary, secondary, and muted text. Supporting information such as dates, labels, and categories should remain readable instead of becoming decorative beige.
A simple hierarchy is enough:
/* Primary information */
color: var(--ink);
/* Supporting information */
color: var(--ink-secondary);
/* Hints and decorative labels */
color: var(--ink-muted);
In this project those roles are represented by readable ink constants rather than a large design system.
Test it
View the Ledger, Summary, and Categories pages at normal brightness. Check dates, labels, categories, and error text at a glance.
Checkpoint
The interface keeps its paper-ledger character while secondary information remains readable.