What the ZIP contains
When the Studio finishes a campaign, it hands you one ZIP rather than a folder of loose exports. Every file inside has a specific destination, and knowing which file goes where saves you from resizing, re-cropping, or re-typing anything on posting day.
| Artifact | Format and size | Where it gets used |
|---|---|---|
| Square graphic | PNG, 1080×1080 (1:1) | Feed posts and anywhere a square crop is safest |
| Portrait graphic | PNG, 1080×1350 (4:5) | Taller feed placements that reward vertical space |
| Story graphic | PNG, 1080×1920 (9:16) | Stories, vertical video covers, full-screen placements |
| Clean thumbnail | JPG, 1280×720 (16:9) | YouTube thumbnail upload |
| QR code | PNG and SVG | PNG for screens; SVG for print at any size |
| Tap-or-Scan card | Rich HTML | Clickable embed for pages, emails, link hubs |
| Caption set | Text, one per platform | Paste into the post composer |
| Manifest | Machine-readable file | Record of everything the package contains |
The formats and sizes come from the package engine’s own README, which names the thumbnail thumbnail/*-youtube-thumbnail-1280x720.jpg, groups the files under POST THIS HERE and ROUTING AND COPY, and adds *-event.ics for events and website-icons/ when a favicon set is included (see the favicon packages guide).
The frames were re-checked on 2026-10-02: the square is Instagram’s feed figure (source, 2026-10-02); the portrait is the 4:5 frame, inside the 1.91:1–3:4 range Instagram’s feed page now states, with 1080×1440 the tallest it keeps (source, 2026-10-02); the story is the Stories and Reels figure (source, 2026-10-02). Meta’s ads guide now recommends 1440×1800 for 4:5 Facebook feed images; 1080×1350 clears the stated minimums of 600 wide and 750 tall but is no longer the recommended figure (source, 2026-10-02).
For a deeper look at why the three graphic sizes are what they are, see the social image sizes guide.
Why the thumbnail ships clean
“Clean”, in the sense this site uses the word, means the 1280×720 thumbnail never receives a QR code or a clickable element. It is not text-free: the renderer always draws a kicker line and a title, which is why the design settings carry a separate overlayTitle style. A thumbnail lives a different life from a promo graphic: it renders around 360px wide in search results and around 168px wide in the suggested sidebar, so any text on it has to be enormous to survive — and the right words depend on the specific video title next to it. That is why the engine fits the title rather than setting a fixed size, and why the thumbnail tool can re-render the frame with another headline. The render widths are the site’s own August 2026 wording; no official page states them.
YouTube’s file-size limit now depends on the upload device — 2 MB when uploading from mobile; 50 MB when uploading from desktop (video thumbnails)— so the smaller, mobile figure is the one to stay under, and the accepted formats are stated only as “Image formats such as JPG or PNG” (source, 2026-10-02). The recommended resolution is now 3840×2160 pixels (16:9) for videos; 2160×3840 for Shorts (source, 2026-10-02); the export is 16:9 and clears the minimum width of 640 pixels for videos (source, 2026-10-02), so it passes the gate but is no longer the recommended size. Verify against the platform’s own documentation before a critical launch.
Why the QR code comes twice
The same code ships as both PNG and SVG because raster and vector fail in opposite places. The PNG drops straight into social graphics, slide decks, and anything screen-bound. The SVG is for print: it scales to a poster, a banner, or a vehicle wrap without any quality loss, so the module edges stay crisp at every size. Whichever file you place, preserve the quiet zone — four modules of clear space on every side (source, 2026-10-02)— and keep the code dark on a light background. Sizing, error correction, and placement rules are covered in the QR codes on promos guide, and you can regenerate variants any time with the free QR tool.
Sizing a QR for print with the QR tool
The figures in this section are the standalone QR tool’s engine, which is where you size a code for print; the package’s own QR files are encoded separately by the Studio, described at the end of the section. Run the fictional destination https://example.com/quiet-hours through that engine: a version 3 symbol of 29×29 modules, 37×37 with the always-rendered 4-module quiet zone. The engine encodes at level M by default (≈15% of codewords recoverable) and forces H (≈30%) whenever a logo is present (source, 2026-10-02); this example came back at level Q because the reference encoder raises the level when that does not increase the version. The content types are in the payloads guide.
The tool’s PNG presets are 512, 1024, 2048pixels. The engine’s print readout divides pixels by 300 for inches and converts to millimetres: 512 px is 1.71 in (43.3 mm) a side; 1024 px is 3.41 in (86.7 mm) a side; 2048 px is 6.83 in (173.4 mm) a side. Divided by this example’s 37 modules, one module measures 1.17 mm, 2.34 mm, 4.69 mm. The SVG carries a nominal pixel width — 296 pixels here, 37 modules at the engine’s default 8pixels a module — but is drawn as a single path in module units inside a viewBox, so it rescales to any print size without resampling. The decode margin behind logos, colours and sizes is worked through in the decode-margin guide.
The package’s QR files are not this engine’s output. The Studio encodes them with the qrcode library at level H with a 3-module margin, writing the SVG at a nominal 1024 pixels and the PNG at 760 pixels; for this destination that is a version 4 symbol of 33×33 modules, 39×39 with its margin. That margin is 1 module short of the four modules recommended above, so leave the difference as clear space around either file when you place it.
Contrast, computed rather than judged
The engines measure colour pairs with the WCAG 2.x contrast ratio; the AA threshold is 4.5:1 (source, 2026-10-02), the QR engine warns below 4.5:1 and the Studio’s colour picker advises below 4.5:1. Through the QR engine’s assessContrast, the default ink #14201c on the default panel #fbfcfa measures 16.28:1 with no warning. A fictional gold #e0b64a on the same panel measures 1.86:1: “Low contrast (1.86:1). Scanners may fail below 4.5:1 — darken the foreground or lighten the background.” The panel on the default backdrop #14201c measures 16.28:1, but the foreground is the lighter colour: “Light-on-dark (inverted) codes are not reliably read by all scanners. Prefer dark modules on a light background.”
The Studio treats the same number as advice, not a veto: pick the gold for a title and normalizePromoDesignSettings returns #e0b64a— exactly the colour chosen — while contrastAdvisory reports 1.9 and meetsMinimum: false. The one exception is the thumbnail’s overlay text — the kicker and the title — the one place a colour is protected at render time. The renderer does not read the photo: it assumes a pure white region behind the type, composites its scrim’s dark tone over that at 76% to a protected background of #454948, and resolveOverlayTextColorkeeps the requested colour only if it clears the threshold there; otherwise the colour engine’s dark ink or white replaces it, whichever contrasts more. The Studio requests the overlay title in #ffffff, which is kept at 9.13:1, and the kicker in the handle colour #3f6f63, which is replaced by #ffffff at 9.13:1; the fictional gold, requested as a kicker, is kept at 4.77:1. The doctrine is set out in the design basics guide and the methodology.
How a title is fitted onto the graphics
Titles are not set at a fixed size. fitTextToBox takes a preferred size, a floor and a box, and walks the size down a pixel at a time until the wrapped lines fit. The default title size is 72px; the normaliser clamps titles to 28–104px. With a flat stand-in of 0.52em per character (an example model, not an engine rule) and two fictional example boxes (not the graphics’ real title boxes), “Quiet Hours: The Winter Mixtape” fits a fictional 880×320 box at 72px on 2 lines and shrinks to 54px on one line in a fictional 880×70 strip. A 25-word title cannot fit that strip even at the floor: the engine returns 28px, 2 lines and truncated: true, ending “Nights at the Old Observatory, With Guest Players, Field Re…”. The thumbnail renderer uses the same function for the overlay title.
The Tap-or-Scan card
A QR code is the right answer when your promo is across the room; a link is the right answer when it is already on someone’s screen. The Tap-or-Scan card covers both: it is a self-contained rich-HTML card that renders your campaign visual with the QR for far-away viewers and a tappable link for everyone else. Drop it into a newsletter, a link-in-bio hub, or any page you control. You can preview how the pattern behaves with the Tap-or-Scan tool.
Built for the fictional campaign, the card is 1,718 characters, begins <!doctype html>, references no script or stylesheet — its styles are embedded in a <style> block and the QR travels inside as a data: URL — and carries exactly 1link, the action button; with an event’s calendar link the count becomes 2. Every text field — title, subtitle, call to action, destination, date line, venue and calendar link — passes through escapeHtml: a title typed as Quiet Hours <live> & "friends" is written as Quiet Hours <live> & "friends". The QR data URL is placed as given (it is the Studio’s own rendered image), and the accent and design colours are checked against a six-digit hex pattern rather than escaped.
What the manifest is for
The manifest is a machine-readable inventory of the package: which files were generated, at what dimensions, and from which destination URL. It exists so the ZIP is inspectable — weeks later you can open one file and know exactly what this package was built to promote, without loading every image. It also lets scripts and scheduling tools consume the package programmatically: anything that can parse the manifest can find the right graphic for the right slot without guessing from filenames.
Built for the fictional campaign, manifest.json has 17 top-level fields: generatedBy, generatedAt, title, destination, routingDestination, campaignType, category, price, shortLink, startsAt, timezone, venue, sourceImage, captionPlatforms, design, designSchemaVersion, files. designSchemaVersion is 3. Optional facts not supplied are written as null rather than omitted — here category, price, shortLink, startsAt, timezone, venue— and a blank entry is trimmed to null, so “no price” is distinguishable from “a field this version lacks”. sourceImage carries contentHash, fileName, resolvedUrl, sourceKind; design carries all 13 design settings.
Event campaigns add calendar files
When a campaign carries a date, time, and venue, the package grows two extra artifacts: an ICS file and a Google Calendar URL. The ICS file works with virtually every calendar application, and the URL gives web-first audiences a one-tap add. The point is to shorten the distance between seeing the promo and holding the commitment — a viewer who adds the event to their calendar has a reminder working in your favor, which no graphic alone can do. The format is iCalendar data format per RFC 5545 (source, 2026-10-02); the breadth-of-support sentence is the site’s own August 2026 wording, which no official source states.
Make the fictional campaign an event — 2026-12-04 at 20:00 in Europe/London at The Old Observatory, Hill Lane— and the engine formats the shared date line “Fri, Dec 4 · 8:00 PM (London)”, then writes *-event.ics beginning BEGIN:VCALENDAR with DTSTART:20261204T200000Z, SUMMARY:Quiet Hours: The Winter Mixtape, LOCATION:The Old Observatory\, Hill Lane: the end is 2hours after the start and the venue’s comma is backslash-escaped. The Google Calendar URL is built from the same facts with the parameters action, text, dates, location, details.
Use the caption set per platform
The caption set contains one caption per platform rather than one caption for everywhere, because platforms differ in how links, hashtags, and length behave. Some placements make links clickable in the caption; others ignore them, which is exactly when you point to a link in your profile instead. Tone and pacing differ too: what reads naturally in a short vertical-video caption feels clipped in a longer feed post. Pasting the matching caption takes the same few seconds as pasting a generic one — the difference is that each platform gets copy written for how it actually displays text. Treat the set as a starting draft and adjust voice to taste; the structure is the part worth keeping.
The engine writes captions.txt with 4 headings: INSTAGRAM, FACEBOOK, X, WHATSAPP. For the fictional announcement the Instagram and Facebook captions are 4 paragraphs (title, subtitle, call to action with destination, handle), WhatsApp is 3single-spaced lines without the handle, and X is one line: “Quiet Hours: The Winter Mixtape · Listen now: https://example.com/quiet-hours”. An overlong title leaves the long-form variants intact but trims X to 280 characters ending in an ellipsis.
Questions
- Is the thumbnail in the package really text-free?
- No. "Clean" means no QR code or clickable element. The renderer always draws a kicker and a fitted title; re-render the 1280×720 frame in the thumbnail tool for different words.
- Which QR file goes to print?
- The SVG. The QR tool's SVG carries a nominal pixel width but is drawn as one path in module units inside a viewBox, so it rescales without resampling; the Studio writes the package's SVG separately at a nominal 1024 pixels, level H, with a 3-module margin. The QR tool's PNG presets (512, 1024, 2048 pixels) are the screen-first files; the print readout above gives their printed size at 300 DPI.
- Why does the manifest contain null values?
- The engine writes every optional field and writes null when the campaign did not supply it — here category, price, shortLink, startsAt, timezone, venue — so a missing fact is distinguishable from a field schema version 3 does not define.
- Does the Tap-or-Scan card need anything else to render?
- No. It references no script or stylesheet, and the QR is embedded as a data: URL. The destination and calendar links need a connection when tapped.
- Do the three graphic frames still match the platforms' figures?
- 1080×1080, 1080×1350 and 1080×1920. On 2026-10-02 the square and story were confirmed and the portrait remained inside Instagram's supported 1.91:1–3:4 range; Meta's ads guide now recommends 1440×1800 for 4:5 Facebook feed images.
Everything here runs in your browser: the tools compute on your device and the Studio’s package is assembled on the device. The methodology documents every rule the tools apply.