Skip to main content

​
Cover Designer

The Cover Designer is the branded-cover-page editor for inspection reports. Cover pages are the front page of every PDF report — your company logo, the property photo, the inspection title, the inspector’s name. Design them once; assign them as defaults to your templates or to specific inspections. Cover Designer is a top-level sidebar item (route /cover-designer) — not nested under Templates, because covers are reusable across many templates. This article covers both the list view (/cover-designer) and the per-cover editor (/cover-designer/new for a new cover, /cover-designer/:id to edit). For where covers are referenced from inspection templates, see Template Designer → Default Cover.

​
When you use it

  • First-week setup — design a default cover that matches your brand
  • Per-service variants — separate covers for Residential vs. Commercial vs. New Construction
  • Special-occasion covers — limited-time branding, holiday variants, client-specific co-branding
  • A/B testing brand presentation — duplicate, modify, see which converts better
After initial setup, covers rarely change. Most operators have 1–3 active covers.

​
The cover list page

Route: /cover-designer [SCREENSHOT: cover-list.png — desktop, the Cover Templates list page showing the heading “Cover Templates” with descriptive subtitle, a grid of existing cover thumbnails, and a + New Template button.] The list page shows:
  • Page heading: “Cover Templates”
  • Description: “Design custom report cover pages with branded frames and dynamic field tokens.”
  • Cover grid — thumbnails of every designed cover
  • + New Template button — opens the editor for a fresh cover
Each cover thumbnail shows:
  • The cover’s name
  • A live miniature preview of the layout (or “No layers” if the cover is empty)
  • Per-card actions: Edit · Duplicate · Set Default · Delete

​
Empty state

If you have no covers yet:
No cover templates yet Create your first cover template to add branded cover pages to reports. [+ New Template]
Click + New Template to open the editor with a blank canvas.

​
The Cover Designer editor

Route: /cover-designer/new or /cover-designer/:id The editor is a layer-based composition tool. Think of it like Figma for inspection report covers: you add layers (photo, text, shape, background), position them on the page, configure their appearance. [SCREENSHOT: cover-editor.png — desktop, the Cover Designer editor showing a layer panel on the left, a page canvas in the center showing the cover-in-progress, and a property-inspector panel on the right with the selected layer’s controls.]

​
Layer types

The editor supports these layer types: Each layer is named (Layer name field) for easier identification in the layers panel.

​
Per-layer controls

When you select a layer, the right panel shows its properties.

​
Position & Size (%)

Using percentages instead of pixels means the design scales correctly across different paper sizes (letter, A4, legal).

​
Photo fit (photo layers only)

Plus a Photo border radius (px) field for rounded corners.

​
Text content (text layers)

​
Typography (text layers)

​
Background (per-layer)

​
Variable tokens supported on cover text layers

The same $Variable tokens that work in Communications email templates and Contracts work on dynamic text layers in covers: Client tokens: $ClientFirstName $ClientLastName $ClientNames Property & inspection: $InspectionAddress $InspectionDate Inspector & company: $InspectorName $InspectorLicense $CompanyName Common cover patterns: Static text (no $Variable) renders as-typed.

​
The property photo layer

The Photo (property) layer is special: at design time it shows a placeholder image; at PDF-rendering time, it pulls the cover photo designated for that specific inspection. The cover photo is either: If an inspection has no cover photo, the layer renders the placeholder (typically a generic property silhouette). Confirm the inspector knows to designate a cover photo to avoid placeholder-on-published-report embarrassment.

​
Saving and Set Default

The editor has explicit-save:
  • Save commits the cover to Firestore at artifacts/{tenant}/public/data/coverTemplates/{coverId}
  • Set as Default marks this cover as the tenant-wide default — every template that doesn’t have its own cover override will use this
  • Save & Close saves and returns to the list
Newly-saved covers appear in the Template Designer → Default Cover picker for every template in your tenant.

​
Duplicate

The Duplicate action on a cover card creates a copy with (Copy) appended. Edit the duplicate to create a variant. This is the recommended way to create cover variants:
  1. Start with your default cover
  2. Duplicate
  3. Modify the duplicate (e.g. change to a more formal font for Commercial)
  4. Assign the variant to specific templates via Template Designer

​
Errors and recovery

​
What this page does NOT do

  • It does not design report body pages. That’s Visual Page Designer.
  • It does not edit the actual property photo. Cover photos are designated per inspection in Inspection Reviewer or on the mobile Review Screen.
  • It does not handle contracts or email letterheads. Those have their own editors.
  • It does not configure margins or page size. Page dimensions are fixed at letter portrait (8.5×11 inches).