The digital design system
Paid ads, event banners, and promotional graphics for screens: everything Pierce Law Group places in front of people who haven't visited the website yet, and the banners that bring them to an event. It uses the Brand system's logo, type, palette, and gold lozenge, and adds pixel sizes, safe areas, file weights, and the platform rules each placement brings. Meta and LinkedIn ads live in Social DS under Paid Social Ads.
Minimal, Accent, Bold
Every asset ships in three templates, on the same scale as Print. Pick the step that fits the placement. A retargeting banner beside a news article is often Minimal, a webinar registration banner is Accent, and a cold-audience social ad is Bold. Run one step across a campaign set, so the 300 × 250 and the 728 × 90 a person sees on the same day look related.
Minimal
Quiet and correspondence-grade. Paper does the work; the brand is a signature, not a statement.
- On screen
- White or ivory, navy type, one gold hairline. No photo fill.
- Button
- Navy fill, ivory text. Gold fill when it sits on the navy band.
- Logo
- Full PLG lockup in colour.
Accent
Recognizably Pierce at arm’s length. A navy or gold band frames ivory content.
- On screen
- Ivory with a navy band and one photo, edged by a gold rule.
- Button
- Navy fill, ivory text. Gold fill when it sits on the navy band.
- Logo
- Yellow lockup in the navy band, colour on ivory.
Bold
Full-bleed navy with gold ink, and full-bleed photography where the format has room. For rooms, not envelopes.
- On screen
- Navy flood, or a full-bleed photo under a navy scrim. Gold display accent.
- Button
- Gold fill, navy text.
- Logo
- Full PLG lockup in yellow.
Every format
The catalog lives in DIGITAL in src/lib/canvas-templates.ts. Previews, spec tables, and this list all read it, so a size changes in one place.
| Format | Size (px) | Safe area | File | Max weight | Page |
|---|---|---|---|---|---|
| Medium rectangle | 300 × 250 | 12 px | PNG or JPG | 150 KB | Google display ads |
| Large rectangle | 336 × 280 | 12 px | PNG or JPG | 150 KB | Google display ads |
| Leaderboard | 728 × 90 | 8 px | PNG or JPG | 150 KB | Google display ads |
| Billboard | 970 × 250 | 14 px | PNG or JPG | 150 KB | Google display ads |
| Half page | 300 × 600 | 14 px | PNG or JPG | 150 KB | Google display ads |
| Wide skyscraper | 160 × 600 | 10 px | PNG or JPG | 150 KB | Google display ads |
| Mobile banner | 320 × 50 | 6 px | PNG or JPG | 150 KB | Google display ads |
| Large mobile banner | 320 × 100 | 8 px | PNG or JPG | 150 KB | Google display ads |
| Responsive landscape | 1200 × 628 | 60 px | JPG | 5 MB | Responsive & PMax |
| Responsive square | 1200 × 1200 | 60 px | JPG | 5 MB | Responsive & PMax |
| Webinar page hero | 1920 × 600 | 80 px | JPG, under 400 KB | Webinar banners | |
| Registration banner | 1200 × 628 | 60 px | JPG or PNG | Webinar banners | |
| Webinar title slide | 1920 × 1080 | 96 px | PNG | Webinar banners | |
| Virtual background | 1920 × 1080 | 96 px | JPG or PNG, under 5 MB | Virtual backgrounds | |
| Email header | 1200 × 400 | 48 px | JPG at 2×, displayed 600 × 200 | Email headers & signatures | |
| Email signature banner | 1200 × 200 | 24 px | PNG at 2×, displayed 600 × 100 | Email headers & signatures | |
| Website promo hero | 1920 × 800 | 96 px | WebP or JPG, under 300 KB | Website promos | |
| Website promo strip | 1440 × 120 | 24 px | HTML preferred; WebP fallback | Website promos | |
| Google Business Profile post | 1200 × 900 | 60 px | JPG or PNG | Google Business Profile |
Delivery rules
| Rule | What it means in practice |
|---|---|
| File type | JPG for anything with a photo, PNG for flat colour and type. Export at exactly the listed pixel size unless the format says 2×. Never upload SVG or WebP to an ad platform unless its spec lists them. |
| Weight | Stay under the listed limit. Google display ads are capped at 150 KB each, so export the photo at about 80% JPG quality and check the file size before upload, not after a rejection. |
| Alt text | Where a placement takes alt text (website promos, email headers), write the message, not a description of the photo: “Free webinar: wills, trusts, and what your family needs. November 12.” Ad platforms don't take alt text, so the message must also be in the ad's text fields. |
| Firm name on every ad | Every paid or promotional asset carries the full Pierce Law Group lockup. The PL monogram is never the only identification. |
| Attorney advertising | Ads carry “Attorney advertising” wherever it fits at a legible size. Where a unit cannot hold it, the display ads page says so. When in doubt, check with the firm before launch. See Compliance. |
| No results, no comparisons | No case outcomes, savings figures, ratings, or claims to be better than another firm. Describe the service and the next step. |
| Safe areas | Keep logo and copy inside each format's safe area. Turn on the guides on any template page to see it, along with any band the platform covers with its own interface. |
Updating content
The templates hold no copy of their own. Edit the content files and every template that reads them updates.
| File | What it holds |
|---|---|
src/lib/campaign-content.json | The shared campaign: the evergreen offer, the current webinar and seminar, tips, and the disclaimer. Shared with Social DS, so a campaign reads word for word the same on every channel. |
src/lib/digital-content.json | Copy specific to Digital ads: short lines for the smallest display units, the Google responsive text assets, and the text around paid social images (read by Social DS's Paid Social Ads). The Responsive & PMax page fails to build if a text asset is over Google's limit. |
src/lib/print-content.json | The firm's name, address, and phone, and the photo library. Each photo carries a focus point so every crop keeps its people in frame. |
headline and accent. The accent renders in gold italic, so keep it to the last two to four words.