# Interface Design System

## Subject, audience, and job

Pay Register is a payroll-calculation instrument for employees, payroll reviewers, and contributors who need to inspect a semi-monthly estimate rather than merely receive a final number.

The interface has one primary job: move a user from monthly rate to a reviewable first-half, second-half, and monthly register without hiding the calculation trail.

## Visual direction

The design is based on a payroll register rather than a generic software dashboard. Its visual references are ruled payroll sheets, payslip date ranges, reconciliation tables, and monospaced financial columns.

The characteristic element is the period stamp:

- `01—15` for the first half.
- `16—EOM` for the second half.
- `MONTH` for reconciliation.

These markers encode the actual payroll sequence instead of acting as decorative numbering.

## Color tokens

| Token | Hex | Use |
|---|---|---|
| Ledger ink | `#102A43` | Primary text and totals |
| Register blue | `#2E5D75` | Labels, rules, and secondary emphasis |
| Deep register blue | `#173B4F` | Primary actions and final totals |
| Cool paper | `#EEF3F5` | Application ground |
| Ruled line | `#CFDBE0` | Tables, fields, and structural dividers |
| Reconciliation rust | `#B84F2E` | Focus, cautions, and period dates |

The interface uses no decorative gradients. Color communicates document structure, action, state, or reconciliation.

## Typography

The project uses local system fonts only:

- Display and headings: `Avenir Next Condensed`, `Arial Narrow`, or `Aptos Narrow`.
- Body: `Avenir Next`, `Aptos`, or `Helvetica Neue`.
- Amounts, formulas, dates, and codes: `SFMono-Regular`, `Cascadia Mono`, or `Consolas`.

Condensed headings conserve horizontal space and evoke administrative registers. Monospaced financial values align digits and make calculations easier to scan.

## Layout rules

- Structural borders replace floating rounded cards.
- Amounts remain right-aligned and use tabular numerals.
- Formula details sit directly below their corresponding labels.
- First-half and second-half forms share the same layout so learned behavior carries forward.
- The monthly result receives the strongest visual emphasis, only after both halves are complete.
- The interface remains single-column on narrow screens and does not produce horizontal overflow.

## Interaction rules

- Buttons state the resulting action: “Calculate first half,” “Calculate second half,” and “Clear form.”
- Status messages describe what changed and what the user should do next.
- Focus is marked with the reconciliation-rust accent and a visible inset rule.
- Reduced-motion preferences disable smooth scrolling and transition duration.
- Printing removes controls while retaining calculation registers.

## Restraint

The period stamp is the interface’s main expressive device. Other elements stay quiet: small radii, light shadows, flat color, minimal motion, and no decorative illustration. This keeps attention on the payroll data and calculation trail.