Social Post Graphics

You make the graphics the marketing department posts: the right size for each platform, one clear message, the brand's colours and type, and words that read at a glance on a phone. You build them as HTML and CSS, render them with headless Chromium on your computer, and check every one with your own eyes before the owner sees it. The standard is what a good in-house designer ships: consistent across a campaign, legible at thumbnail size, factually exact, and editable next week.

When to use

• "Make an Instagram post announcing the new opening hours."
• "Turn this blog post into a LinkedIn carousel."
• "We need a story graphic for Friday's event", "a quote card from this customer review", "a stat card for our results".
• "Make the link preview image for the new page" (Open Graph 1200 x 630).
• "Resize this post for Facebook, X and Pinterest."

What you need

• The message: what happened or is offered, the one action you want, and the facts (dates, prices, names) from the owner or their source. Ask with clarify for anything missing; never fill gaps with invented facts.
• The platforms. Sizes and safe zones: references/platform-sizes.md (confirm current specs with web_search before a campaign).
• The brand: colours, fonts and logo files from the owner's brand kit, their site's CSS, or the owner. Logo as SVG or a large PNG.
• Imagery: the owner's photos, image_generate, or openly licensed photos (licence rules: load media-use with skill_view and read its sources-and-licences reference).
• Your computer set up for graphics: run the check in references/setup.md first, every time (installs outside /home/user are lost when the computer is rebuilt). Copy scripts/render.py, scripts/gfx_check.py, scripts/get_font.py and the template you need into <job>/tools/ and <job>/ as references/setup.md describes.

Method

1. Write the brief in five lines.
   • Before designing: message, audience, action, platforms and sizes, deadline.
   • One graphic carries one message; if the owner gives you five points, propose a carousel.
2. Write the words for the graphic.
   • Headline up to about 8 words, support line up to about 15, an action or handle.
   • The caption carries the rest.
   • Use the owner's voice and check every fact against the source.
3. Pick the layout from the content
   • (references/layouts.md): photo with headline, bold type card, quote card, stat card, product on colour, carousel, story, event.
   • Use one of the two tested templates when it fits (references/templates/photo-headline-post.html, references/templates/carousel-slides.html).
4. Set the brand tokens.
   • Put them in CSS variables at the top of the HTML (background, ink, accent, scrim tint) and load the fonts from files: ~/.venvs/gfx/bin/python tools/get_font.py "Space Grotesk" 400,700 fonts/ prints the @font-face lines to paste.
   • Two typefaces at most.
5. Get the imagery.
   • image_generate for backgrounds, scenes and textures: describe subject, light, palette and the empty area for text, and ask for no text and no logos. Aspect portrait or square, then crop with CSS object-fit: cover and object-position.
   • The owner's or licensed photos for anything real (their product, team, place). Never a generated image that could pass for a real customer or event.
   • Download the result into the job and look at it with vision_analyze before using it.
6. Build on the grid.
   • 1080 px wide: outer margin 64 to 80 px; headline 88 to 140 px; body 34 to 44 px; nothing under 28 px.
   • Text over photos sits on a calm area or a scrim (references/legibility-and-brand.md).
7. Render at the exact size: ~/.venvs/gfx/bin/python tools/render.py post.html out/2026-10-06-topic-instagram-1080x1350.png --size 1080x1350 For a LinkedIn carousel: tools/render.py carousel.html out/carousel.pdf --pdf. Photo-led posts: convert to JPEG quality 90 without chroma subsampling (references/platform-sizes.md).
8. Check it like a reviewer.
   • vision_analyze the full render: typos, clipped or overlapping text, awkward line breaks, logo legible, nothing in the margins, image artefacts.
   • tools/gfx_check.py contrast for every text colour against its background (4.5:1 body, 3:1 headlines 72 px and up).
   • tools/gfx_check.py preview out/post.png --widths 360,160, then vision_analyze both: every word readable at 360, the focal point clear at 160.
   • Stories and Reels: tools/gfx_check.py zones story.png --top 250 --bottom 420 --side 60; nothing in red. Fix and re-render until all pass.
9. Make the other sizes.
   • By re-laying-out for each ratio, not by cropping.
   • Keep content and tokens identical across the set.
10. Hand over.

• With show_card (type media, one item per file, caption = platform and size), the file paths, alt text for each, and a suggested caption if the owner wants one.
• Posting is the owner's call; schedule or post only when they ask and the account is connected.

Output

• <job>/out/ with one file per platform and size, named <yyyy-mm-dd>-<topic>-<platform>-<w>x<h>.<png|jpg|pdf>.
• The HTML source and fonts next to them, so the graphic can be edited and re-rendered.
• For each file: alt text (what it shows, plus the words on it), and any credit line a licensed photo needs.
• A one-line note of anything the owner must check (a price, a date, a quote's permission).

Checks before you finish

• Size is exact for each platform (render.py prints it), and the file type suits the content.
• Every word is spelled right and matches the source; dates, times and prices are correct.
• Contrast passes for every text element; the 360 px preview reads; the 160 px preview still shows one focal point.
• No text or logo in a platform's UI band or within the outer margin.
• Logo is the owner's file, unaltered, legible; colours are the brand's.
• Every photo is the owner's, generated (recorded as such) or licensed with its credit noted.

Pitfalls

• Too many words. A graphic is not the caption. Cut to the hook; move detail to the caption or a carousel.
• Text across a busy photo. Choose a calm area, add a scrim or a panel; a text shadow alone is not enough.
• Generated lettering. Image models misspell; set all text in HTML.
• Web fonts that never loaded. Load fonts from files; if the render shows a fallback face, the font path is wrong.
• Cropping one design into every ratio. Rebuild the layout per format; cropped stories lose their text to the UI.
• Off-brand accents. Accent colours that fail as text on white belong in fills, not words.
• Invented quotes, stats or reviews. Only what the owner can source and has permission to use.
• Logo on a bright photo with no backing. Give it a scrim or use the reversed version.
• Uploading at 2x or odd sizes. Platforms recompress; render at the exact canvas size at scale 1.
• No alt text. Every graphic ships with alt text that includes the words on it.