⌘ K
top-bar inset 12 — a 40px field inside a 64 bar1px #F1F1F1 top-bar border — §3.1 says there is none1 · search placeholder #A1A1A4 on #FFFFFF = 2.58:1 — the worst in the system7 · input border #E8E9EB on #FBFCFE = 1.18:1 — 1.4.11, the boundary of a form control

Overview

H1 · 28/32 · cap 20.0 · −0.02em · ink width 148.0 @ “Transactions”
3 × 400 + 2 × 24 = 1248 ✓ closes inside 1296 − 2×24
Operating balance
$1,284,930.45Δbaseline 5.5 measured · 6.16 predicted4 · card body copy 4.20:1
Last 30 days$24,180.60−$8,940.25
Oct 3Oct 10Oct 17Oct 24Oct 31
3 · chart axis 4.05:1
Occupancy
94.2%
1,182 of 1,255 units let · target 95.0%
Northgate Central95.5%
Marden Court93.3%
Halloway Business Park94.8%
card ROW gap 40 (measured 38.5/39.5) — margin, not gutter
Arrears ageing
$184,220.45
103 accounts · as at 31 Mar 2026
0–30 days$88,140.55
31–60 days$44,209.80
61–90 days$28,600.75
90+ days$23,269.35

Work orders

H2 · 18/24 · cap 13.5 · ink 110.0
table row 50px — OFF-GRID: a 40px control with 5px above and below. Ten consecutive dividers measured 456.5 → 906.5. Not corrected to 48.table header 40 ✓2 · column headers #7C7C7E on #FFFFFF = 4.17:1 — FAILS AA
Property · unitTradeAssignee
Nov 2Northgate Central · L1 lobby−$2,910.75Northgate CentralLiftsOverdueD. Whelan
Nov 2Marden Court · Block C · 9−$385.50Marden CourtPlumbingAssignedM. Osei
Nov 1Kelvin St Lofts · 2.11−$1,240.00Kelvin St LoftsFabricEscalatedR. Naidu
Oct 31Northgate Central · G-114−$164.20Northgate CentralLocksClosedD. Whelan
Oct 31Riverside Storage · Suite 4$0.00Riverside StorageHVACOpenUnassigned
Oct 30Riverside Storage · Roller door 118−$742.90Riverside StorageFabricClosedM. Osei
Oct 30Marden Court · Grounds−$1,980.00Marden CourtGroundsClosedGreenline
Oct 29Kelvin St Lofts · Ground entry−$615.40Kelvin St LoftsSecurityOverdueR. Naidu
Oct 29Northgate Central · L4-402−$328.65Northgate CentralPlumbingAssignedM. Osei
Oct 28Halloway BP · Car park B−$4,310.00Halloway BPGroundsAssignedLinemark QLD
Oct 28Eastvale Depot · Loading bay 2−$890.25Eastvale DepotFabricOpenUnassigned
Oct 27Northgate Central · L4 plant−$3,120.80Northgate CentralHVACEscalatedCooltech
Oct 27Halloway BP · Bay 7−$1,455.60Halloway BPElectricalOverdueR. Naidu
Oct 26Marden Court · Grounds−$2,240.00Marden CourtGroundsClosedGreenline
14 of 14 work orders · 3 breaching SLA

Portfolio

6 sites · 1255 units · Portfolio operations · FY26 · Q3
Collection performanceFY26 · Q3
94.2%
Portfolio occupancy
target 95.0%
1,182
Units let
73 vacant of 1,255
96.1%
Rent collected
$4.18M of $4.35M
$184,220
Arrears balance
up $12,480 on Feb
47
Open work orders
9 breaching SLA
3.4d
Avg time to close
target 4.0d
Top arrears accounts
Delgado, R.Marden Court · 14B · 74d$9,840.00
Astra Health Pty LtdKelvin St Lofts · 3.02 · 61d$8,120.00
Kessler FabricationHalloway BP · Bay 7 · 96d$7,450.00
Bright & CoNorthgate Central · L2-210 · 38d$6,980.00
Whitfield, J.Marden Court · 22A · 112d$5,310.00
Work orders by site14 raised
NC
RS
HB
MC
ED
KS
raisedbreaching SLA
SLA attainment · three lowest sites
Halloway BP50.0%
Marden Court66.7%
Northgate Central75.0%
Under the hood

This dashboard is a 1:1 recreation of Mercury's web app.

The reference is Mercury, the business banking product, captured at 1512×945 across 24 unique screens. Every colour, radius, line-height and gap below was sampled off those captures with PIL rather than eyeballed — the sidebar is 215px because it measures 215px, the table row is 50px because ten consecutive dividers land 50px apart, and the accent is #5365ED because that is the mode of 8,496 device pixels inside one button.

Northgate Group is fictional. Mercury is not, and none of its design work is claimed here. What is claimed is the measurement, the six inspectors, and the line between the two columns below.

Recreated from measurement

  • the sidebar shell, the top bar and its search field
  • the card grid, card anatomy, dividers and the footer band
  • the type ramp, including the split-cents currency treatment
  • the light palette and the dark palette, sampled independently
  • the transactions table — 40px header, 50px rows, inline controls
  • the area chart, its gradient, its axis and its gridlines
  • filter chips, buttons, inputs, selects, toggle, checkbox, badges
  • the focused field, the open dropdown, the loading skeleton, the empty state
  • the account menu and its Appearance submenu

Designed new, in Mercury's grammar

  • occupancy and arrears meters — Mercury ships no gauge, meter or percentage bar in 24 screens
  • a five-state work-order status system — Mercury has exactly two badge states and reserves colour for money direction
  • hover, active and error states — Mercury captures none of them. Focus is the one exception; it is captured and used verbatim.
  • the dashed comparison chart series — nothing in Mercury is dashed
  • the three-column dense grid — Mercury's Home is 2-up in 968px; Ledger runs 3-up full-bleed on Mercury's own Transactions container
  • the six overlays — entirely original, no reference exists
  • every layout below 900px — Mercury has no published mobile layout

Errors the build found in its own spec

  • the top-bar coordinates were measured on the wrong container — building it literally leaves the right-hand cluster 140px short
  • "no bottom border on the top bar" is false on every full-bleed page
  • the sidebar section label takes 52.5px above and 40 below, not a plain 40 slot
  • the 20px tier was missing from the ramp table although the spec measures it twice elsewhere
  • the Pending badge is called a failure in one section and marginal in another — marginal wins, it sits inside the JPEG error band
What runs, and what does not. Every overlay draws on top of the running dashboard, nothing navigates to a style guide. Contrast ratios are computed in your browser from the resolved token values, not typed in by hand. The chart is hand rolled SVG, no chart library is loaded. The dataset is fixed in content/data.ts — no clock, no random source, so the page is byte-identical on every load. 8 of the 14 work orders come straight out of that file; the status, cost and assignee columns are Ledger's, because Mercury has no five-state status system to model them against.

In production this would want real tenancy and maintenance data, the contrast audit wired into CI so a token that fails AA cannot merge, tokens generated from Figma variables instead of written by hand, and role-based access, because arrears data is not something every user should see.

Next.js 15 · React 19 · Tailwind v4 · Inter via next/font · tokens local to this app, because each demo recreates a different product · zero chart dependencies
Six inspectors · toggle any