Intelligent Property Operations LLC
HomeOps Design System
Customer Portal · Vendor Portal · Resident interface v0.1 · mid-fidelity
01

Foundations

Named tokens shared by all three surfaces. Every component below is built only from these values — nothing here reduces to a static color or hardcoded pixel value on a screen.

Color

Neutrals · brand · status ramp

Neutrals

Gray 50
--gray-50
Gray 100
--gray-100
Gray 200
--gray-200
Gray 300
--gray-300
Gray 400
--gray-400
Gray 500
--gray-500
Gray 600
--gray-600
Gray 700
--gray-700
Gray 800
--gray-800
Gray 900
--gray-900

Brand — “Blueprint”

One primary brand hue, used for primary actions, active nav state, links and focus rings only — never for status meaning.

Brand 050
--brand-050
Brand 100
--brand-100
Brand 300
--brand-300
Brand 500
--brand-500 · primary
Brand 600
--brand-600 · hover
Brand 700
--brand-700

Semantic / status ramp

HomeOps runs on status. Five meanings, each with a solid / background-tint / border triplet, used consistently everywhere a state is shown — pills, table row flags, timeline dots, the Liability Shield.

Verified / OK— complete, in good standing, on time
--status-ok-solid
--status-ok-bg
--status-ok-border
Expiring soon / Attention— needs action before it lapses
--status-attn-solid
--status-attn-bg
--status-attn-border
Lapsed / Blocked— expired, overdue, cannot proceed
--status-block-solid
--status-block-bg
--status-block-border
Pending / In-progress— scheduled or underway, awaiting outcome
--status-pending-solid
--status-pending-bg
--status-pending-border
Info / Neutral— no meaningful state yet, or informational only
--status-neutral-solid
--status-neutral-bg
--status-neutral-border

Typography

System UI stack + monospace for data / tokens
Display 32/40
--text-display700 · 32px/40px
Heading 1 26/34
--text-h1700 · 26px/34px
Heading 2 21/29
--text-h2600 · 21px/29px
Heading 3 17/25
--text-h3600 · 17px/25px
Heading 4 15/22
--text-h4600 · 15px/22px
Body 14/21 — default reading and UI text size across all three surfaces
--text-body400 · 14px/21px
Body medium 14/21 — emphasis within body copy, form labels
--text-body-md500 · 14px/21px
Small 12/18 — helper text, metadata, table cells
--text-small400 · 12px/18px
Caption / eyebrow
--text-caption600 · 11px/14px · upper
UI face
System sans
--font-ui
Data / token face
System mono
--font-mono

Spacing & grid

4px base unit
--space-1
4
--space-2
8
--space-3
12
--space-4
16
--space-5
20
--space-6
24
--space-8
32
--space-10
40
--space-12
48
--space-16
64
Desktop — 12 columns, 24px gutter, 1280px max content width
Mobile — 4 columns, 16px gutter, 16px screen margin

Corner radius & elevation

--radius-sm 4
--radius-md 8
--radius-lg 14
--radius-full
flat
elevation-0
card
--shadow-1
menu
--shadow-2
modal
--shadow-3
02

Component library

Built only from the tokens above. Where behavior differs meaningfully by surface, a desktop and mobile variant are both shown.

Buttons

Desktop — 38px height
primary · secondary · ghost · danger · disabled.btn-primary / -secondary / -ghost / -danger
Mobile / Vendor field — 52px full-width, thumb zone
.btn-lg

Inputs & form fields

Exceeds this vendor’s $500 standing approval limit.
Notify resident when scheduled
Focus state
Reyes Plumbing & Rooter
Field anatomy
Label → --text-body-md
Field → --radius-md · border --border-strong
Helper / error → --text-small

Cards

Work order WO-1042Completed

Kitchen faucet replacement — leak repair, fixture swap, cleanup.

Reyes Plumbing & Rooter

Compact card — used in mobile lists and dense dashboards.

.card / .card-compact · --radius-lg

Data table

Desktop table · mobile stacked-card equivalent
Work orderPropertyVendorStatusFlat rate
WO-1042142 Maple Ave, 3BReyes PlumbingCompleted$285
WO-1043142 Maple Ave, 3BCastillo DrywallOn hold$410
WO-104477 Birchwood CtNguyen PaintingScheduled$320
WO-104577 Birchwood CtUnassignedNew—
4 of 128 work ordersrow-selected · row-flag · hover
Mobile equivalent — stacked list, same data
WO-1042 · 142 Maple AveReyes Plumbing · $285
Done
WO-1043 · 142 Maple AveCastillo Drywall · $410
Hold

Tabs

Open (12)
Scheduled (4)
Completed (86)
Archived

Modals, drawers & toasts

Desktop modal
Approve additional work
Castillo Drywall requests $410 to repair water-damaged drywall found behind WO-1042.
Mobile bottom drawer
Checkout WO-1042Confirm outcome before closing this job.
Toasts
Work order marked complete.
Insurance expires in 12 days.
Payment failed — card declined.

Page headers

Properties 142 Maple Ave

142 Maple Ave, Unit 3B

WO-1042 · Faucet repair

Empty states & loading

No open work orders New requests from residents will appear here.
.skeleton

Avatars

RP
RP
RP
RP
xs / sm / md / lg · optional status dot

Photo upload & before/after

Dropzone — empty
Drop photos or tap to captureJPG or PNG, up to 10 photos
Dropzone — uploading
Before / after pair
Before
After
WO-1042 · logged Jun 2

Status pills & badges

Every pill maps to one of the five semantic colors above
Work-order status
New Scheduled In progress On hold Completed Cancelled
Compliance status
Verified Expiring soon Expired Missing Pending review
Payment status
Paid Pending Overdue Disputed Refunded
03

Domain patterns

Composed from the tokens and components above. These seven patterns are specific to how HomeOps operates and should be reused as-is across all 13 wireframes.

Total Liability Shield™ status object

Rolls license, insurance (COI), W-9, and compliance checks into one scannable state. Full card for vendor profile pages; compact chip for tables and lists.

Protected
Reyes Plumbing & Rooter
LicenseCurrent
Insurance (COI)Current
W-9On file
CompliancePassed
At risk
Castillo Drywall
LicenseCurrent
Insurance (COI)Expires in 12d
W-9On file
CompliancePassed
Exposed
Nguyen Painting
LicenseLapsed
Insurance (COI)Current
W-9Missing
CompliancePassed
Compact chip — table / list row
Protected At risk Exposed

Flat-rate price & NTE limit

Flat rate · scope-based Kitchen faucet replacement Leak repair, fixture swap, and cleanup.
$285total, no add-ons
Design rule: the price display never shows an hourly labor rate or itemized materials list — one scope, one flat number, always.
NTE indicator — within limit
$340 proposed$500 NTE
NTE indicator — near limit
$460 proposed$500 NTE
NTE indicator — exceeds, requires approval
$610 proposed$500 NTE
122% of NTE · needs approval

Vendor checkout status control

A required 3-way fork every vendor resolves a job into before it leaves their queue.

Work completedJob resolved, ready to close
Pending vendor quoteScope grew — awaiting a price
Additional work neededRequires a different trade

Repair-event grouping

Links every work order that traces back to a single incident, in trade sequence.

Incident

Unit 3B — water leak under kitchen sink

3 of 4 complete
WO-1042 · Plumbing — Reyes PlumbingCompleted
WO-1043 · Drywall — Castillo DrywallCompleted
WO-1044 · Paint touch-up — Nguyen PaintingScheduled
WO-1045 · Final clean — UnassignedPending

Maintenance-history timeline

142 Maple Ave, Unit 3B — full repair record with recurring-issue detection.

Jun 2, 2026
HVAC — no cooling
Completed
Recurring · 2nd occurrence in 90 days
Apr 18, 2026
HVAC — no cooling
Completed
Nov 30, 2025
Garbage disposal jammed
Completed
Aug 14, 2025
Water heater — pilot light out
Completed

Vendor scorecard

RP
Reyes Plumbing & Rooter
4.8 · 32 jobs
Protected
96%
On-time
98%
Completion
2.1h
Avg. response