Skip to main content

Illustration language in Figma

Design source for personalization: trade buckets, segment mapping, and asset naming.

​
Commercial vs. Residential

Illustration personalization introduces product differentiation organized around five trade buckets: Mechanical, Exteriors, Property Care, Emergency & Compliance, and Interiors. Residential and Commercial share one palette. Color is not a differentiator. Segment and trade are communicated through the illustration’s content:
  • Trade-specific detail: Every illustration’s elements are researched and built to match its trade bucket. That accuracy in the objects — not a color, not an icon — is the primary signal for trade and module. Applies to both empty states and headers.
  • Object and scenario selection: Residential and Commercial versions of the same state show different, segment-appropriate objects rather than a scaled copy of the same object. An Emergency & Compliance Error state uses a household smoke detector for Residential and a school fire bell for Commercial.
  • Compositional complexity: Commercial illustrations layer multiple objects into one scene — a fleet, a job site, a rack of equipment. Residential illustrations stay to a single object or a smaller composition.
Check the mapping doc before choosing an illustration for a new use case — it’s the source of truth for every trade, segment, and state combination.

Utilities Empty State Illustration Mapping

​
Trade Bucket Empty State Taxonomy

Trade-specific illustrations — empty states and headers alike — are built against one of five trade buckets using our standard illustration palette.
Start from the Trade Bucket, not the individual trade, when choosing an illustration for a new screen. The component is built at the bucket level, and every trade within a bucket shares the same artwork.

Full trade → bucket → illustration mapping

Select a trade bucket to see the Residential and Commercial empty-state illustrations.

​
Hybrid customers

A hybrid customer runs both Residential and Commercial business, or serves more than one trade. Illustration selection for these accounts follows one rule. Segment: The illustration set follows the customer’s existing Nav & Terminology selection. Whichever segment a hybrid account has explicitly chosen to view the product as — Residential or Commercial terminology and navigation — is the segment whose illustrations they see. There’s no separate hybrid illustration set; segment selection already exists elsewhere in the product, and illustrations follow it rather than introducing a second mechanism.

​
Size variants

Trade-specific empty states use the same size variants as the rest of the illustration library: Default and Large on Desktop, 1x and .75x on Mobile.

​
Asset naming convention (Figma)

Every header and empty-state asset ends in a -Light or -Dark suffix, distinguishing light-mode and dark-mode versions of the same illustration in the layer list. Header assets follow one pattern: [Context]-[Trade Bucket]-[Segment]-Header-[Mode] Trade Bucket appears only for Projects headers. Location, Customer, and Service Agreements headers aren’t trade-specific and drop straight from Context to Segment.
Last modified on November 4, 2026