linkedin-design

LinkedIn Design

LinkedIn crops aggressively and most viewers are on a phone. Every asset lives or dies on three things: exact dimensions, safe zones, and mobile readability. Get those right before touching style.

Routing

Full spec table (all formats, file sizes, crop behavior): read references/specs.md before producing any format not memorized above.

Design rules that decide outcomes

1. Center-weight banners. Mobile shows only the center ~60% of width.
2. Keep the banner's bottom-left quadrant empty. The profile photo covers it on desktop.
3. One headline plus one subline max on banners. Contrast at least 4.5:1.
4. Carousels ship as PDF, not images. LinkedIn renders PDF pages as swipeable slides at higher quality.
5. Slide 1 is the hook, final slide is the CTA, one idea per slide, 8-12 slides.
6. Carousel text at 28px minimum, inside a central safe area with 80px padding on all sides.
7. Sans-serif for anything read on mobile.
8. Same palette and type across banner, posts, and carousels. Brand consistency is the compounding asset.

Production paths

Canva MCP

1. Search existing templates: search-designs / search-folders.
2. Multi-slide content: request-outline-review, wait for approval, then generate-design-structured.
3. Edits: start an editing transaction, apply operations, preview the thumbnail, get approval, then commit (or cancel).
4. Brand kits: list-brand-kits, pass brand_kit_id into generation for consistent branding.
5. Use custom dimensions from the spec table; do not accept preset sizes that differ.

Code generation

When Canva is unavailable or exact control matters:

• Banners and post images: Python + Pillow at exact pixel dimensions. Render text-heavy art at 2x and downscale.
• Carousels: build each 1080x1350 slide, then assemble one multi-page PDF (Pillow save_all or reportlab).
• Fonts: use locally available high-quality fonts (Outfit, Work Sans, Instrument Sans class for modern; a serif like Lora for warmth; a mono like JetBrains Mono for data). Verify the font file exists before rendering; a silent fallback to a default font ruins the asset.

Theme presets (5 ready palettes with font pairings, from founder-tech to warm-authority): read references/themes.md when the user has no brand colors.

Caption pairing

The asset ships with a text companion. First 210 characters are the hook (visible before "see more"), end with a question, 3-5 hashtags. Offer to write it with every asset.

Verification

Open the final file at 100% and at ~30% zoom (phone simulation). Expect: headline readable at 30%, no critical content outside the safe zone, no text in the banner's bottom-left. For carousels, run pdfinfo (or open the PDF) and expect one page per slide at 1080x1350 and file size under 10MB. Any miss: fix the layout, re-export, recheck.

Completion checklist

• [ ] Dimensions exactly match the spec for the target format
• [ ] Safe zones respected (center 60% banners, 80px padding carousels)
• [ ] Contrast at least 4.5:1, text at mobile-readable sizes
• [ ] Correct file format (PDF for carousels, PNG for text art, JPEG for photos) and under size limits
• [ ] Checked at mobile scale, no spelling errors
• [ ] Hook on slide 1 / banner headline, CTA on final slide
• [ ] Caption offered

Any box unchecked: not done. Fix or say so.

Good vs bad

• Bad banner: logo far left, tagline far right, credentials bottom-left. Mobile crop leaves an empty center; desktop hides the credentials under the profile photo.
• Good banner: headline and one-line value prop dead center within 1200x300, logo small top-right, bottom-left intentionally empty.

Footguns

• Uploading a carousel as multiple images instead of one PDF kills the swipe format. Always merge to PDF.
• Designing banners on desktop proportions: they look fine until a phone crops 40% of the width. Check the center-60% crop explicitly.
• Pure white (#fff) backgrounds glow against LinkedIn's feed chrome. Use a tinted off-white.
• Preset "presentation" sizes (1920x1080) are not LinkedIn carousel sizes. Force 1080x1350 or 1080x1080.