> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Personalization

> Commercial vs. Residential guidance for trade-specific illustrations and headers.

> [card] [Illustration language in Figma](https://www.figma.com/design/9AdQ0X9Wgx54HHFPM1xkOT/NEW-Illustration-Library?m=auto\&node-id=2885-4404)
>
> 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.

> [!TIP]
>
> 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.

> [card] [Utilities Empty State Illustration Mapping](https://servicetitan.atlassian.net/wiki/spaces/ADS/pages/4694638713/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.

| Trade Bucket | Included Trades |
| - | - |
| Mechanical | Plumbing, HVAC, Electrical, Garage, Chimney |
| Exteriors | Roofing, Gutters, Siding, Openings |
| Property Care | Landscape, Lawn, Pest, Pool, Arbor |
| Emergency & Compliance | Fire Life Safety (FLS), Restoration |
| Interiors | Remodel, Kitchen, Bath, Flooring, Closets, Etc. |

> [!TIP]
>
> 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.

> [card] [Full trade → bucket → illustration mapping](https://www.figma.com/design/9AdQ0X9Wgx54HHFPM1xkOT/NEW-Illustration-Library?node-id=7890-12820)

### Trade bucket gallery

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

Trade bucket

## 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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.