---
name: social-media-design
description: Design any social or content image in the Built for SaaS (BFS) style - Instagram, LinkedIn (posts + PDF carousels), X, Threads, stories/reels, carousels, blog thumbnails, article heroes, og:image/link cards, video thumbnails. ALWAYS use when Sam asks to create, make, design or change a post, carousel, slide, social graphic, thumbnail, cover, banner or blog image, even if he doesn't name a platform. Not for client brand work.
---

# Social media design (BFS)

Live reference with every post, rule and size: https://bfs-post-system.pages.dev. Load references only when needed:
- `references/full-spec.md`: the complete spec (frame numbers, tokens, components, templates, formats, export). Read it before building a new template or when a number below isn't enough.
- `references/build.md`: code, commands, QA gate and mobile capture. Read it before you build or export.

Code lives in `C:\Users\darkh\agency\clients\built-for-saas\social-posts\`. Approved sets:
- **S3** (`designs-v16.js`): feed posts.
- **S3C**: pillar covers.
- **S3F** (`designs-v17.js`): story, og, X landscape, blog thumbnail, article hero, video thumbnail.

Everything else is history.

## Workflow
1. **Brief.** Settle three things:
   - pillar: Work, Design, Dev, Conversion, Process, Wins, Learn or Text
   - platform(s)
   - one idea
   Ask only if the topic is unclear.
2. **Pick the closest template** from the list below and reuse it. A new template is the exception.
3. **Write the copy.**
   - Headline: one idea, ≤ 7 words.
   - Subtext: the point or the source, 1–2 lines.
   - Facts, numbers, names and quotes only from builtforsaas.com or Sam. Never invent them. Mark copy you wrote as a draft.
4. **Collect real visuals.**
   - BFS case shots: `assets/work`, or `linkedin-banner/work/*-1600w.webp`.
   - Real mobile captures: `assets/mobile`.
   - Real chat screenshots from Sam.
   - Never describe a UI in a box instead of showing it.
5. **Build → export at 2× → compress → `qa.mjs` must pass.** Then look at the PNG at full size yourself and zoom into the small parts.
6. **Show Sam the PNG.** One change at a time. Never publish or post anything yourself.

## Frame (never changes per post)
Canvas 1080×1350, light only, Geist + Geist Mono.
- **Top bar (0–72):** grey dots, "builtforsaas.com" pill, @builtforsaas.
- **Guides:** dashed at x 64 / 1016, with blue 8px joints.
- **Header at x 104:**
  - pillar pill "Pillar · label"
  - headline 66/1.02, weight 680, −0.045em, #141618
  - subtext 25/1.45, #5C6169
- **Visual area:** x 64–1016, ending at y 1270, grain fill #EFEFED, dashed outline.
  - Top is 300, 360, 420 or 470, chosen by header length.
  - The area starts ≥ 24px under the header.
- **Footer (y ≈ 1307):** "Remote design team for SaaS" + Save. Carousels show progress, "01 / 09" and "Swipe →".
- **Covers:** add the 80px pillar rail, with the post's pillar lit (two pillars lit for a two-pillar post).

## Tokens
- **Neutrals:** ink #141618, mute #5C6169, faint #8A9097, grey line #9AA0A7, page #F7F7F5.
- **Brand:** blue #0058F6, the only accent. Used for pins, leaders, outlines, eyebrows and the CTA.
- **States** (text/tint), only when the state is the point:

  | State | Text | Tint | Means |
  |---|---|---|---|
  | Green | #0B7A55 | #E5F6EE | fact, live |
  | Red | #B42318 | #FDECEB | myth, before |
  | Orange | #B54708 | #FEF0E4 | later |
  | Yellow | #8A6100 | #FEF6DA | your review |

- **Radius:** 16 on windows, cards and panels (all four corners), 12 on buttons, 10 on pins and rings, 8 on tags.
- **Shadow:** layered, navy-tinted, one light from above (`--d3`).
- **Spacing:** 8pt grid, 40–56px from the area edges.
- **Text:** ≥ 16px outside screenshots. New posts: notes ≥ 22px, callout titles ≥ 28px.

## Components
- **Window:** 40px #F4F4F2 bar, real screenshot showing a whole section. Never cropped mid-row, never stretched.
- **Real mobile:** screen only (no bezel, no home bar), status bar reading 7:04.
- **Pin:** 30px blue, Mono number.
- **Leader:** 1.5px dashed blue. It starts on the part it explains, which is outlined first.
- **Spotlight:** for 1–2 parts only. Dim only the UI (rgba(12,18,34,.3), brightness .76, saturate .25, no blur), white ring around each bright part, small pin on its corner.
- **3+ parts:** numbered pins plus callouts.

## Templates
- **Work:**
  - W1 shot + spotlight + legend
  - W2 shot + quote + facts
  - W3 window + mobile + fact grid
- **Design:**
  - D1 statement
  - D2 / D2 v2 mobile anatomy (outlined parts)
  - D3 type specs
- **Dev:**
  - E1 logo grid
  - E2 3 rows + checks
  - E3 code + load chart
- **Conversion:**
  - C1 before/after copy
  - C2 myth vs fact (2 windows + spotlight)
  - C3 CTA anatomy
- **Process:**
  - P1 timeline
  - P2 note from Sam
  - P3 finding
- **Wins:**
  - N1 quote
  - N2 real chat screenshot
  - N3 numbers
- **Learn:**
  - L1 term + fold line
  - L2 12-item list
  - L3 glossary
- **Text:**
  - T1 rules
  - T2 big list
  - H1 headline + quote + window
  - H2 essay, no visual
- **Covers:** carousel cover, single cover, one per pillar, two-pillar.
- **Last slide:** "Book a 20-min fit call".

## Formats
- **Master 1080×1350:** the same file goes to Instagram, LinkedIn, X (single image) and Threads. The Instagram grid crops to centred 3:4, so keep content inside x 64–1016.
- **LinkedIn carousel:** one PDF, all pages 1080×1350, 8–12 pages, cover first, CTA last.
- **S3F templates:**

  | Format | Size | Notes |
  |---|---|---|
  | Story | 1080×1920 | Keep text out of the top 250px and the bottom 340px |
  | og:image | 1200×630 | Must read at 600×315 |
  | X landscape | 1200×675 | |
  | Blog thumbnail | 1600×1000 | Headline + one visual only |
  | Article hero | 1200×675 at 2× | Visual only |
  | Video thumbnail | 1280×720 | Keep the bottom-right clear |

- **Landscape layout:** text left ~40%, visual right ~60%, 48px top bar, no footer.

## Export
1. Render at 2× by default, 3× for fine UI detail.
2. Save as JPEG q90, progressive, 4:4:4 chroma, embedded sRGB profile. That gives about 0.3–0.7 MB.
3. Never upscale a 1× file, never use 4:2:0, never go below q85.
4. Blog images: WebP/AVIF ~80. og:image: PNG.

## Never
- Cards on cards, or a small window floating in empty space.
- Zoom lenses or blur.
- Tilted or 3D mockups.
- Dark-theme posts.
- Gradients outside screenshots.
- A blue word inside a headline.
- Colour used as decoration.
- A home bar or a 9:41 clock on a phone.
- Arbitrary crops.

## Authors
Every byline uses `byline("sam" | "rishi" | "bfs")`, available as `window.S3K.byline`.

| Option | Shown as | Use for |
|---|---|---|
| `sam` (default) | Sam M, "Founder, Built for SaaS", photo | Opinion, process, sales |
| `rishi` | Rishi M, "Built for SaaS", portrait | Build, performance, CMS, engineering |
| `bfs` | Built for SaaS, the metal BFS mark (no photo ring) | News and case studies (writes as "we") |

Rishi's role line is a placeholder until Sam confirms his title.

## Facts you may use
- Clients: Sydecar, ClearGrid, Paramark, Possible Finance, EvolutionIQ, Hireport.
- $270M+ raised by clients.
- Top 1% on Contra.
- CTA: "Book a 20-min fit call".
- Handle: @builtforsaas.

Anything else: ask Sam.