# Dimensions, safe zones and export resolution

## Supported canvases

| Size (px) | Ratio | Platform / use | Shape the templates use |
|---|---|---|---|
| **1080 × 1080** | 1:1 | Instagram, Facebook, Threads square post; carousel slides | square |
| **1080 × 1350** | 4:5 | Instagram & Facebook portrait feed (**default**; largest feed footprint) | portrait |
| **1080 × 1920** | 9:16 | Stories, Reels cover, TikTok, Facebook Stories, vertical video frame | story |
| 1200 × 675 | 16:9 | X / Twitter landscape post | landscape |
| 1200 × 627 | 1.91:1 | LinkedIn feed post, Facebook link image | landscape |
| 1280 × 720 | 16:9 | YouTube thumbnail | landscape |
| 1000 × 1500 | 2:3 | Pinterest pin | portrait |

Each template reads the size and switches to the right layout. Landscape sizes put text and visual side by side. Tall sizes stack them.

## Safe zones

| Canvas | Safe area (critical text, logo, CTA) | Why |
|---|---|---|
| Feed, landscape, pin | Central **80%**: 10% margin on every side (108px on 1080 wide, 135px top/bottom on 1350 tall) | Feed crops, rounded corners, profile overlays |
| Story 1080×1920 | 10% left/right (108px), **13% top and bottom (≈250px)** | Profile bar at the top, reply bar and stickers at the bottom |
| Reels cover | Keep text in the centre 1080×1350 of the 1080×1920 frame | The profile grid crops Reels covers to 4:5 (and sometimes 1:1) |
| YouTube thumbnail | Keep the bottom-right ~200×60px clear | Video length badge |

Toggle **Safe area** in any template's toolbar to see the zone as a dashed red box. Backgrounds and photos should bleed past it. Text, logos and CTAs should not.

## Text sizes

Sizes are in **canvas units**: 1u = 1px on a 1080px canvas. They scale automatically. Square and landscape use the shorter side; portrait runs 6% larger and story 15% larger, so they fill the extra height.

| Element | Size at 1080 | Minimum (brief) | Notes |
|---|---|---|---|
| Headline (`.pm-h1`) | 66–112px depending on template and shape | 24px | 2–3 lines max. Brand font (Anton) runs 18% larger. |
| Subhead (`.pm-h2`) | 52–58px | 24px | |
| Big number (stat, price) | 150–290px | — | One per post |
| Body (`.pm-body`) | 30px (26–28 landscape) | 16px | ≤ 3 lines |
| CTA button | 28px bold | 16px | Touch-friendly pill |
| Eyebrow / badge | 22px bold, caps, tracked | 16px | ≤ 4 words |
| Small print / source | 22px | 16px | Use sparingly |

On landscape canvases the scale factor is 0.58–0.67, so body text renders at about 17–19px. That still clears the 16px floor.

## Image cropping

- Supply photos **larger than the canvas**: at least 1080 px on the short side, 2160 px ideal for 2x exports.
- Every image uses `object-fit: cover`, so it fills its frame and crops the overflow. Set `--img-pos` to choose what stays in frame: `center 20%`, `right top`, `30% 50%`.
- **Two-column grid:** the image column is about 40–45% wide and full height. Use vertical photos with the subject centred.
- **Image overlay:** text sits in the lower 45%. Choose photos with the subject in the **upper half**, or use the *Top* layout for photos with the subject low.
- **Horizontal split:** the photo band is 40–60% of the height and full width (landscape sizes switch to left/right). Use wide photos with the subject centred.
- **Photo background (any template):** the whole photo sits under a flat scrim, so composition matters less. Calm, uncluttered photos work best.
- **Story:** compose for 9:16. The same photo used at 4:5 loses about 30% of its height.
- Avoid: text across faces, logos or hands; tight crops through heads; busy patterns behind text.
- No photo yet? The slot shows a solid brand colour and a label saying what kind of photo it needs.

## Export resolution

| Output | Use | Command |
|---|---|---|
| PNG @1x | Quick previews, Messenger, Viber | `node export/export-png.js … --scales=1` |
| **PNG @2x** | **Posting to Facebook/Instagram** (crisper after platform compression) | default: both 1x and 2x |
| PDF (vector) | Print, sharing proofs, Canva import | `node export/export-pdf.js …` |

- 2x files are 2160×2700 for a 1080×1350 post. Instagram downsizes to 1080 wide, which stays sharp.
- Facebook and Instagram recompress uploads. PNG keeps text sharper than JPEG for text-heavy posts. For photo-heavy posts a high-quality JPEG (90%+) makes smaller files.
- PDFs are exactly the canvas size in CSS pixels (1080×1350 px = 810×1012.5 pt). For print, export at 2x PNG or scale the PDF in your print software.