Every token choice traces back to the user's context - factory managers and accountants who need to trust the numbers on screen the same way they trust a physical ledger. Inter handles interface text. JetBrains Mono is reserved for IDs, amounts, and financial data.
| Token | Value | Usage |
|---|---|---|
| --bg | #F3F4F6 | Page background |
| --surface | #FFFFFF | Cards and panels |
| --text | #111827 | Primary content |
| --text-2 | #6B7280 | Secondary content |
| --border | #E5E7EB | Soft separation |
Action styling is semantic rather than decorative. The system makes risk, reversibility, and primary flow obvious before a user reads the label.
Status color is mapped by domain state so a single primitive can work across invoices, stock, employees, and purchase orders without per-screen reinvention.
| Invoice | Customer | Amount | Status | Due Date |
|---|---|---|---|---|
| INV-2026-001 | Ahmad Al-Rashidi | PKR 84,200 | Posted | Mar 15, 2026 |
| INV-2026-002 | Noor Industries | PKR 212,750 | Pending | Mar 22, 2026 |
| INV-2026-003 | Lahore Textiles | PKR 47,500 | Draft | Apr 01, 2026 |
| INV-2026-004 | Karachi Exports | PKR 325,000 | Cancelled | - |
Numbers use mono rhythm, borders stay quiet, and rows breathe enough to support long accounting sessions without losing density.
Errors are phrased as guidance, not punishment. The copy explains what happened and what the user should do next.
Dense screens still need mechanical rhythm. The spacing system keeps modules aligned without relying on one-off judgment calls.