Floor one
Storey Home Lending does not exist. It is a demonstration built by TheBigBot.com to answer a narrow question: what would a mortgage website look like if it were designed by somebody who had read the rules rather than the competitors?
Floor two
Almost every mortgage website is built from the same three moves. A photograph of a couple receiving keys. A row of numbers — years in business, families served, an average star rating. And a form, placed early and often, whose real function is to convert a visitor into a phone call before they have understood anything.
None of that helps the person reading it. A borrower arrives with one of about four questions — what would the payment be, how much can I defensibly spend, does refinancing pay for itself, is renting actually cheaper — and every one of those has an arithmetical answer that a website could simply give them. The industry’s habit is to withhold it, on the theory that a question left open is a lead.
So the brief was: give the answer first, show the working beside it, and let the form be the last thing on the page rather than the first. Everything else in this demonstration follows from that one decision, including the parts that look like aesthetics.
The consequence is uncomfortable and worth stating plainly. A site built this way has far less to boast about, because most of what a lender’s home page boasts about is either unverifiable (a rating), outside its control (a closing time), or a number it would rather you did not divide by anything (a volume claim). Take those away and you are left with the arithmetic, the rules the arithmetic follows, and an honest account of what you do not know. That turned out to be plenty.
Floor three
An architect explaining a building does not photograph the front of it. They cut it down the middle and draw what is inside, floor by floor, with dimensions on every part.
That is the organising idea here, and it is not decoration. A mortgage is a stack of components that most borrowers only ever see summed into one number, exactly as a building is a stack of storeys that most people only ever see as a façade. Draw the section and the components become visible; and once they are visible you can point at the one that is doing the damage.
So each section of each page is a storey, separated by a drawn floor slab rather than a hairline border. A lift descends the left rail as you scroll: it is a progress meter and the page’s table of contents at once, which is the only reason it earns fixed screen space. Cards are open-fronted boxes you look into rather than flat rectangles. And the signature readout on the home page — the payment — is drawn as an extruded stack of floors whose thicknesses are its components, so principal and interest is literally the thickest slab and the mortgage insurance you were not told about is a visible layer rather than a footnote.
The test we applied to every new component was blunt: if it does not read as part of a measured building, it is wrong for this site, however nice it looks. A few things we liked failed that test and are not here.
Sections alternate ground, and the slab between them draws itself as it enters the viewport — a structural line, not a divider.
Every section is numbered like a level on a drawing, and the number is real navigation: the lift’s buttons are those same floors.
The short ticked line under each heading is a dimension line. It is the smallest piece of the language and it appears on every page.
The brand gradient is allowed on exactly one word of one heading per page. A gradient everywhere is a gradient nowhere.
Floor four
Sites like this usually end up with a small pile of floating buttons stacked in the bottom-right corner, each one added by a different person on a different week. There are four here and they are deliberately kept apart, because a control you cannot find is the same as a control that does not exist.
Floor five
This demonstration was rebuilt on top of a shared template whose calculator library had three defects worth naming. A calculator that quietly returns the wrong number is worse than no calculator, because it is trusted.
The inherited code cancelled FHA annual MIP at 80% loan-to-value. That is the conventional PMI rule from the Homeowners Protection Act, and it does not apply to FHA at all: above 90% LTV at origination the annual MIP runs for the life of the loan, and below it for eleven years. On an ordinary 3.5%-down purchase the error understated the borrower’s own insurance cost by roughly seventeen thousand dollars — and it understated it, which is the direction that flatters the lender.
See both answers side by side →The renter’s investable surplus was clamped with Math.max(0, surplus). In every month where owning cost less than renting, the renter kept the difference without ever spending it and the buyer was credited with nothing — free money on one side of a comparison whose entire purpose is symmetry. Both households now spend the same budget, and whichever is cheaper that month invests the difference.
See the corrected comparison →Affordability was answered by binary search: build a full schedule, check the ratios, adjust, repeat — about twenty-one thousand rows of work on every keypress, for a question that has an algebraic solution. The budget equation is now rearranged and solved once for each of the two mortgage-insurance branches and the self-consistent branch kept. The answer is exact rather than approached, and a test asserts five hundred evaluations finish in under a tenth of a second.
See the rewritten one →All three now live in src/lib/calc.ts as pure functions with a test suite beside them, and every rule they implement is printed on the page that uses it — the Homeowners Protection Act for conventional PMI, HUD Mortgagee Letters 2023-05 and 2013-04 for FHA, and 38 U.S.C. 3729 for the VA funding fee. Citing the rule is not pedantry; it is the only way a reader can check whether the number is right.
Floor six
A demonstration is allowed to invent a company. It is not allowed to invent things that can be mistaken for records — so the fiction is kept to the parts that cannot mislead, and the parts that could are simply left out.
.example, a TLD reserved by the IETF that can never belong to a real organisation.Floor seven
The calculators are the part of this demonstration that does actual work, so start there. The team page shows how staff can be presented without photographing a stranger, and the licensing page is the one a real lender would have to get right.
Colour scheme
Each scheme is drawn twice — once for the light theme and once for the dark — and contrast-checked in both before it is offered here.
Built against WCAG 2.2 AA as a target. It has not been independently audited, so no conformance is claimed. If something here blocks you, that is a bug.