Social image templates

Social image templates

Turns the brand's colors, fonts, and logo into three ready-to-edit SVG templates. The script handles the fiddly parts: exact sizes, story safe zones, text contrast, and fitting the headline.

When to use

• A launch, blog post, event, or announcement needs a share image.
• The site has no Open Graph image, or each page needs its own.
• "Make me a LinkedIn graphic for this post", "OG image for the new landing page", "story version of this announcement".
• Not for photo editing or illustration. These are clean type-led cards.

Inputs

1. Brand guide with a tokens block (brand.md or docs/brand.md). Needs at least color.primary. Also uses color.accent, color.ink, color.paper, font.heading, font.body, name, and logo.primary. No guide: offer brand-guide-builder first.
2. Headline, 4 to 10 words. If the user gives a whole post, write three headline options, pick the strongest, and say which you chose.
3. Subtitle, one line on what the reader gets. Optional.
4. Footer, usually the domain. Defaults to the brand name.
5. Style: brand (primary color background, the default), light, or dark.

Steps

1. Check the tokens. Read the guide's tokens block. If color.primary is missing or not a hex color, stop and ask for it.

2. Run the generator.

   node scripts/make-templates.mjs brand.md social-templates --title "Cut no-shows by a third" --subtitle "Two-way text reminders, live today" --footer "yourdomain.com"

   • The logo from logo.primary is embedded so the SVG works anywhere. Add --link-logo to reference the file instead (smaller, but the logo must travel with the SVG).
   • Use --logo path/to/logo.svg if the guide has no logo path.
3. Read social-templates/templates.json. Check text_contrast (must be 4.5 or more) and warnings. If contrast is low, rerun with --style light or --style dark and say why. If the title shrank or runs long, offer a shorter headline.
4. Show the result. Open or describe each file and the size it is for. If the user wants several posts, run once per headline into subfolders like social-templates/launch/.
5. Explain export. SVG is the editable master. For PNG: open in a browser and screenshot at 100%, or open in Figma and export at 1x. Fonts must be installed (or loaded) where the SVG is rendered.

Output format

Made 3 templates in social-templates/ (brand style, text contrast 5.3:1)

| File | Size | Use for |
| --- | --- | --- |
| og-1200x630.svg | 1200x630 | Link previews: set as og:image |
| square-1080.svg | 1080x1080 | LinkedIn and Instagram posts |
| story-1080x1920.svg | 1080x1920 | Stories and Reels |

Headline used: "<title>"
Notes: <logo embedded, or wordmark used because no logo was found>
To change the text later: edit the #title and #subtitle elements, or rerun with a new --title.

Guardrails

• Use only colors and fonts from the tokens. Never add stock photos, gradients, or effects the guide does not allow.
• Never ship a template with text contrast below 4.5:1. Switch style or ask.
• Do not recolor or redraw the logo. If there is no logo file, use the wordmark and say so.
• Keep text inside the story safe zone (top 250 px and bottom 340 px are covered by app UI). The script does this; do not move text there by hand.
• Headlines are claims. Do not invent numbers or results for them; use only what the user said.

Social image templates

Get clean, on-brand share images in seconds. This kit reads your brand colors, fonts, and logo from brand.md and makes three editable SVG templates: a link preview, a square post, and a story.

Who it is for: founders, marketers, and anyone who posts launches and announcements without a designer on call.

Example

Ask: "Make social images for our launch: Cut no-shows by a third with two-way text reminders."

Claude runs:

node scripts/make-templates.mjs brand.md social-templates --title "Cut no-shows by a third with two-way text reminders" --footer "yourdomain.com"

and you get:

Each one uses your primary color, heading font, accent bar, and logo, with white or dark text picked for contrast (checked against the 4.5:1 guideline). templates.json records the colors, contrast, and any notes. Try it on examples/brand.md.

What it can access

• Reads brand.md or docs/brand.md, and your logo from assets/ or brand/.
• Writes only inside social-templates/.
• Runs one script, scripts/make-templates.mjs (Node, no dependencies). No network.

Setup

None. Needs Node 18 or newer and a brand guide with a tokens block. Use brand-guide-builder to make one.