Social profile / banner set from the social-media preset

Anyone setting up or refreshing a brand’s profiles needs six sizes at once. Twitter banner, X profile, LinkedIn cover, Instagram square, Instagram story, Bluesky banner. The tagline has to be the same on all of them. This is a kit, not six separate design files.

The person doing this might be the same person who later refreshes the Bluesky banner on its own weekly cadence. Today they need the whole set. Name, tagline, handle, accent. One file. Six native sizes.

The job is one export that writes a file for each platform at that platform’s native size. You fill in the brand fields once. You run the command. You upload the set. When the tagline changes, you edit one file and export again. You do not open six frames and type the new line six times.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same fields, many artboards, many images. There is no batch product, no queue, no orchestrator.

The component is the social-media preset’s page. Twitter banner, X profile, LinkedIn cover, IG square, IG story, and Bluesky banner each have their own .jsx with their own meta.dimensions. Six artboards, six sizes, one page. Dimensions are per-asset, which is why a banner and a story can live in the same export without stretching.

Data is shared brand fields via one --data brand.json applied across the run: name, tagline, handle, accent. --data applies to every artboard in the run and is never written back into .lerret/. The six sizes stay in sync because they read the same file. Change the tagline once.

The images are PNGs at each platform’s native size, nested by group.

You use Lerret because six platform sizes stay in sync from one set of fields. Change the tagline once and re-export. There is no chance of five profiles saying one thing and the sixth saying last quarter’s thing. A design file with six frames will drift the first time someone updates five of them. Screenshots from each site will not share type or crop.

npx @lerret/cli@latest export --data brand.json

Start a project with npx create-lerret@latest. More in the use cases index.