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.#C1503A
Guardrail blocks and at-risk loans. Rare on purpose.#55568F
The AI clone’s voice — and only ever that. Never a button.#6b7a8c
Explanatory copy. Most of the reassurance lives here.#C1503A measures 4.11:1 on its own pale background — under the 4.5:1 floor for body text.
Small text on a tint therefore uses #A8402C (5.36:1); the clone uses
#484975 (6.50:1) the same way. Full strength is for fills, borders and icons.
The tokens are named --stop-ink and --clone-ink so this cannot be got wrong by accident.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.
Soft fills, dark ink. A borrower mid-purchase should never be shouted at — the colour sets the mood, the ink does the contrast work.
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.
Every demo shows the happy path. Loans die on the other one. These three states are part of the kit — not error handling bolted on at the end — because the moment a borrower is stuck is the moment the product either keeps them or loses them.
“Nothing needed from you today. We’ll text the moment it moves.” Silence is the failure mode here; say it out loud.
“Re-send this one — the last upload was cut off at the bottom.” Name the fix, never the fault. This is a nudge, not an error.
The borrower never sees a dead end. A block always resolves to a named person with a time: “Christa will call you this afternoon.”
No state may end without a next action. A screen that says only what went wrong is unfinished.
Never colour alone. Every state carries an icon and words — 1 in 12 men cannot separate the terracotta from the green.
Stop is rare by design. If terracotta is common on a screen, the screen is wrong, not the palette.
Progress survives a stumble. Nothing already entered is lost when a step fails — saved state is shown, in words, on the failure screen itself.
“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.”
That last line is the whole charter in one bubble: it helps, it declines to quote, and it hands off to a named licensed human with a time.
Indigo #55568F, everywhere the clone speaks. Same colour on the docked bubble, the chat, the LO desk transcript and the guardrail log. A borrower should recognise who is speaking before reading a word.
Not teal. Teal is the borrower’s own action — the one thing they can tap. Dressing the AI in it implies the AI is acting for them.
Not royal. Royal means “this is a link.” The prototype flow map currently marks the clone royal; that is the collision this token fixes.
Disclosure rides the colour, not instead of it. Colour is recognition; the label “AI clone” is the disclosure. 71% of borrowers want to be told when AI is used — J.D. Power. Never one without the other.
| Never quote a rate | The clone answers process questions and reassures. Any number a borrower needs comes from a system-of-record screen, in mono type — never from the clone’s own sentence. The typeface is doing compliance work: mono means “a system produced this,” prose means “someone is talking.” |
|---|---|
| Name the LO, and name the AI | “I’m Christa’s AI assistant” — never “your virtual assistant,” and never just “Christa’s assistant.” The clone represents a real person the borrower can still reach, and says plainly that it is not her. |
| Specific nudges, not reminders | “You’re 60% done — pick up where you left off” beats “Don’t forget to finish your application.” A nudge that cannot be acted on immediately is just guilt. |
| Consent reads plainly | Every disclosure event states what it is and when it happened — no legal shorthand the borrower has to interpret. The one-line human summary sits above the legal text, never below it. |
| The realtor gets status, not detail | “On track for the 28th” — never a number, a condition, or anything financial. The partner surface shows locked or floating and the expiry date, and never the rate. |
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).