Quote Post

Editorial square quote card with a big serif pull-quote, author chip and gradient monogram — swap the quote, author, role, handle and accent.

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

Variables

Open in editor

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

Customize Quote Post

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

11 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

ON CRAFT

quoteText

Design is not decoration. It is the clearest argument you will ever make.

authorNameText

Ada Whitfield

authorRoleText

Design Lead, Northwind

brandHandleText

@northwind.studio

monogramText

paperColor

#F4EFE4

inkColor

#1A1712

mutedInkColor

#6E6656

accentColor

#7A2E2E

foilColor

#B08948

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-quote",
  "resolution": "instagram-post",
  "outputFormat": "png",
  "backgroundColor": "#F4EFE4",
  "variables": {
    "eyebrow": "ON CRAFT",
    "quote": "Design is not decoration. It is the clearest argument you will ever make.",
    "authorName": "Ada Whitfield",
    "authorRole": "Design Lead, Northwind",
    "brandHandle": "@northwind.studio",
    "monogram": "A",
    "paper": "#F4EFE4",
    "ink": "#1A1712",
    "mutedInk": "#6E6656",
    "accent": "#7A2E2E",
    "foil": "#B08948"
  },
  "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='pg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='#F8F3E9'/><stop offset='1' stop-color='#ECE4D4'/></linearGradient><radialGradient id='fg' cx='0.86' cy='0.1' r='0.7'><stop offset='0' stop-color='{{foil}}' stop-opacity='0.16'/><stop offset='1' stop-color='{{foil}}' stop-opacity='0'/></radialGradient></defs><rect width='1080' height='1080' fill='url(#pg)'/><rect width='1080' height='1080' fill='url(#fg)'/><rect x='40' y='40' width='1000' height='1000' rx='30' fill='none' stroke='{{ink}}' stroke-opacity='0.1' stroke-width='1.5'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 66,
      "y": 118,
      "width": 500,
      "anchor": "top-left",
      "track": 2,
      "opacity": 0.14,
      "text": "“",
      "style": {
        "fontFamily": "Fraunces",
        "fontSize": "320px",
        "fontWeight": "600",
        "lineHeight": "1",
        "color": "{{accent}}"
      }
    },
    {
      "type": "SVG",
      "x": 88,
      "y": 104,
      "width": 250,
      "height": 46,
      "anchor": "top-left",
      "track": 4,
      "svg": "<svg width='250' height='46' viewBox='0 0 250 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='250' height='46' rx='23' fill='{{accent}}' fill-opacity='0.09' stroke='{{accent}}' stroke-opacity='0.45' stroke-width='1.2'/><circle cx='27' cy='23' r='5' fill='{{accent}}'/><text x='46' y='30' font-family='Space Grotesk, Arial' font-size='17' font-weight='600' letter-spacing='3' fill='{{accent}}'>{{eyebrow}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 90,
      "y": 336,
      "width": 908,
      "anchor": "top-left",
      "track": 5,
      "style": {
        "fontFamily": "Fraunces"
      },
      "html": "<div style='font-size:64px; font-weight:600; line-height:1.14; letter-spacing:-0.01em; color:{{ink}};'>{{quote}}</div>"
    },
    {
      "type": "SVG",
      "x": 90,
      "y": 862,
      "width": 900,
      "height": 2,
      "anchor": "top-left",
      "track": 6,
      "svg": "<svg width='900' height='2' viewBox='0 0 900 2' xmlns='http://www.w3.org/2000/svg'><rect width='900' height='1' fill='{{ink}}' fill-opacity='0.14'/></svg>"
    },
    {
      "type": "SVG",
      "x": 90,
      "y": 902,
      "width": 66,
      "height": 66,
      "anchor": "top-left",
      "track": 7,
      "svg": "<svg width='66' height='66' viewBox='0 0 66 66' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='mg' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='{{foil}}'/><stop offset='1' stop-color='{{accent}}'/></linearGradient></defs><circle cx='33' cy='33' r='33' fill='url(#mg)'/><text x='33' y='44' font-family='Georgia, serif' font-size='32' font-weight='600' fill='{{paper}}' text-anchor='middle'>{{monogram}}</text></svg>"
    },
    {
      "type": "TEXT",
      "x": 176,
      "y": 906,
      "width": 540,
      "anchor": "top-left",
      "track": 7,
      "style": {
        "fontFamily": "Space Grotesk"
      },
      "html": "<div style='font-size:27px; font-weight:600; color:{{ink}};'>{{authorName}}</div><div style='margin-top:4px; font-size:19px; font-weight:500; color:{{mutedInk}};'>{{authorRole}}</div>"
    },
    {
      "type": "SVG",
      "x": 742,
      "y": 910,
      "width": 252,
      "height": 50,
      "anchor": "top-left",
      "track": 7,
      "svg": "<svg width='252' height='50' viewBox='0 0 252 50' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='252' height='50' rx='25' fill='{{ink}}' fill-opacity='0.05' stroke='{{ink}}' stroke-opacity='0.12' stroke-width='1'/><circle cx='26' cy='25' r='6' fill='{{accent}}'/><text x='44' y='32' font-family='Space Grotesk, Arial' font-size='18' font-weight='500' fill='{{mutedInk}}'>{{brandHandle}}</text></svg>"
    }
  ]
}