Visual comparison of the most-viewed components on the transaction list page. Each block shows the component as it renders today on play (left, current colors) and how it would look with the proposed Real UI 2025 mapping (right).
Before — current colors on play
After — mapped to Real UI 2025
Note: panes use white backgrounds for accurate color reading
1. Sub-tab pills
The Active / Closed / Terminated pill row. The active pill is the single biggest stray on the page — currently using avatar-blue-400 instead of the primary blue.
Before (current)
Active (109,879)
Closed (8,686)
Terminated (59,506)
After (Real UI)
Active (109,879)
Closed (8,686)
Terminated (59,506)
Changes:
- Active pill bg:
#629BF8 → real-blue-500 (#4967FD)
- Inactive pill bg:
#EEEEEE → real-grey-100 (#E7E6E6)
- Inactive pill text:
#615B56 → real-grey-600 (#5D5D5D)
2. Main tabs
All / Sale / Lease / Referrals tabs. Active tab is underlined with the primary blue.
Changes:
- Inactive tab text:
#7B7A7A → real-grey-500 (#767676) — visually identical
- Active tab text + underline: already correct (
#1D1D1D + #4967FD)
3. Status pills (all 21 variants)
Status pills appear next to CHECKLIST on each transaction card. The same text colors are used across all tabs.
Before
New
Calculate Ledger
Needs Commission Validation
Commission Validated
Ready For Commission Doc Gen
Commission Document Generated
Commission Document Approved
Commission Document Sent
Approved For Closing
Closed
Waiting On Payment
Payment Accepted
Payment Scheduled
Settled
Termination Requested
Terminated
Listing Active
Listing In Contract
Listing Closed
Trade Record Sheet Confirmed
After
New
Calculate Ledger
Needs Commission Validation
Commission Validated
Ready For Commission Doc Gen
Commission Document Generated
Commission Document Approved
Commission Document Sent
Approved For Closing
Closed
Waiting On Payment
Payment Accepted
Payment Scheduled
Settled
Termination Requested
Terminated
Listing Active
Listing In Contract
Listing Closed
Trade Record Sheet Confirmed
Changes (most are visually identical, hex shifts only):
- Burgundy (Termination Requested):
#731A3A → real-red-900 (#8A1238)
- Red (Terminated):
#F84C6C → real-red-500 (#F74D6B)
- Orange (Commission Doc Generated):
#E26811 → amber-600 (#D97706) — slightly more amber
- Yellow (Needs Commission Validation):
#C98B11 → amber-700 (#B45309) — slightly more saturated
- Gray:
#7B7A7A → real-grey-500 (#767676) — identical to eye
- Blue and Green: already match Real UI
4. Transaction type tags
Sale / Lease / Internal Referral icons + labels in the card header.
Before
Sale
Lease
Internal Referral
After
Sale
Lease
Internal Referral
Changes:
- Sale:
#050E3D → real-blue-950 (#171C4F)
- Lease:
#003036 → real-green-900 (#1A3A30)
- Internal Referral:
#731A3A → real-red-900 (#8A1238)
5. Property type pills
Residential / Commercial / Condo / Mobile Home labels under the address. Mobile Home is the only pill already using Real UI tokens correctly.
Before
Residential
Commercial
Condo
Mobile Home
After
Residential
Commercial
Condo
Mobile Home
Changes:
- All four pills already use Real UI tokens correctly. No visible difference.
- Residential: real-grey 50/800/100 (match)
- Commercial: real-blue 50/800/100 (match)
- Condo: amber 50/800/100 (match)
- Mobile Home: real-green 50/800/100 (match)
6. Page action buttons
Top-right action buttons on the page header.
Changes:
- View toggle bg:
#3B82F6/10% (Tailwind blue) → real-blue-500/10% (#4967FD/10%)
- View toggle icon:
#3B82F6 → real-blue-500 (#4967FD)
- Filters button text + border:
#615B56 / #DADADA → real-grey-600 / real-grey-200 (#5D5D5D / #D1D0D0)
- Add Transaction & Create Referral primary blue: already correct (
#4967FD)
7. Agent avatars
Stacked avatar circles in card body. The purple avatar bg is the only color in this audit with no Real UI equivalent — closest fallback is real-blue-950.
Changes:
- Purple avatar bg:
#321268 → real-blue-950 (#171C4F) — Real UI has no purple; consider adding a purple token or keeping as off-palette accent
- Teal avatar bg:
#BFDDDB → real-seaglass-200 (#BFDDDB) — 100% match
- Teal avatar text:
#050E3D → real-blue-950 (#171C4F)
- Overflow bg:
#DADADA → real-grey-200 (#D1D0D0)
8. Card action icons
Power Audit / Requires Attention / Compliance Verified / Confirmed Commission Deposit icon buttons. Plus the red notification badge (e.g. "3").
Changes:
- Button bg:
#F2F2F4 → real-grey-100 (#E7E6E6)
- Power / Attention icon (red):
#F84C6C → real-red-500 (#F74D6B)
- Check / Money icon (green): already correct (
#439775)
- Notification badge:
#F84C6C → real-red-500 (#F74D6B)
9. Sort bar & pagination
Sort By dropdown, direction toggle, pagination row.
Changes:
- Sort dropdown border:
#D2D5DB → real-grey-200 (#D1D0D0)
- Sort By label:
#7B7A7A → real-grey-500 (#767676)
- Pagination bar bg:
#F6F8FC → real-grey-50 (#F6F5F5)
- Active page bg:
#EDEFF3 → real-grey-100 (#E7E6E6)
10. Full transaction card
The hero component. Everything above assembled into a real card.
Before
📍
101 W 2150 N, Layton, Utah 84040
Residential
Transaction Owner
Sisu Test3
Monies
Gross Comm: $10,700
After
📍
101 W 2150 N, Layton, Utah 84040
Residential
Transaction Owner
Sisu Test3
Monies
Gross Comm: $10,700
Combined changes — every fix from sections 1–9 applied together. Most differences are subtle (small hex shifts that are visually identical) but the cumulative effect is a card that fully conforms to Real UI 2025 with no Tailwind defaults or legacy zen-palette colors mixed in.