Show the work.
DATUM is the prototype. This is the breakdown. Eight design decisions, in the order they came up while building the page, each one paired with the artifact or the demo that explains the call.
Name it for what it does.
A datum is the single reference point on a jobsite. Every measurement and verification flows from it. The contract drawings and specifications are the datum of record. DATUM keeps the field true to it.
I started with two other names. Both got cut. The first sounded like a SaaS analytics tool. The second sounded like a robotics company. Neither carried the field-craft register the proposal needed.
DATUM is a working word. Surveyors set a datum. Stonemasons mark to a datum. Architects dimension from a datum. The name carries the user's vocabulary on the way in, before the page makes its argument.
Every workflow on the prototype threads through the same noun. RFIs resolve ambiguity in the datum, markups update it, punch list items are deviations from it, attestation confirms conformance to it. One word, every demo.
Two layers, seven stages, eight demos.
The information architecture maps the construction administration loop the user already runs. The product is the loop made continuous and evidence-linked. Nothing in the IA is invented; everything is named for the artifact a CA already knows.
Each pillar lands on exactly one named constraint. The mapping is one-to-one. That is why construction administration is the right wedge: it is where all four pillars meet the field in the same hand on the same day.
Two layers names the bet. A copilot layer that helps the field do the work, and an attestation layer that turns the work into a defensible record. Each layer is one sentence in the hero.
Seven stages names the reasoning. Observe, Reference, Question, Route, Verify, Attest, Record. The stages are the bones of how an actually-competent administrator thinks. The product just refuses to drop any of them.
Eight demos names the surface. One per capability. Each one is the same loop, viewed from one stage. The eighth demo, the rollout stepper, is honest about the deployment risk so the proposal does not read as a victory lap.
Status carries a shape and a label. Never color alone.
A punch list has to read on a phone, in glare, in grayscale, by someone with color vision deficiency, and by a screen reader. Five states, five shapes, five labels. The color is reinforcing, not load-bearing.
Same five states, each with a distinct shape and a label. The color is reinforcing, not load-bearing. Works for color vision deficiency, screen readers, and grayscale prints of the punch list.
The five states are Open, Ready, Verified, Flag, and Attested. The shape vocabulary is diamond, circle, check, triangle, and square. The shape carries the meaning even if the color drops out.
This is also a deference move toward existing CA conventions. The redline triangle is the universal flag in field markup. The verified check is the universal closeout. Using those shapes signals the product is built by someone who has read a punch list.
Markup red as a real historical artifact.
Revision cloud, dated stamp, dimension callout. Three motifs that have lived on construction documents for fifty years, in the same red ink, drawn by the same hand. The product borrows them because the user already trusts them.
Revision cloud, dated stamp, dimension callout. Three motifs an architect has used for fifty years. The product borrows them because the user already trusts them. The markup red (#A6442E) is the real ink color of red pens used on construction documents.
The hex code is #A6442E. Not vermillion. Not crimson. Not a digital red. It is the brick-red ink color of the red pens an architect actually uses on a printed sheet, and the same red shows up on dated rubber stamps in real markup sessions.
Markup red is the only color on the DATUM page that lives outside the Field Intelligence palette. The exception is documented on the prototype itself, on the markup demo. Everywhere else the brand orange does the accent work. Two reds in the same room would dilute both, so the rule is strict: markup red only on the revision cloud, the dated stamp, and the dimension callout.
Adopt the parent site's typography. DATUM lives inside Field Intelligence.
An earlier draft of DATUM ran an editorial serif on the headline. It looked sharp on its own, but it broke the bigger argument: DATUM is the next module of Field Intelligence, not a separate brand. So the type pairing inverted.
The earlier draft. An editorial serif on its own says craft heritage in one beat, but it forces a second brand identity on top of the parent site. Right answer for a standalone product page, wrong answer when the page is hosted inside the dossier.
DATUM now uses the same Helvetica Neue / -apple-system stack as the rest of the site. One family, four weights. No web fonts loaded. The display headline runs at clamp(56px, 9vw, 132px) with weight 700 and -0.04em tracking, identical to navigate.davidtphung.com.
The bigger rule is here: a candidate hosting their own product proposal does not get to wear a second skin. Brand cohesion is the proposal. The product idea is allowed to differ from the dossier; the surface should not.
The toggle below shows the earlier draft against the shipped pairing. The editorial serif still looks good. The system sans is correct for this proposal.
Attestation grades. Self, witnessed, independent.
A conformity assessment uses graded trust. Most field tasks self-attest. Material items get witnessed. Safety-critical items get an independent inspector. The same pattern, ported to construction administration and mapped to AIA forms.
Graded trust is the standard conformity-assessment pattern, borrowed wholesale. Three levels, three audit trails, three different signers. The product would let an owner set the level per item type and per project phase.
The mapping is precise. Self-attested is the daily checklist. Witnessed is the architect signing a G702 / G703 Application for Payment. Independent is the inspector issuing the G704 Certificate of Substantial Completion. The forms already exist. The product makes each one evidence-linked.
This is the moat. Capture and markup prove the work is right. Attestation makes it defensible. An owner who buys thousands of units a month, exactly the position Eric Wu was in at Opendoor, finally gets a verifiable conformance record across thousands of subcontractors.
One staggered entrance, then restraint.
The motion budget is small. The hero stages reveal on first load. Drawn-on revision clouds animate when a markup is added. The attestation seal has a short stamp animation. Everything else is still.
The reason is the field. A copilot that bounces every chip and slides every panel is exhausting to use eight hours a day in sunlight. The reference site for restraint here is grok.davidtphung.com: confident, still, content-led, with motion used only when something has actually happened.
All motion stops under prefers-reduced-motion. The typed-out RFI answer becomes an instant write. The drawn-on cloud becomes an instant draw. The stepper still works, just without the smooth fill. Accessibility is not a layer applied at the end. It is the same code path with one media query.
Reference studies, with credit.
Good design borrows from designers who have already solved adjacent problems. The DATUM page borrows from three references explicitly, and credits each one. Borrowing without credit is the worst version of either move.
Agentation ↗
What I borrowed. Narrow editorial column, prose paired with interactive demos inside device frames, hand-written margin notes, footnotes, generous whitespace.
Valence ↗
What I borrowed. Status-chip vocabulary (PASS / FLAG / WARN), portfolio-scale stat counters, command-center posture, hairline borders.
Grok breakdown ↗
What I borrowed. Decision-led structure, restraint as a brand position, severity in motion budget, principles before product.
The breakdown is not the product. It is how I would defend the product in a room. Every decision is replaceable. None of them is accidental.
If a decision here is wrong, the right next move is a v2, not a fight. The product is the loop, not the page.