indigoai-us/social-graphic

Social Graphic Generator

Generate square HTML social cards for HQ update posts. Output: self-contained HTML file at workspace/social-drafts/images/{date}-{slug}/.

Design System

Canvas

• 1080x1080px square
• Dark background: #0d1117 card on #0a0c10 body
• Border: 1px solid #1b1f27, 12px radius
• Padding: 56px 64px

Typography

• Font: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace
• Tree items: 17px, line-height 2.05
• Descriptions: 15px italic, right-aligned
• Headers/badges: 13px uppercase, letter-spacing 2px
• Base text color: #9198a1
• Descriptions: #3d434c
• Pipes/connectors: #21262d

Color System (muted, desaturated)

Use dot indicators (8px circles) before badges, and folder colors for tree items:

| Category | Dot color | Folder color | Badge BG | Badge border | |----------|-----------|-------------|----------|-------------| | Default | — | — | #1f2937 | #2a3140 |

Assign each category a unique muted hue. Examples from dev-team:

• Steel blue: dot #6e8ab5, folder #8dabc4
• Sage green: dot #7aad7e, folder #8fbc8f
• Dusty purple: dot #b09cd2, folder #c0aee0
• Warm ochre: dot #c49464, folder #d4a574
• Rose: dot #b87ea0, folder #c48fad

All badges share the same dark #1f2937 background with #7d8590 text. Color differentiation comes from the dot only.

Layout Structure

1. Header: macOS traffic light dots (red/yellow/green at 50% opacity) + title in uppercase
2. Badges: Row of category labels with colored dot indicators
3. Tree: Directory tree using ├──, │, └── connectors. Each row has left (name) and right (description)
4. Footer: Stats on left, tagline on right, separated by border-top: 1px solid #161b22
5. Logo: {company} logo SVG in bottom-right, 80px wide, opacity 0.35

{company} Logo (inline SVG)

<svg width="106" height="25" viewBox="0 0 106 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.6743 1.19913C11.9323 0.94113 11.7496 0.5 11.3847 0.5H7.9097C7.80109 0.5 7.69692 0.543148 7.62012 0.619951L0.119951 8.12012C-0.0399837 8.28005 -0.0399837 8.53936 0.119951 8.69929L11.1243 19.7036C11.2842 19.8635 11.5435 19.8635 11.7034 19.7036L22.7078 8.69929C22.8677 8.53936 22.8677 8.28005 22.7078 8.12012L20.6806 6.093C20.6642 6.07651 20.6357 6.08382 20.6265 6.10529C20.6066 6.15222 20.5775 6.19619 20.5392 6.23447L11.7034 15.0702C11.5435 15.2301 11.2842 15.2301 11.1243 15.0702L4.75335 8.69929C4.59341 8.53936 4.59341 8.28005 4.75335 8.12012L8.37509 4.49838L8.37651 4.49695L11.6743 1.19913Z" fill="white"/>
<path d="M24.6269 0.619951C24.5501 0.543148 24.446 0.5 24.3373 0.5H17.329C17.2204 0.5 17.1163 0.543148 17.0395 0.619951L9.53929 8.12012C9.37936 8.28005 9.37936 8.53936 9.53929 8.69929L11.2747 10.4347C11.4346 10.5946 11.6939 10.5946 11.8538 10.4347L17.3549 4.93357C17.3555 4.93298 17.3565 4.93298 17.3571 4.93357C17.3577 4.93416 17.3586 4.93416 17.3592 4.93357L18.3965 3.89626C18.4734 3.81945 18.5775 3.77631 18.6861 3.77631H22.9803C23.0889 3.77631 23.193 3.81945 23.2698 3.89626L27.4937 8.12012C27.6536 8.28005 27.6536 8.53936 27.4937 8.69929L21.6692 14.5238C21.6664 14.5265 21.6636 14.5292 21.6608 14.532L14.1294 22.0634C13.9695 22.2233 13.9695 22.4826 14.1294 22.6425L15.8669 24.3801C16.0269 24.54 16.2862 24.54 16.4461 24.3801L21.1146 19.7116C21.1173 19.709 21.1201 19.7063 21.1228 19.7036L32.1271 8.69929C32.287 8.53936 32.287 8.28005 32.1271 8.12012L24.6269 0.619951Z" fill="white"/>
<path d="M42.624 2.45264V18.3013H39.447V2.45264H42.624Z" fill="white"/>
<path d="M54.9944 6.9571C55.9167 7.90327 56.378 9.22409 56.3784 10.9196V18.3019H53.1996V11.3533C53.1996 10.3542 52.95 9.58604 52.4507 9.04877C51.9514 8.5115 51.2708 8.24286 50.4087 8.24286C49.5307 8.24286 48.8384 8.5115 48.3317 9.04877C47.8251 9.58604 47.5718 10.3542 47.5718 11.3533V18.3013H44.3948V5.72241H47.5718V7.28931C48.0029 6.73847 48.5592 6.29852 49.1944 6.00601C49.8732 5.6914 50.6137 5.5325 51.3618 5.54092C52.8608 5.54174 54.0717 6.0138 54.9944 6.9571Z" fill="white"/>
<path d="M58.4321 8.58305C58.9388 7.59873 59.6309 6.84184 60.5085 6.31237C61.3919 5.78143 62.4054 5.50646 63.4358 5.51815C64.245 5.51661 65.0439 5.699 65.7723 6.05152C66.5134 6.40711 67.1035 6.88019 67.5425 7.47078V1.49908H70.765V18.3013H67.5425V16.4391C67.149 17.0604 66.5966 17.56 65.8855 17.9377C65.1743 18.3154 64.3499 18.5047 63.4125 18.5055C62.3861 18.5149 61.3783 18.2312 60.5073 17.6879C59.6301 17.1429 58.9379 16.3747 58.4309 15.3834C57.9238 14.3921 57.6705 13.253 57.6709 11.966C57.6717 10.695 57.9255 9.56736 58.4321 8.58305ZM67.1121 10.0251C66.831 9.49454 66.4063 9.05385 65.8867 8.75346C65.3837 8.46113 64.8119 8.30824 64.2302 8.31052C63.6463 8.30496 63.072 8.45975 62.5698 8.75804C62.0677 9.05633 61.6569 9.48669 61.3822 10.0023C61.0723 10.5548 60.9174 11.2093 60.9174 11.966C60.9174 12.7227 61.0723 13.3851 61.3822 13.9531C61.6646 14.4915 62.0883 14.9428 62.6076 15.2585C63.0964 15.5565 63.6579 15.7136 64.2302 15.7126C64.8118 15.7148 65.3835 15.5621 65.8867 15.2702C66.4063 14.9698 66.831 14.5292 67.1121 13.9986C67.4146 13.4462 67.5661 12.7838 67.5665 12.0115C67.5669 11.2393 67.4154 10.5771 67.1121 10.0251Z" fill="white"/>
<path d="M73.1826 3.69041C73.0066 3.5169 72.8667 3.31009 72.7713 3.08201C72.6759 2.85394 72.6267 2.60915 72.6267 2.36189C72.6267 2.11463 72.6759 1.86984 72.7713 1.64176C72.8667 1.41369 73.0066 1.20688 73.1826 1.03337C73.5516 0.67861 74.0168 0.500823 74.5784 0.500003C75.1399 0.499183 75.6052 0.676969 75.9741 1.03337C76.1502 1.20688 76.29 1.41369 76.3854 1.64176C76.4809 1.86984 76.53 2.11463 76.53 2.36189C76.53 2.60915 76.4809 2.85394 76.3854 3.08201C76.29 3.31009 76.1502 3.5169 75.9741 3.69041C75.6027 4.04599 75.1375 4.22378 74.5784 4.22378C74.0193 4.22378 73.554 4.04599 73.1826 3.69041ZM76.1444 5.72055V18.3013H72.9668V5.7224L76.1444 5.72055Z" fill="white"/>
<path d="M85.9926 6.07428C86.7038 6.4434 87.2638 6.92407 87.6724 7.5163V5.72239H90.8697V18.3917C90.8697 19.5577 90.635 20.5984 90.1657 21.5139C89.6964 22.4293 88.993 23.1558 88.0555 23.6935C87.1172 24.2308 85.9826 24.4996 84.6516 24.5C82.8661 24.5 81.4023 24.0837 80.2603 23.2512C79.1183 22.4186 78.4717 21.2834 78.3204 19.8454H81.4746C81.6386 20.4196 81.9979 20.8773 82.5525 21.2186C83.1071 21.5598 83.7765 21.7302 84.5606 21.7298C85.4833 21.7298 86.2322 21.4535 86.8073 20.9011C87.3824 20.3487 87.6694 19.5122 87.6681 18.3917V16.4391C87.2582 17.0297 86.6946 17.5218 85.9773 17.9156C85.2599 18.3093 84.4401 18.5062 83.5178 18.5062C82.4916 18.5154 81.4841 18.2318 80.6132 17.6886C79.736 17.1435 79.0439 16.3753 78.5368 15.384C78.0298 14.3927 77.7764 13.2536 77.7769 11.9666C77.7769 10.6952 78.0302 9.56736 78.5368 8.58304C79.0435 7.59873 79.7319 6.84184 80.6021 6.31236C81.4716 5.78329 82.4435 5.51855 83.5178 5.51814C84.4569 5.51814 85.2819 5.70352 85.9926 6.07428ZM87.2181 10.0251C86.937 9.49453 86.5123 9.05385 85.9926 8.75345C85.4897 8.46113 84.9179 8.30823 84.3362 8.31052C83.7522 8.30496 83.178 8.45975 82.6758 8.75804C82.1736 9.05632 81.7629 9.48668 81.4882 10.0023C81.1783 10.5547 81.0233 11.2093 81.0233 11.966C81.0233 12.7227 81.1783 13.3851 81.4882 13.9531C81.7706 14.4915 82.1942 14.9428 82.7136 15.2585C83.2023 15.5565 83.7639 15.7136 84.3362 15.7126C84.9178 15.7148 85.4895 15.5621 85.9926 15.2702C86.5123 14.9698 86.937 14.5292 87.2181 13.9986C87.5206 13.4462 87.672 12.7838 87.6724 12.0115C87.6728 11.2393 87.5214 10.5771 87.2181 10.0251Z" fill="white"/>
<path d="M95.3878 17.6996C94.4271 17.1701 93.6363 16.3786 93.1073 15.4173C92.5543 14.4329 92.2782 13.2977 92.2791 12.0115C92.2799 10.7254 92.5635 9.59013 93.13 8.60581C93.6765 7.64227 94.4824 6.85166 95.456 6.32405C96.4398 5.78678 97.5365 5.51814 98.7462 5.51814C99.9558 5.51814 101.053 5.78678 102.037 6.32405C103.01 6.85201 103.816 7.64254 104.363 8.60581C104.93 9.59013 105.214 10.7254 105.214 12.0115C105.214 13.2977 104.923 14.4329 104.34 15.4173C103.779 16.3812 102.962 17.1711 101.98 17.6996C100.989 18.2369 99.881 18.5055 98.6558 18.5055C97.4453 18.5055 96.356 18.2369 95.3878 17.6996ZM100.278 15.3151C100.785 15.035 101.19 14.615 101.492 14.0552C101.795 13.4954 101.946 12.8142 101.946 12.0115C101.946 10.8164 101.632 9.8969 101.005 9.253C100.708 8.94098 100.351 8.69402 99.9541 8.52785C99.5575 8.36167 99.1306 8.2799 98.7007 8.28775C97.7931 8.28775 97.033 8.60951 96.4201 9.253C95.8073 9.89649 95.5013 10.816 95.5022 12.0115C95.5022 13.2075 95.801 14.1272 96.3986 14.7707C96.9963 15.4142 97.7491 15.7357 98.657 15.7353C99.2246 15.737 99.783 15.5923 100.278 15.3151Z" fill="white"/>
</svg>

Place in footer area, right-aligned, at low opacity to subtly brand without dominating.

Template Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  /* See design system above for all values */
</style>
</head>
<body>
<div class="card">
  <div>
    <div class="header">
      <div class="dots"><!-- traffic lights --></div>
      <span class="title">{TITLE}</span>
    </div>
    <div class="badges">
      <!-- One badge per category with colored dot -->
    </div>
  </div>

  <div class="tree">
    <!-- Tree rows: .row > .left (pipe + folder name) + .desc -->
    <!-- Use section-gap divs between categories -->
  </div>

  <div class="footer">
    <span class="footer-left">{stats}</span>
    <span class="footer-right">{tagline}</span>
    <svg class="logo"><!-- {company} logo --></svg>
  </div>
</div>
</body>
</html>

Process

1. Determine what to visualize (workers, features, architecture)
2. Group items into 3-5 color-coded categories
3. Pick muted hue pairs (dot + folder) for each category
4. Build tree structure with ├── / └── connectors
5. Add descriptions on the right (short, italic, muted)
6. Include {company} logo in footer at 0.35 opacity
7. Save to workspace/social-drafts/images/{date}-{slug}/{name}.html
8. Open in browser: open {path} or use agent-browser for screenshot

Screenshot to PNG

Use agent-browser to capture the final graphic:

agent-browser --allow-file-access open file://{absolute-path-to-html}
agent-browser screenshot --full {output-dir}/{name}.png
agent-browser close

Reference

Working example: workspace/social-drafts/images/2026-02-11-hq-v53/dev-team-pipeline.html