# Social and OG images

> Templates for LinkedIn, GitHub, blog headers, and Open Graph cards.

---

LLMS index: [llms.txt](/brand/v2.0.1/llms.txt)

---

## Priority

**LinkedIn and GitHub first**, blog second, Twitter/X as backup. The templates
are sized for those surfaces in that order.

## Template rules

- Backgrounds are **midnight or midnight-dark**, or white with an accent top
  bar.
- **`projectious.work` is always visible.**
- **Never place text over a busy background.**
- An accent glow circle at subtle opacity provides visual interest without
  competing with the text.
- Typography hierarchy is unchanged: Plus Jakarta Sans for headlines, Source
  Sans 3 for body.

<div class="pj-demo"><div class="pj-demo__label">Open Graph card — 1200x630</div>
  <div class="pj-demo__body pj-demo__body--stack">
    
<div class="pj-og">
  <span class="pj-vcard__glow"></span>
  <div class="pj-og__title">Bad software is a decision,<br>not a constraint.</div>
  <div class="pj-og__meta">projectious.work · Cloud · Agile · Agentic AI</div>
</div>

  </div>
</div>


## Open Graph

- 1200×630px.
- Headline at Display weight, capped at roughly 60 characters — longer headlines
  are truncated by most platforms anyway.
- The mark sits bottom-left or top-left, never centred.
- Test the rendering at 320px wide: most impressions are in a mobile timeline.

<div class="pj-rules"><div class="pj-rule pj-rule--do">
  <div class="pj-rule__label">Do</div>
  <p>Keep one message per card. Check contrast against the actual background, not the
design canvas.</p>
</div>
<div class="pj-rule pj-rule--dont">
  <div class="pj-rule__label">Don't</div>
  <p>Fill the card with a screenshot, use more than one accent element, or rely on
text smaller than 24px at 1200×630.</p>
</div>
</div>