Illustrations – Headers

Header illustrations render at a fixed 240×120px across every context — Module and Projects, both segments, light and dark. Design with that footprint in mind; a scene that reads clearly at empty-state size can lose detail at header size.

Module Headers

Location and Customer headers brand the top of their pages. Each has a Residential and Commercial version, shared across every trade. Service Agreements is Commercial-only terminology. Residential uses “Memberships,” which carry no header illustration.

Header	Residential	Commercial
Location	Map with an address pin	Blueprint with a multi-story building
Customer	House with a signed agreement	Business card, clipboard, and tablet
Service Agreements	Not applicable. Residential uses “Memberships,” which has no header illustration	Multiple agreements plus a stamp

Projects Headers

Projects headers follow the same Trade Bucket taxonomy as empty states: Mechanical, Exteriors, Property Care, Emergency & Compliance, and Interiors, each with a Residential and Commercial version. Every object is chosen to reflect the customer’s trade and segment accurately.

Trade Bucket	Residential	Commercial
Mechanical	Thermostat, wrench, hand tools	Larger HVAC units, wrench, filter/vent
Exteriors	Paint can, hard hat, ladder	Gutter section, panels, glass door
Property Care	Hard hat, trowel, sign	Sprayer, shears, turf sample
Emergency & Compliance	Hard hat, safety vest, exit sign	Safety vest, AED, fire extinguisher, security panel
Interiors	Caulk gun, molding	Sink, material swatches

Do’s and Don’ts

Do’s and don’ts for using header illustrations.

Standard	Requirement
DoShip one evergreen pair per Module header	Location, Customer, and Service Agreements each get one Residential and one Commercial version, shared across every trade.
DoMatch Trade Bucket for Projects headers	A Commercial Exteriors account gets the Exteriors Commercial artwork, never a generic or mismatched bucket.
Don’tDon’t build a Residential Service Agreements illustration	Residential accounts use “Memberships” instead, and Memberships pages carry no header illustration at all.
Don’tDon’t assume header sizing matches empty states	Headers render at a fixed 240×120px. Empty states use separate Default/Large/1x/.75x size variants.

Concepts & Guidelines

Anvil2

Resources

Headers

Module Headers

Projects Headers

General Recommendations for All Headers

Do’s and Don’ts

​Module Headers

​Projects Headers

​General Recommendations for All Headers

​Do’s and Don’ts

Module Headers

Projects Headers

General Recommendations for All Headers

Do’s and Don’ts