PropFlow · PR #6225 · rendered evidence

Twelve hues to three.

The prospect detail page painted twelve distinct colour ramps, plus an activity rail that gave every dot its own interpolated hue — because the colour encoded the row’s index. These are the real components, rendered from the branch and from origin/main, in both themes.

12 → 3 colour ramps in the page’s own code. Six on the whole screen, counting the shared primitives it mounts.

What the page can paint

Every var(--color-*), hex and rgba() the page’s own render code reaches for, grouped one family per ramp. Two ramps of the same hue angle count twice — forest #166534 and emerald #059669 are two greens to the eye.

Measured by the same script on both sides; the before side reads the blobs straight out of origin/main.
RampVerdictWhat it was doing
--color-badge-bluekeptInquiry and Tour Confirmed pills — in flight, nothing owed
--color-badge-greenkeptApproved, Signed, tour confirmed, the activity rail
--color-badge-redkeptCancelled, Rejected, error text, critical signal dot
--color-badge-yellowkeptTour Pending, Application Review, skip notices
--color-badge-clarakeptThe one purple — Clara automation, nothing else
--color-badge-purplegoneA second purple that only ever meant "tour"
--color-primarygoneIndigo on the cadence nodes, fill bar and one link
--color-warninggoneA second amber beside the badge ramp
--color-dangergoneA second red beside the badge ramp (in the page’s own code)
--color-successgoneA second green — from this page’s code; still arrives via the shared Stepper
spectrumAt(i / n)goneOne interpolated hue per activity row. A twelve-row log painted twelve
#E0E7FF / #3730A3goneHardcoded indigo chip — never flipped with the theme
#DBEAFE / #1E40AFgoneHardcoded blue chip, and the dollar-amount chips
#FEF3C7 / #92400EgoneHardcoded amber chips
#F3F4F6 … #374151goneThe “Not Interested” banner — grey slab, near-black text on dark
rgba(239,68,68,.04)goneCritical-row tint. Composited to a delta of (1, 7, 7) — invisible

The surfaces, rendered

The real components with synthetic props, screenshotted through the app’s own compiled stylesheet. The route itself is auth-gated on a laptop, so this is a component gallery rather than a page shot — every pixel below still comes from the components this PR changes.

Screenshots shown in:
BEFORE — origin/main Twelve dots, twelve hues — violet through sky down one rail. Purple pill, purple callout, glow ring on the cadence card.
before — the prospect detail page's changed surfaces, light theme
AFTER — this branch One green, three states. Funnel rail on top. Cadence card on the shared rail; the only purple left is Clara.
after — the prospect detail page's changed surfaces, light theme
BEFORE — origin/main The Cost, Lease and Maint chips are still light-mode pastels — hardcoded hex that never flipped.
before — the prospect detail page's changed surfaces, dark theme
AFTER — this branch Every chip resolves through a token. Legal and Delinquency keep their red because there the hue is meaning.
after — the prospect detail page's changed surfaces, dark theme

Three things to look at

The rail stopped counting

Every dot, border and connector ran through spectrumAt(i / (total − 1)). Now: done filled, current ringed, upcoming hollow — one hue, three states, and the count no longer grows with the log.

One fact, one colour

A signed prospect showed a green pill in the header and a violet badge in the card, on the same screen. Both now read one stageDisplay() table, so they cannot disagree.

Dark mode was lying

Four hardcoded hexes never flipped with the theme. Switch the toggle above and watch the Cost, Lease and Maint chips on the before side stay light-mode pastel on a dark card.

Synthetic fixture data throughout — no resident, prospect or property in these screenshots is real. Positive controls: 24 deliberate breaks, 24 caught.

PropFlow Docs