Designing for the 2am call: build notes from a restoration site

The contract is written into the stylesheet

Before any colour is chosen, a Droom build answers five questions: who the page must convince, the one action, the bar it has to clear, the stack, and a list of things that are banned. On Ridgeline those answers are not filed away in a document; they are the first comment in the page’s own stylesheet, where nobody can quietly forget them:

“the reader is a homeowner at 2am with water coming through a ceiling. One action: call. The design is a night dispatch board — the feeling that somewhere across town, a crew room just lit up for you.”

Every decision in the rest of these notes is downstream of that paragraph. When a design question came up (should this be a form, should this photo be bigger, should the hours go here), the answer was whatever got the 2am reader to the phone faster. That is the whole method. The same discipline applied to money instead of pixels is what the fixed-fee ledger notes describe.

The hero is a dispatch board, not a photograph

The usual restoration homepage opens with a stock photo of a flooded living room. Ridgeline opens with something closer to what the reader actually wants to believe: that a crew room is awake right now. A sticky strip across the top of the page carries a pulsing dot, the words CREWS ON SHIFT, the business name and the phone number, and it stays there for the entire scroll.

Underneath it sits a small panel styled like a night dispatch log: three jobs with times, neighbourhoods and statuses (ON SITE, EN ROUTE, ON CALL), and a clock in the corner that genuinely ticks, driven by about four lines of JavaScript. It is proof of life rather than decoration.

And it says so. The board carries its own caption in the build, naming itself an illustrative board on a concept site. That line is not an afterthought, it is the reason the treatment was allowed to exist. A dispatch board implying real jobs, on a real company’s site, with invented addresses on it, would be a lie dressed as a feature. Labelled as illustrative, it is a diagram of how the business works. Our build gates fail any page that invents founding years, certifications, review counts or awards, and the same rule decided this panel.

There are, incidentally, no photographs on the page at all, not one image file. The atmosphere is a thin rain animation drawn on a canvas, which costs a few kilobytes instead of a few megabytes and cannot be a stock photo of somebody else’s flood.

Colours picked for a dark room and a bright screen

The palette is near-black (#0b0f14), a cool pale grey for body text, and one amber (#ffb020). Dark, because a phone screen at full brightness in a dark basement at 2am is a torch pointed at the face; and because it lets one warm colour do all the work.

Running those hex values through the standard WCAG contrast formula: body text sits at about 12.3:1 against the background, the amber at about 10.5:1, and the white headlines at about 19.2:1. The accessible minimum for normal text is 4.5:1. That headroom is deliberate: the reader may be upset, under-lit, and reading a phone with wet hands, and none of those conditions are in anybody’s test suite.

The amber has exactly one job: it marks the action and the status of a crew. It is the live dot, the phone number, the button, the underline beneath the number at the bottom of the page. Nothing decorative is amber, so amber always means this is the thing to touch. One dimmer grey is used for secondary lines, and that one measures about 4.8:1, still over the bar, on purpose, rather than the pale-grey-on-grey that small print usually gets.

The call button, and the form that is not there

Here is the decision the whole page is built around: the phone number appears four times on one page, and every one of them is a tel: link. It is in the sticky strip, twice in the hero (once as the number itself, once as a button whose label promises that a human answers), and once at the end, at the largest type size on the page, under a heading that says “If it’s happening, stop reading”.

The button has a minimum height of 50 pixels, which is a thumb target rather than a mouse target. The number is set in a monospace face so the digits stay evenly spaced and readable at a glance, the way a number written on the side of a truck is.

What is missing is the point. There is no contact form anywhere on the page: no name field, no email field, no “we’ll get back to you within one business day”. A form is a promise to reply later, and later is the wrong answer when a ceiling is coming down. The page also carries no email address at all, which keeps the one action genuinely singular.

The section between the hero and the phone number is a minute-by-minute timeline of the first hour after the call, from a technician answering to the crew rolling, extraction beginning and the plan arriving, because the fear at 2am is not price, it is not knowing whether anything is actually about to happen.

What was deliberately left out

A list of what is not on the page is a more honest description of a design than a list of what is:

• No navigation menu. There is no header nav, no hamburger, no dropdown. Menus are for browsing, and nobody browses a restoration company. The page is one scroll with a phone number at both ends.
• No testimonials or review counts. None appear, because the business is fictional and inventing them would break the rule that matters most to us. On a real client’s build they only appear if the client can point at where they came from.
• No photo gallery, no team page, no history. All of it belongs on a page someone visits on a Tuesday afternoon, not this one.
• No chat widget, no pop-up, no cookie banner. Every one of them is a thing between a frightened person and a phone number.
• No motion for anyone who has asked for less of it. The stylesheet honours the reduced-motion setting: the rain stops, the pulse stops, transitions collapse to nothing. The rain also pauses whenever it scrolls out of view, so it is not burning a phone battery in the background.

Two things were kept that a strict minimalist would have cut: the insurance panel, because “who pays for this” is the second thought after “make it stop”, and the four service cards, because a homeowner with a sewer backup needs to see that exact phrase before believing the page is about them.

Why the company is fictional, and why that is stated on the page

Ridgeline Restoration does not exist. There is no such company, the phone number is a reserved fictional one, the neighbourhoods on the dispatch board are real places and the jobs on it are not. A fixed badge in the bottom corner of the build says so in plain words, calling the page a concept build by Droom and the company not real. The page is also set to noindex so it never turns up in a search for a restoration firm.

The reason to build one at all is that a portfolio of finished client sites takes years to accumulate, and design decisions can be shown without them. Everything above is checkable: open the build, read the page, view the source. The rest of the shelf is on the concept builds page.

If you run a restoration company and this reads like your Tuesday, the reasoning behind an emergency-first build is set out on the restoration websites page. And if you already have a site but nobody who can change it, start with the rescue guide for when a web designer disappears instead: ownership first, design second.