Personal Brand Post

Bold-opinion square post with a portrait chip, creator name and handle — swap the opinion headline, name, handle, photo and accent.

Type: Image
Format: Instagram Post · 1:1
Orientation: Square

Variablesphoto

Open in editor

Free template · opens in the editor, no account required.

Customize Personal Brand Post

Personal Brand Post is a ready-to-render Content creator / social image design formatted for Instagram Post · 1:1 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

12 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

UNPOPULAR OPINION

titlePreText

Your niche isn't too small.

highlightText

Your offer

titlePostText

is too vague.

creatorNameText

Jordan Vega

creatorHandleText

@jordanbuilds

portraitImageMedia URL

pexels-photo-30133734.jpeg

followLabelText

inkColor

#0D0E12

offWhiteColor

#F1F3F8

mutedColor

#868C9E

accentColor

#5B8DEF

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-social-personal-brand",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#0D0E12",
  "variables": {
    "eyebrow": "UNPOPULAR OPINION",
    "titlePre": "Your niche isn't too small.",
    "highlight": "Your offer",
    "titlePost": "is too vague.",
    "creatorName": "Jordan Vega",
    "creatorHandle": "@jordanbuilds",
    "portraitImage": "https://images.pexels.com/photos/30133734/pexels-photo-30133734.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "followLabel": "FOLLOW",
    "ink": "#0D0E12",
    "offWhite": "#F1F3F8",
    "muted": "#868C9E",
    "accent": "#5B8DEF"
  },
  "visuals": [
    {
      "type": "SVG",
      "width": 1080,
      "height": 1080,
      "position": "center-center",
      "track": 0,
      "svg": "<svg width='1080' height='1080' viewBox='0 0 1080 1080' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='bg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#111621'/><stop offset='0.55' stop-color='#0D0E12'/><stop offset='1' stop-color='#090A0D'/></linearGradient><radialGradient id='gl' cx='0.14' cy='0.12' r='0.7'><stop offset='0' stop-color='{{accent}}' stop-opacity='0.24'/><stop offset='1' stop-color='{{accent}}' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#bg)'/><rect width='1080' height='1080' fill='url(#gl)'/><rect x='40' y='40' width='1000' height='1000' rx='30' fill='none' stroke='#FFFFFF' stroke-opacity='0.08' stroke-width='1.5'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 96,
      "width": 320,
      "height": 48,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='320' height='48' viewBox='0 0 320 48' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='320' height='48' rx='24' fill='{{accent}}' fill-opacity='0.14' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/><path d='M20 24 L30 24 M25 19 L25 29' stroke='{{accent}}' stroke-width='2.4' stroke-linecap='round'/><text x='48' y='31' font-family='Space Grotesk, Arial' font-size='18' font-weight='600' letter-spacing='3' fill='{{accent}}'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 78,
      "y": 268,
      "width": 924,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Manrope"
      },
      "html": "<div style='font-size:82px; font-weight:800; line-height:1.04; letter-spacing:-0.035em; color:{{offWhite}};'>{{titlePre}} <span style='color:{{accent}};'>{{highlight}}</span> {{titlePost}}</div>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 858,
      "width": 920,
      "height": 2,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='920' height='2' viewBox='0 0 920 2' xmlns='http://www.w3.org/2000/svg'><rect width='920' height='1' fill='#FFFFFF' fill-opacity='0.1'/></svg>"
    },
    {
      "type": "SVG",
      "x": 80,
      "y": 896,
      "width": 96,
      "height": 96,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='96' height='96' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><circle cx='48' cy='48' r='47' fill='none' stroke='{{accent}}' stroke-width='2'/></svg>"
    },
    {
      "type": "IMAGE",
      "src": "{{portraitImage}}",
      "x": 86,
      "y": 902,
      "width": 84,
      "height": 84,
      "anchor": "top-left",
      "radius": {
        "tl": 42,
        "tr": 42,
        "bl": 42,
        "br": 42
      },
      "track": 7
    },
    {
      "type": "TEXT",
      "x": 196,
      "y": 908,
      "width": 520,
      "anchor": "top-left",
      "track": 7,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:28px; font-weight:600; color:{{offWhite}};'>{{creatorName}}</div><div style='margin-top:3px; font-size:20px; font-weight:500; color:{{muted}};'>{{creatorHandle}}</div>"
    },
    {
      "type": "SVG",
      "x": 812,
      "y": 916,
      "width": 188,
      "height": 56,
      "anchor": "top-left",
      "track": 7,
      "svg": "<svg width='188' height='56' viewBox='0 0 188 56' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='2' width='188' height='52' rx='26' fill='{{accent}}'/><text x='94' y='36' font-family='Space Grotesk, Arial' font-size='19' font-weight='700' letter-spacing='2.5' fill='{{ink}}' text-anchor='middle'>{{followLabel}}</text></svg>"
    }
  ]
}