Develop · Build
How it came together.
- 01
Confidence tiers on every entity
Every claim carries a source tier, not just a value: T1 for government registry records, T2 for developer and official sources, T3 for computed and market estimates, T4 for broker and editorial notes. The surface shows the tier next to the number, so an analyst can tell at a glance what came from the registry and what was inferred.
- 02
A published, auditable accuracy snapshot
The valuation model publishes its own running backtest: mean absolute percentage error per community, which is simply how far a predicted price lands from the real sale price on average, plus calibration tracked predicted-vs-realised, 24.8% overall across 121 held-out sales. Per community it runs from 3.2% at the sharpest to 79% at the softest, and the soft end is on the dashboard too, a model that only publishes its good communities is not auditable.
- 03
Geospatial risk modelled on a hex grid
Flood risk, vegetation index, urban classification and amenity density are modelled on an H3 hex grid at resolution 9 - roughly 39,000 cells over Dubai - rather than being pinned to irregular community boundaries. Ten raster sources (SRTM elevation, WorldPop, Sentinel-2 indices, night-lights and more) are aggregated into those cells by zonal statistics, and they feed the valuation's spatial price adjustment and its environmental risk component. Hex cells are the largest entity type in the platform.
- 04
Six-month forecasts conditioned on local supply
Forecasts are community-calibrated rather than free-floating: each is anchored to that community's own trailing twelve-month DLD price trend instead of a market-wide rate, with the confidence interval widening as the community gets more volatile - so a thin community reads as uncertain rather than confidently wrong.
The broker-prospecting tool, a PHP monolith over ~840K ownership records, had never had a real front-end pass. Not a rebuild: an audit, run through to merged production releases. - 05
AVM Tool that reads like an analyst memo
Built the React + MapLibre AVM surface to read like the memo an analyst would have produced by hand: narrative paragraphs, a ranked opportunity list, DLD-comparable transactions, map, supporting tables. The platform drafts the memo; the analyst edits and signs.
Frontend Engineering - 06
An audit that shipped, not just diagnosed (Data Centre)
A design audit that stops at a findings deck is a report nobody implements. This one ran through to merged releases against the live app, every change theme-aware and reduced-motion-safe; the full inventory is in the result below.
Web Design - 07
Bands that were confidently wrong, recalibrated
A backtest that reports a headline number and stops is only half an instrument. Reading coverage against the published intervals showed the model's confidence bands were too narrow - the true sale landed outside the predicted range far more often than the interval implied. Recalibrating brought coverage to 81.8%, and a separate pass fixed a systematic underestimation bias along with a 1.2-second estimate latency. The model now says it does not know when it does not know.
Data Pipelines - 08
The audit that found 108 dead connectors
Extracting the service into its own repository changed the depth of the data directory, and almost every connector had been silently returning "not found" - no error, no alert, just quietly nothing. A connector-by-connector audit caught it, and the fix was a single shared path resolver plus end-to-end verification of every connector. Silent failure is the expensive kind.
Data Pipelines
Develop · Forks
Decisions on the record.
The few calls worth defending. Each one is a fork; the other branch would have been a different project.
Decision · 01
Flat maps here, the globe stays in Vantage
The map answers flat questions here: where the comparables are, which communities the claims cluster in. The standalone intelligence dashboard is a single static HTML file with MapLibre pulled from a CDN - one script tag, no build step; the React valuation surface bundles MapLibre through the shared UI package, where the pin-picker needs typed access to the map instance. Either way, the georeferenced 3D stays in Barnes Vantage, the product that actually needs a globe.
Decision · 02
A confidence-tiered entity ontology
Ingested sources disagree on the same entity all the time. Averaging that disagreement into one clean number would be the easy fix. Every claim is tiered instead, T1 government registry down to T4 broker and editorial, which trades a tidier interface for a chain a valuer can audit when a figure looks wrong.
Decision · 03
Publishing the accuracy snapshot in the open
The backtest accuracy sits in the tool's own UI rather than a hidden internal report, so the team sees the same number they'd show anyone else. Hiding accuracy costs more credibility than an imperfect number costs face.
Decision · 04
Polishing the PHP monolith, not rewriting it (Data Centre)
The tool already held ~840,000 live property-ownership records and a team depending on it daily; a rewrite would have added migration risk to what was a UI problem, not a data or logic one. Incremental releases against the existing PHP app, audit to implementation, fixed the real findings without touching what already worked.
Develop · System
The design system.
Tokens and treatments as they exist in the repo - values verbatim, nothing aspirational.
This is the valuation platform's system; the broker-prospecting surface is a separate, light-themed codebase. Called Palladium in the repo, and its own header names the register it is going for: confidence. Dense information, clear hierarchy, no ambiguity. Warm near-black rather than neutral grey, gold accent, and a set of semantic colours that exist to carry meaning a valuer has to trust rather than to decorate.
Colour
--bg-main / --bg-elevated / --bg-card / --bg-charcoal#0a0a0a / #111111 / #161616 / #1a1a1a- Four near-black planes rather than two, because a dense table needs more than one step of separation before rows and panels start to blur together.
--accent#c8a96e- Barnes gold, with #b89a5e hover and #d4ba85 light. This product kept it; the Dev Portal moved off it in July, which is why the two sections on this site disagree.
--text-main / --text-subtle / --text-muted#f5f1eb / #c8c0b4 / #8a8279- Warm off-whites, not greys. Against the warm-black planes a neutral grey reads slightly blue and cheapens the whole surface.
--match-high / -medium / -low#3ce08f / #ffb93b / #e0523c- Valuation match confidence. These are the colours the AVM's own accuracy is reported in, so they are load-bearing rather than decorative.
--tier-t1 to --tier-t4#3ce08f / #60a5fa / #ffb93b / #a78bfa- One colour per confidence tier in the entity ontology, so a claim's provenance is legible on the row itself without opening it.
--bg-glass-borderrgba(200, 180, 150, 0.08)- A warm-tinted hairline rather than white at low opacity, so panel edges belong to the same palette as everything they contain.
Type
- UI and data
AaBb Handgloves 0123
Hanken Grotesk, then system-uiThe canonical Barnes sans, shared with the Dev Portal, which is what makes two very differently-coloured internal tools still read as one family.
- Display
AaBb Handgloves 0123
Cormorant GaramondReserved for headings. The serif is the only thing in the interface that is allowed to feel editorial.
- Figures
AaBb Handgloves 0123
JetBrains Mono, then Fira CodePrices, yields, entity counts and claim totals, where tabular figures keep columns aligned as values change.
Implementation
CSS custom properties in app/globals.css under Tailwind. The specificity trap across these apps is @barnes/shared-ui: its palladium.css ships a LIGHT editorial palette at plain :root, so importing any shared-ui component pulls that stylesheet into the route chunk, where equal specificity lets it win and turns a dark table white-on-black. The fix, implemented and documented in the splat-viewer app, is to declare the dark tokens at html:root (0,1,1 against 0,1,0) so the override is deterministic instead of import-order-dependent.
Elements
- Tier badges
Each confidence tier renders as a tinted pill: the tier colour at 10% as fill, 20% as border, full strength as text, uppercase and letter-spaced.
Four tiers had to be distinguishable at a glance down a long table without four saturated blocks fighting the data for attention. Tinting one hue three ways keeps the badge quiet until you look for it.
- Frosted panels over a warm base
Panels sit on rgba(10,10,10,0.92) with the warm hairline border, rather than an opaque card on a flat background.
The map and the table are often layered; a solid panel would cut the map into pieces instead of floating above it.
Process · 01
Giving the confidence tiers their own colours
The architecture's central decision was refusing to average nine disagreeing sources into one clean number, and tiering the claims instead. That decision is invisible unless the interface carries it, so the tiers got dedicated tokens and a badge treatment. A valuer scanning a table can see that a figure came from a registry record rather than a derived calculation without opening anything. The design system is where an ontology stops being a schema and becomes something a person can act on.
Process · 02
Warm black, because the accent demanded it
Gold on neutral grey goes muddy, and gold on true black goes gaudy. The palette settles on warm near-blacks and warm off-whites throughout, which is a decision made once at the token level and then never thought about again. It is also why the text greys are warm: mixing a neutral text ramp into a warm surface set is the fastest way to make an expensive-looking interface look cheap.