The build kit
UI kit & design standard
The rules every screen is accountable to. A design that violates one of these needs a written reason —
and most of them came directly from the people who do the job eight hours a day.
⭐ The rule that outranks the others, in Sharon's words: the fee itemization
"should look like an actual fee worksheet — dense, spreadsheet-like. NOT an app on a phone."
And: keep the side tabs while in a file. Every layout decision below follows from taking that
seriously rather than politely ignoring it.
1 · Desktop-first, density-first
The borrower-facing POS is thumb-first because 90% of borrowers open it on a phone.
The LOS is the opposite, and the document says so plainly rather than splitting the difference.
An operator sits at a desk, often at two monitors, all day. They are not scrolling — they are scanning,
comparing and typing. For them whitespace is not calm, it is distance: every inch of padding is a row
of the fee sheet they now have to scroll to reach.
Do
• Tabular data renders as tables — real columns, alignment on the decimal, rows that scan
• Target ~40–60 visible rows on a 1080p screen for grids
• Hyperlinked section navigation, always visible — the current system does this and it is one of
the few things it does well
• Side tabs stay while in a file — the left rail is the file's anatomy
Don't
• Stacked "cards" for tabular data — a phone pattern that wastes 60% of a monitor
• Collapse the left rail into a hamburger on desktop — minimalism as a downgrade
• Make the closer scroll to see §1100 while entering §800
• Modal-per-fee for the common case
2 · Colour — and what it may never carry alone
Navy#14324f
chrome, headers
Teal#1FABAA
active, selected
Royal#2F5FD0
links, pilot tier
Green#1f9d55
pass, complete
Amber#e4a24c
attention, aging
Red#c0453f
blocked, overdue
Rail#f4f7fa
left nav, section rows
Input#fffdf2
editable cell
Status is never colour alone. An aging highlight carries a shape or a label too.
This is an accessibility requirement and a practical one — these screens get printed, screenshotted into
emails, and read on bad monitors. Editable cells are visually distinct from read-only ones — but
the current system's "only the red-outlined fields are editable" is the anti-pattern: the operator edits on
their own screen, gated by role, not by a colour-coded lockout.
3 · The three-pane file layout
| Pane | Holds | Rule |
|---|
| Left rail (~158px) | The file's anatomy — every form, grouped, with counts | Persistent. Never collapses on desktop |
| Centre (fluid) | The work surface — one job at a time, dense | Tabs across the top for sections of that job. Government tabs appear only when the loan type calls for them |
| Right rail (~210px) | Tasks (this file) — plainly labelled | Same tasks as the command centre, scoped to the open loan. The placement operators already like |
Two screens per role, always: a landing screen (their whole
pipeline + all their tasks, searchable and filterable by any field, with saved views) and an in-file
screen (the forms + that file's tasks). Click a file on the landing screen → drop into the in-file screen.
4 · Dates, numbers and language
Do
• Auto-date on event — received, sent, viewed, signed, funded, purchased, registered
• Tabular numerals, aligned on the decimal, in a monospace face
• Industry words: initial / revised / final / post-closing CD
• Errors that name the rule, the number and the cure
Don't
• Let a human type a date. A typed date cannot support a compliance argument
• "Preliminary CD" — not a thing
• "Tenants" — not a mortgage word unless someone rents
• "Validation failed" with no rule, figure or next step
A good error, in full: "Points and fees exceed the 5% QM
limit — $14,612 against a $14,300 limit. Reduce by $312 or re-price. A cure task has been assigned to the
closer." Rule, figure, action, owner.
5 · The speed standard
Sharon has given the build a stopwatch, and it is an acceptance criterion, not a
sentiment: a title-fee update takes 20–25 minutes today and must take 5–10. What that requires:
type-to-fill payees (a title company fills its whole block, with no vendor record created for a one-off
payee) · select-all with per-line override · templates that pre-load so the sheet never starts blank ·
keyboard-first tab order that follows the form rather than the DOM · no modal for the common case.
Every marquee screen carries a time budget. A build that passes the feature test and fails the stopwatch
has not passed.
6 · The mobile companion
Not "fully responsive." A desktop platform with a deliberate mobile companion — and
naming which screens are which is the design decision. Where a screen is desktop-only, the phone shows a
useful read-only view plus the one action that makes sense, and says why. It never shows a broken
miniature of a desktop form. See the mobile screen for both lists.
7 · Accessibility and the eight-hour test
WCAG 2.2 AA as the floor, plus what dense operational software specifically needs: real focus
states · no colour-only status · text that survives 125% Windows scaling without reflowing a grid into
uselessness · full keyboard operability of every grid.
The eight-hour test is the honest one: would a person be tired by this screen at 4pm?
Contrast that is too high is as fatiguing as contrast that is too low.
8 · Six principles, in one list
| # | Principle | Why |
|---|
| 1 | One data model, entered once, mapped everywhere | Every re-key is a defect |
| 2 | Role is a workspace, not a permission flag | The tell that RBAC is cosmetic is a super-admin seeing everyone else's screen |
| 3 | Task-driven, not screen-driven | Nobody opens a random file. The task list is the day |
| 4 | Compliance is a gate, not a report | A report nobody reads is not a control |
| 5 | Conditions are rules, not typing | The right conditions, consistently, every time |
| 6 | Every field has a home | No dumping-ground page. Orphan fields are how a system becomes unlearnable |
Keep the good small things. The teardown of the current
system found one screen worth praising and several habits worth retaining: hyperlinked section navigation on
every screen · the copy-loan-number button · vendor orders that auto-fire on milestone.
A teardown that finds nothing good is a grudge; this one is a review. Retain what already works.