Colors, type, components and the rules behind them. Everything on this page is live HTML and CSS — inspect it, copy it, or hand it to whoever sets up the component library. It is intentionally small: fewer choices, fewer inconsistencies.
#1FABAA
Primary action. One per screen — if everything is teal, nothing is.#14324f
Headers, headings, structure. The steady voice.#2F5FD0
Links and secondary emphasis. Never a primary button.#C9A227
Celebration only — pre-qual letter, clear to close.#1f9d55
Accepted, complete, verified.#e4a24c
Needs redoing. Not an error — a nudge.#c0453f
Guardrail blocks and at-risk loans. Rare on purpose.#6b7a8c
Explanatory copy. Most of the reassurance lives here.System font stack. -apple-system, "Segoe UI", Roboto — it loads instantly and looks native on the device the borrower actually owns.
16px minimum on inputs. Anything smaller makes iOS zoom the page when the field is focused. This is the single most common mobile form bug.
No all-caps body copy and no justified text. Both hurt readability, and one of them looks like a disclosure trying to hide something.
Plain language above legal language. Every disclosure gets a one-line human summary sitting on top of it.
Full width on phones, always. One teal primary per screen; gold is reserved for a win.
Tap targets ≥44px. Ranges beat free text — a borrower who has to be precise stops.
Native keyboards by input type. Mask sensitive values on screen; never log them.
Section 3 of 8 · saved just now
Always show both the bar and the words. “Saved” is doing as much work as the bar.
Teal explains a benefit. Sand carries a legal or timing fact.
Category: rate quote. Converted to escalation. Logged.
Shown in the prototype so the team sees it. In production the borrower sees the warm handoff, not the machine reason.
“Please provide documentation evidencing your income.”
“Your last 2 paystubs — so the underwriter can confirm your income.”
“Your submission has been received and is pending review.”
“Nothing needed from you today. We’ll text the moment it moves.”
“Error: document rejected.”
“Re-send this one — the last upload was cut off at the bottom.”
Say why. Every request for something private carries its reason in the same breath.
Name the next thing. A borrower should never wonder what happens now or who has the ball.
No blame in errors. The document was cut off; the borrower did not fail.
A person’s name, not a department. “Christa will call you” beats “a representative will be in touch.”
A mid-range Android on cellular. That is the definition-of-done device (11.3), not a desktop browser.
Every status carries an icon or a word beside the color. Red and green are the two most common forms of colorblindness.
Real labels, visible focus rings, logical tab order. WCAG 2.2 AA verified independently before launch (M16).