Detail pages — the inventory

every PM-facing detail surface, captured the same day, before standardization

25 Aug 2026 · branch feat/detail-page-standardization · captured against propflow-stage · at 84e3dc714f+local

Data note. Every name and balance below comes from propflow-stage, which is anonymized by construction (ADR-0097/0110 — phones in the impossible +1000 NPA, emails @example.test). The identical capture against prod would carry real tenants' names and balances and is not safe to attach anywhere, which is why the generator refuses to run against one.

1 · Prospect — the DetailPage reference implementation

The canonical host: BackLink → PageHeader + one stage pill → 2/3 main + 1/3 rail. The rail's activity log rides the brand run (the owner's anchor idiom). One focal card per funnel step, never an empty state.

Asserted in the captured DOM — Back to Prospects · Activity Log

Prospect — the DetailPage reference implementation

2 · Renewal — the big banner

DetailPage in sidebar-less mode, but the header zone stacks up to four attention layers before content: amber banner, animated gradient hero (radial purple/blue glows, pulsing status pill, AuroraText headline, ClaraBadge), then two accent stat cards. This is the page the owner named for its banner.

Asserted in the captured DOM — Back to Renewals

Renewal — the big banner

3 · Work order — the liked structure, and its noise center

Clean bones (host + one kebab + shared Stepper rail), but the main details Card stacks up to seven border-t sections, and the turnover strip above the header is hardcoded orange hex. The stepper is semantic emerald/indigo — not the brand run.

Asserted in the captured DOM — Back to Work Orders

Work order — the liked structure, and its noise center

4 · Turnover — the second gradient hero

Disciplined card order and one CTA per stage — but it opens on TurnoverHero, a rounded-2xl violet/cyan gradient-glow banner (hardcoded rgba), the same species as the renewal hero.

Asserted in the captured DOM — Back to Unit Turnovers

Turnover — the second gradient hero

5 · Tenant — one fact, one home

Adopted host, single Summary card leading, collections lifecycle rail (pill-node idiom — a third progress vocabulary). One of the cleaner pages.

Asserted in the captured DOM — Back to Tenants · Summary

Tenant — one fact, one home

6 · Property — the hand-rolled hub

NOT on the host: hand-rolled PageBody + BackLink + accent upload banner + bespoke header, then six metric cards, a five-accordion knowledge base, policy cards and a 7-column unit grid. The densest surface in the set, and the reason the boilerplate needs hub affordances (tabs, full-width sections).

Asserted in the captured DOM — Back to Properties

Property — the hand-rolled hub

7 · Unit — small and already right

Fully adopted, 207 lines: semantic status banner (left-border alert strip — the banner done right), quiet cards, severity-dot signal timeline. The counter-example to the gradient heroes.

Asserted in the captured DOM — Back to

Unit — small and already right

8 · Vendor — the near-target

350 lines on the host, uniform card stack, closest to the prospect/DetailPage target already.

Asserted in the captured DOM — Back to Vendors

Vendor — the near-target

9 · Conversation — the narrow island

PageBody narrow (form width), back is a bare history-back 'Back', chrome is the quietest in the app — and none of it goes through the host. The narrow variant is the gap that keeps it out.

Asserted in the captured DOM — Back

Conversation — the narrow island

10 · Collections demand — the wrong skeleton's page

Narrow form surface, hand-rolled, back label breaks the 'Back to X' convention ('Collections'). Navigating here first shows the COLLECTIONS LIST's skeleton — the parent-segment loading boundary, the same structural class as the prospect double-skeleton.

Asserted in the captured DOM — Collections

Collections demand — the wrong skeleton's page

What the captures show, side by side

Three banner species (semantic status strip, accent notice, gradient hero ×2), four progress vocabularies (brand-run activity rail, semantic Stepper, pill-node lifecycle rail, checkpoint dividers), two page widths, two back-affordance styles, and four surfaces off the host entirely. The standardization proposal sits beside this artifact.

PropFlow Docs