# BFS social post system (S3) — brief for any AI model

You are making an Instagram/LinkedIn post for Built for SaaS (BFS, builtforsaas.com), a remote design + dev team for B2B SaaS. Match the design language below exactly. Output a 1080×1350 image (or HTML/CSS rendered at 1080×1350).

## 1. Canvas and frame (identical on every post)
- Canvas 1080×1350, light theme only. Page #F7F7F5. Fonts: Geist (UI) and Geist Mono (labels, numbers, code).
- Chrome bar y 0–72: white, dashed bottom rule. Three grey dots #DCDDDF (12px, x 34/55/76). Centred URL pill 360×38 r10 "builtforsaas.com" 17px with a small blue lock. Right: "@builtforsaas" 16px #8A9097.
- Vertical dashed guides at x 64 and x 1016, full height: 1.5px, dash 5/6, rgba(20,22,24,.18). Small blue 8px square joints at (64,72), (1016,72) and beside the header (64,147).
- Header, left-aligned at x 104:
  - Pillar pill at y ≈134: 32px white tile (r8, hairline) with a 16px blue line icon, then "Pillar · label" 18px weight 600.
  - Headline 66px, weight 680, line-height 1.02, letter-spacing −0.045em, #141618. One idea, ≤ 7 words. Optional grey second line #9AA0A7.
  - Subtext 25px, line-height 1.45, #5C6169, 22px under the headline, 1–2 lines, max ≈800px wide. It states the point or the source.
- Visual area: dashed rect x 64→1016 (952 wide), bottom y 1270, fill #EFEFED with a fine grain, 9px white corner handles with grey stroke.
  - Top: 300 (1-line header), 360 (headline + 1-line subtext), 420 (3 lines), 470 (headline + grey line + 2-line subtext).
  - It must start at least 24px below the header text.
- Footer, centred at y 1307: "Remote design team for SaaS" 19px #5C6169 at x 144; right side "Save" 19px/600 + blue bookmark icon.
  - Carousels: 5-segment progress bar (active segment blue) + "01 / 09" + "Swipe →".
  - Last slide: "Link in bio ↗".
- Cover (first slide) variant:
  - 80px left rail under the chrome. BFS mark at the top, then 7 pillar icons in 48px tiles.
  - The post's pillar tile is white with a blue icon and a short blue bar on the rail edge. For a two-pillar post, light both.
  - Sam's avatar sits at the bottom of the rail with a green online dot.
  - Header at x 144: blue eyebrow "Pillar · topic" 18px, headline 56px with a grey second line, subtext 22px.
  - Visual area x 112→1040.

## 2. Tokens
- Ink #141618 · Mute #5C6169 · Faint #8A9097 · Grey line #9AA0A7 · Page #F7F7F5 · Area #EFEFED · Window bar #F4F4F2.
- Brand: BFS blue #0058F6 (bg tint #EAF1FF). Blue is the only accent. It is used for pins, leaders, outlines, eyebrows, the CTA and the save icon. Never colour a word inside a headline.
- States (text / tint / dot), only when the state is the point:
  - green #0B7A55 / #E5F6EE / #12B76A: fact, after, live, done
  - red #B42318 / #FDECEB / #F04438: myth, before, cut
  - orange #B54708 / #FEF0E4 / #F97316: lazy, later
  - yellow #8A6100 / #FEF6DA / #EAB308: waiting on you, review
- Shadows: one light from above, navy-tinted.
  - d1 = 0 0 0 1px rgba(20,22,24,.08), 0 1px 1px rgba(16,40,96,.04), 0 2px 4px rgba(16,40,96,.05)
  - d3 = 0 0 0 1px rgba(20,22,24,.08), 0 2px 3px rgba(16,40,96,.06), 0 12px 24px -8px rgba(16,40,96,.18), 0 40px 80px -24px rgba(16,40,96,.28)
- Radius: 16 on every window/card/panel (all four corners); phone screen = width × .118; buttons 12; pins and rings 10; tags 8.
- Spacing: 8pt grid. Content sits 40–56px from the visual-area edges. Title → text 4–8px; groups 20–40px; ruled rows 24–32px.
- Type minimum 16px outside real screenshots; body copy ≥ 20px. Use tabular numbers for figures.

## 3. Components
- Browser window: radius 16, d3 shadow, 40px top bar #F4F4F2 with 11px grey dots (gap 8) and a centred 24px URL pill (r7, 13px #6B7078). It contains a REAL screenshot showing a whole section (never cut mid-row, never stretched). Typical size: x 120, width 840 inside the area.
- Real mobile: an iPhone-13 capture (390×797 viewport), screen only: no bezel, notch or home bar. 1px hairline, soft layered shadow, status bar at iOS proportions reading 7:04 with signal, wifi and battery.
- Numbered pin: 30px square r10 #0058F6, white Geist Mono 16. Small pin 20px r6 Mono 12 with a 2px white ring.
- Leader: 1.5px dashed rgba(0,88,246,.6), dash 4/4, stepped (horizontal, diagonal, horizontal). It starts with a 10px blue dot with a 3px white ring ON the thing it explains.
- Part outline: 1.5px #0058F6 border, r10, fill rgba(0,88,246,.05), 4px halo rgba(0,88,246,.08), 6–8px padding around the real element.
- Callout: title 23–26px/650 tracking −0.02em; text 18–20px/1.4 #5C6169. For specs, plain text such as "56px bold, −4%".
- Spotlight (1–2 parts only): dim ONLY the UI surface (not the area). Overlay rgba(12,18,34,.30) + brightness(.76) saturate(.25), no blur. Each bright part gets a 1.5px white ring (r10) and a small pin on its top-left corner.
- State tag: 30px tall, r8, 7px dot + label 14px/600 in one state colour.
- Legends and text rows: dashed 1.5px rgba(20,22,24,.16) rules, Mono numbers in blue or faint grey.

## 4. Templates (pick the closest, then reuse)
- Covers: carousel cover; single cover; one cover per pillar (pillar lit, two shots from one BFS case); two-pillar cover.
- Work:
  - W1: full window, rest dulled, 2 parts bright + pins, legend below.
  - W2: window + client quote + 2 facts.
  - W3: window + real mobile + 2×2 fact grid.
- Design:
  - D1: statement only.
  - D2: real mobile anatomy with pins.
  - D2 v2: same with part outlines and leaders starting at the part.
  - D3: hero window with type specs pinned per line.
- Dev:
  - E1: 4×3 ruled logo grid.
  - E2: 3 editorial rows with green checks.
  - E3: code card + load-order chart.
- Conversion:
  - C1: before (red, struck) / after (green, labelled words).
  - C2: two windows, spotlight on the CTA groups, red/green tags.
  - C3: CTA anatomy with ruled legend.
- Process:
  - P1: week timeline (blue work, yellow review, green live).
  - P2: note from Sam.
  - P3: finding with 2 ruled columns.
- Wins:
  - N1: big quote.
  - N2: client's real chat screenshot.
  - N3: 4 numbers on a ruled grid.
- Learn:
  - L1: term + long real mobile with "The fold" line.
  - L2: 12-item ruled list.
  - L3: 2×2 glossary.
- Text:
  - T1: 4 rules.
  - T2: headline + 9-item list with red ✕.
  - H1: headline + grey line + quote subtext + window + 2 numbers.
  - H2: no visual, essay text + signature.
- Formats (set S3F):
  - Story 1080×1920: header below the top safe zone, window + mobile, CTA above the bottom safe zone.
  - og:image 1200×630: pill + title left, site window running off the right, author line at the bottom.
  - X landscape 1200×675: text left, window right with one outline.
  - Blog thumbnail 1600×1000: pill + 104px headline, one window off the bottom-right, no chrome bar.
  - Article hero 1200×675 at 2×: visual only.
  - Video thumbnail 1280×720: big headline left, mobile right, bottom-right left clear.
- Last slide: BFS mark, "Your remote design team. Built for SaaS.", client logo grid, "$270M+ raised" line, blue "Book a 20-min fit call" CTA with Sam's photo, "Top 1% on Contra".

## 5. Rules
- One main object per post, large and deliberate. No cards on cards, no small window floating in empty space.
- Real UI over description. Never draw a text box that describes a UI. Real BFS case screenshots, real mobile captures, real chat screenshots.
- No arbitrary crops or stretching. Crop only on purpose (a window running off an edge by design, the fold line).
- Mark 1–2 things with a spotlight; 3+ parts with numbered pins. No zoom lenses, no blur, no tilted or 3D mockups, no dark-theme posts, no gradients outside screenshots.
- Copy: plain, specific, active voice. Facts, numbers, client names and quotes only from builtforsaas.com or the founder (Sam). Never invent numbers.
- Every inside post = pillar pill + headline + subtext + visual area (or a full-text layout) + footer.
- Before finishing, check:
  - nothing is clipped or outside the area
  - text is ≥ 16px
  - the header ends ≥ 24px above the area
  - all corners are 16px
  - the 40–56px breathing room is there
  - there is no placeholder copy

## 6. Formats and export
- Master: 1080×1350 (4:5). The same file works for Instagram feed and carousels, LinkedIn image posts, X single-image posts and Threads.
- Instagram grid shows a centred 3:4 crop (about 34px off each side), so keep everything inside x 64–1016.
- Instagram Story / Reel cover: 1080×1920. Keep text out of the top ~250px and the bottom ~340px.
- LinkedIn carousel: one PDF, all pages 1080×1350, 8–12 pages, cover first, CTA last.
- LinkedIn and X link cards come from the blog's og:image.
- X: one image per post. 1200×675 for landscape or link cards.
- Blog:
  - card thumbnail 1600×1000 (16:10): headline only + one visual
  - article hero 2400×1350 (16:9)
  - in-article figures 1600×1000 or 1600×900, caption in HTML
  - og:image 1200×630, which must read at 600×315
  - video thumbnail 1280×720
- Landscape adaptation: 48px chrome bar, text column left (~40%), visual right (~60%) in the dashed area, 48px margins, no footer.
- Phone reading: a 1080 post shows about 390px wide. For new posts use notes ≥ 22px, callout titles ≥ 28px, headline ≥ 56px.
- Export:
  - Render at 2× (2160×2700); use 3× (3240×4050) for fine UI detail.
  - Save as JPEG quality 90, progressive, 4:4:4 chroma (no subsampling), embedded sRGB profile. That gives about 0.5 MB at 2× and 0.9 MB at 3×.
  - Never upscale a 1× file, never use 4:2:0, never strip the colour profile, never go below quality 85.
  - Blog images: WebP/AVIF ~80 at 2× display size.

## 7. Authors (3 options)
- Sam M, "Founder, Built for SaaS", Sam's photo. The default: opinion, process, sales. Writes as "I".
- Rishi M, "Built for SaaS", Rishi's portrait. For build, performance, CMS and engineering topics. Writes as "I".
- BFS team, "Built for SaaS / builtforsaas.com", the metal BFS mark instead of a photo. For news and case studies. Writes as "we".
- Byline: photo 56–60px, radius 14, 3px white ring; name 20–23px/650; role 18–19px #8A9097. The BFS mark has no ring.

## 8. Known facts you may use
- Clients include Sydecar, ClearGrid, Paramark, Possible Finance, EvolutionIQ, Hireport.
- Clients have raised $270M+ combined.
- Top 1% on Contra.
- CTA: "Book a 20-min fit call".
- Handle @builtforsaas.
- Anything else: ask.