The digital design system
Paid ads, event banners, and promotional graphics for screens: everything placed in front of people who have not visited the website yet, and the banners that bring them to an event. It uses the Brand view's mark, type, and palette, and adds pixel sizes, safe areas, file weights, and the rules each placement brings. Meta and LinkedIn ads live in Social DS.
How this is organized
Each page is one placement family. Every template on it ships in the three steps of the template scale, and one step runs across a campaign set, so the two units a person sees on the same day look related.
| Group | Covers |
|---|---|
| Advertising | The standard display units and the image and text assets for responsive campaigns. |
| Events | The webinar page hero, registration banner, and title slide, and the virtual background a speaker sits in front of. |
| Owned Channels | Email headers and signature banners, the website's promotional hero and strip, and business profile posts. |
Every format
The catalog is the digital group in src/formats.json. Previews, spec tables, and this list all read it, so a size changes in one place. Sizes and limits are the platforms' own; confirm them against current specifications before a campaign ships.
| Format | Size | Safe area | File | Max weight | Page | Notes |
|---|---|---|---|---|---|---|
| Medium rectangle | 300 × 250 px | 12 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Large rectangle | 336 × 280 px | 12 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Leaderboard | 728 × 90 px | 8 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Billboard | 970 × 250 px | 14 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Half page | 300 × 600 px | 14 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Wide skyscraper | 160 × 600 px | 10 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Mobile banner | 320 × 50 px | 6 px | PNG or JPG | 150 KB | Google Display Ads Planned | Too small for a disclaimer line; do not use it where one is required. |
| Large mobile banner | 320 × 100 px | 8 px | PNG or JPG | 150 KB | Google Display Ads Planned | |
| Responsive landscape | 1200 × 628 px | 60 px | JPG | 5 MB | Responsive & PMax Planned | The platform crops and overlays its own copy on responsive ads; keep text off the image. |
| Responsive square | 1200 × 1200 px | 60 px | JPG | 5 MB | Responsive & PMax Planned | The platform crops and overlays its own copy on responsive ads; keep text off the image. |
| Webinar page hero | 1920 × 600 px | 80 px | JPG, under 400 KB | Webinar Banners Planned | The outer 240 px crop away on narrow screens; keep copy in the centre 1440 px. | |
| Registration banner | 1200 × 628 px | 60 px | JPG or PNG | Webinar Banners Planned | ||
| Webinar title slide | 1920 × 1080 px | 96 px | PNG | Webinar Banners Planned | ||
| Virtual background | 1920 × 1080 px | 96 px | JPG or PNG, under 5 MB | Virtual Backgrounds Planned | The speaker covers the central keep-clear region; the brand sits top left and the message upper right. | |
| Email header | 1200 × 400 px | 48 px | JPG at 2×, displayed 600 × 200 | Email Headers & Signatures Planned | ||
| Email signature banner | 1200 × 200 px | 24 px | PNG at 2×, displayed 600 × 100 | Email Headers & Signatures Planned | ||
| Website promo hero | 1920 × 800 px | 96 px | WebP or JPG, under 300 KB | Website Promos Planned | ||
| Website promo strip | 1440 × 120 px | 24 px | HTML preferred; WebP fallback | Website Promos Planned | ||
| Business profile post | 1200 × 900 px | 60 px | JPG or PNG | Google Business Profile Planned |
Previews
A template is a canvas sized from the catalog and composed from the pieces in src/styles/canvas.css: a safe-area box, an eyebrow, a display line, a button, and a foot. Everything inside is written in design pixels, so the same markup is a leaderboard or a billboard. Turn on the guides to see the safe area and any band the platform covers with its own interface.
One message, one next step.
One message, one next step.
<div class="canvas-frame" style="{{canvas:gdn-300x250}}">
<div class="canvas">
<div class="canvas-ui"></div>
<div class="canvas-safe">
<span class="canvas-eyebrow">Eyebrow</span>
<p class="canvas-display">Headline, <em>accent.</em></p>
<span class="canvas-button">Call to action</span>
</div>
</div>
</div>
Delivery rules
| Rule | What it means in practice |
|---|---|
| File type | JPG for anything with a photo, PNG for flat color 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 specification lists them. |
| Weight | Stay under the listed limit. Export a 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, write the message, not a description of the picture. Ad platforms take no alt text, so the message must also be in the ad's text fields. |
| The mark on every asset | Every paid or promotional asset carries the full brand mark from the Brand view. A monogram is never the only identification. |
| Disclaimers | Where the brand's field requires a disclaimer line, it appears wherever it fits at a legible size; a format too small to hold it is marked in the catalog and is not used where the line is required. |
| Safe areas | Keep the mark and the copy inside each format's safe area. The guides on any template page show it, with any band the platform covers. |
| Shared copy | A campaign reads word for word the same on every channel: the ad, the banner, the event cover, and the post take their headline, date, and call to action from one place, never retyped per template. |