# Churnkey image catalogue

A curated, labelled library of marketing visuals for landing pages, articles, and social content. It exists so that anyone — human or AI agent — writing a page under `/articles/` (or anywhere else on the site) can find the right visual fast, without digging through Figma.

Two kinds of content live here:

1. **This folder** (`/images/cky-catalogue/`) holds assets imported from Figma that previously only existed there: blog covers and YouTube covers. Every file is listed below with a description and a link back to its Figma source node.
2. **The rest of `/images/`** (illustrations, product screenshots, brand assets, and more) is indexed here **in place** — those files are not duplicated into this folder. Use the paths as written.

> **For AI agents:** read the "How to pick an image" section, then jump to the relevant table. Descriptions state what is actually visible on each image, including any headline text baked into it. Before writing captions or alt text, read `/.claude/skills/churnkey-copywriting.md` (sentence case, no exclamation marks, product names capitalized).

## How to pick an image

| You need | Go to |
|---|---|
| A product screenshot (dashboard, cancel flow, dunning email, metrics) | `/images/samples/features/<feature>/` — see [Product screenshots](#product-screenshots-imagessamplesfeatures) |
| A conceptual illustration for a feature or retention tactic | `/images/illustrations/` (SVG, feature-tied) or `/images/illustrations/generated/` (PNG scenario art) |
| A data or benchmark visual (churn rates, decline codes, retention curves) | `/images/reports/retention-2025/`, or `/images/articles/` for article-specific charts |
| A branded cover or OG image for an article | [`covers/`](#blog-covers-imagescky-cataloguecovers) here; site default is `/img/og-img-2024.jpg` |
| A video-flavoured visual for a tutorial-style article | [`youtube-covers/`](#youtube-covers-imagescky-catalogueyoutube-covers) here |
| The Churnkey logo, badges, or UI chrome | `/images/brand/` (`ck-logo-22.svg` is the standard mark) |
| Customer logos for social proof | `/images/logocloud/` |
| Team headshots or testimonial avatars | `/images/people/`, `/images/testimonials/` (`avatar-sketch-*.png`) |
| Payment provider logos (Stripe, Paddle, Chargebee, …) | `/images/integrations/` |
| A branded background texture | The decorative-tile subset of `covers/` below, or `/images/textures/` |

Feature-to-folder cheat sheet for screenshots: Precision Retries and dunning → `failed-payments/`; Cancel Flows → `cancel-flows/`; customer health → `customer-health/`; Feedback AI / insights → `insights-ai/`; Reactivations → `reactivations/`; Free Churn Metrics → `metrics/`; Customer Timelines → `customer-timelines/`.

## Figma imports (this folder)

Everything below was exported from the [External-Marketing-Assets](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets) Figma file as PNG at native resolution. The Figma node column links straight to the source frame — use it to check freshness or re-export.

### Blog covers — `/images/cky-catalogue/covers/`

41 branded cover images (mostly 1300×818) — a curated, generic subset of the blog OG library, kept because they reuse well across articles and social. Some carry a headline baked into the artwork (the description quotes it — match the cover to your topic); many are decorative background tiles with no text, marked below. They work as:

- `meta.image` OG images for articles (use the absolute URL, e.g. `https://churnkey.co/images/cky-catalogue/covers/og-churn-pillar.png`)
- hero or section visuals when a baked-in headline matches the content
- background textures — the "decorative background tile" entries have no text and drop in anywhere

One data graphic (`chart-repeat-revenue-states.png`) lives here too. For benchmark charts with real numbers, prefer the report exports in `/images/reports/retention-2025/`.

| File | What it shows | Size | Figma node |
|---|---|---|---|
| `chart-repeat-revenue-states.png` | Graphic labeling repeat revenue states: expansion, contraction, resurrection, churn, net dollar retention | 1300×818 | [4448-1021](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4448-1021) |
| `og-act-on-data.png` | Timeline diagram with pastel pill labels (voluntary churn, qualitative feedback, win-back, at-risk customers) on cream | 1300×818 | [4381-1021](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4381-1021) |
| `og-billing-contacts-api.png` | "INTRODUCING BILLING CONTACTS API" with user avatars, $999 payment failure card and update-payment callout on peach | 1300×818 | [4328-1021](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4328-1021) |
| `og-blog-a-b-tests.png` | "PAYMENT RECOVERY CAMPAIGN A/B TESTS" in white on green with two variant stat cards comparing recovery rates | 1300×818 | [4935-1112](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4935-1112) |
| `og-blog-feedback-ai-v2.png` | "Feedback AI" V2 pill badge with sparkle icon amid scattered survey squares on blue; playful illustration | 1300×818 | [4774-1889](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4774-1889) |
| `og-calculate-tam.png` | Dotted world map on pink-purple gradient with international payment recovery cards ($1,290, R$200, ¥5,500) | 1300×818 | [1902-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=1902-927) |
| `og-cancel-flow-feedback-categories.png` | Colorful torn-paper stripes labelled with cancel feedback categories (discounts, pauses, missing features, refunds) | 1300×818 | [2029-960](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2029-960) |
| `og-chargebacks.png` | "CHARGEBACKS" in navy type between arcs of blue and orange coin dots on pale lavender; minimal illustration | 1300×818 | [4374-1021](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4374-1021) |
| `og-chargebackstop.png` | "MINIMIZE CHARGEBACKS WITH CANCEL FLOWS" in angled white type with crossed-out chargeback stamp on blue | 1300×818 | [3308-859](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3308-859) |
| `og-churn-analysis.png` | "GUIDE TO CUSTOMER CHURN ANALYSIS" in cream type on bright purple doodle background with concentric arcs | 1300×818 | [2217-1045](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2217-1045) |
| `og-churn-analytics.png` | "FREE CHURN ANALYTICS" headline with dashboard card showing total, voluntary and involuntary churn stats on cream | 1300×818 | [4417-1464](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4417-1464) |
| `og-churn-pillar.png` | Subway-map style diagram of pastel circular icons (percent, code, filter, pause, undo) on near-black; no text | 1300×818 | [1939-932](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=1939-932) |
| `og-churn-reduction-background.png` | Plain green background with tonal hand-drawn doodle line pattern; decorative texture only, no text | 1300×818 | [2557-855](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2557-855) |
| `og-creative-pricing-strategy.png` | Warm cream illustration of abstract roulette-style segmented circles in red, black and green; no headline | 1300×818 | [2033-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2033-927) |
| `og-customer-feedback.png` | "How to Leverage Customer Feedback" on dark navy above clustered colored dots circled into feedback groups | 1300×818 | [3922-6524](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3922-6524) |
| `og-customer-health-score.png` | Red-to-purple gradient with faint doodle line pattern; decorative background tile, no text | 1300×818 | [2573-1100](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-1100) |
| `og-customer-retention-tools.png` | Red-to-purple gradient with yellow clover shapes forming an ascending bar-chart pattern; abstract, no text | 1300×818 | [1744-964](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=1744-964) |
| `og-customer-retention.png` | Bold navy "Customer Retention" headline on light lavender with a flowing stream of gray, red and blue dots | 1300×818 | [3918-4466](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3918-4466) |
| `og-customer-timelines.png` | Product screenshot of a customer timeline with dunning events and past-due status on green pattern | 1300×818 | [1821-955](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=1821-955) |
| `og-discounts.png` | Bright blue illustration with columns of white and red clover-dot clusters; abstract pattern, no headline | 1300×818 | [2030-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2030-927) |
| `og-dunning-offer-benefits.png` | Abstract amber-orange geometric line pattern; decorative background tile, no text | 1300×818 | [2573-1079](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-1079) |
| `og-dunning-pillar.png` | Abstract blue triangle mosaic pattern; decorative background tile, no text | 1300×818 | [2573-1239](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-1239) |
| `og-essential-plg-metrics.png` | "5 essential PLG metrics" headline over playful bar and line chart illustration on light lavender | 1300×818 | [3821-993](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3821-993) |
| `og-feedback.png` | Coral-to-violet gradient with faint geometric line pattern; decorative background tile, no text | 1300×818 | [2573-885](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-885) |
| `og-good-cac.png` | Abstract dark green wavy stripe pattern; decorative background tile, no text | 1300×818 | [2573-1192](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-1192) |
| `og-hard-vs-soft-declines.png` | "Hard vs soft declines" headline over playful timeline illustration with pause and retry markers on blue | 1300×818 | [3888-1794](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3888-1794) |
| `og-how-to-predict.png` | "Predict churn & improve retention" purple typographic cover with Churnkey badge over arc pattern | 1300×818 | [2579-855](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2579-855) |
| `og-inflation.png` | Purple-to-coral gradient with Churnkey logo mark and faint mosaic corner; decorative, no headline | 1300×818 | [2573-855](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-855) |
| `og-interview-churning-customers.png` | Purple "Schedule a feedback call" button with cursor on green and gold mosaic collage; playful illustration | 1300×818 | [3693-1661](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3693-1661) |
| `og-involuntary-churn.png` | Diagram of payment decline codes (insufficient_funds, expired_card, try_again_later) as pastel pills on cream | 1300×818 | [3662-1055](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3662-1055) |
| `og-lifetime-value.png` | Abstract dark navy background with columns of white and red crosshatched dot clusters; no text | 1300×818 | [2582-951](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2582-951) |
| `og-monthly-churn-rate.png` | Flat illustration of "CHURN" repeated in black and coral inside a no-entry circle on blue doodle pattern | 1300×818 | [1909-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=1909-927) |
| `og-people-not-churn.png` | Illustration of three hand outlines in white, yellow and black on pink, teal and gray cards; no text | 1300×818 | [2107-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2107-927) |
| `og-pricing-tiers.png` | Abstract dark purple geometric shard pattern; decorative background tile, no text | 1300×818 | [2573-1200](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2573-1200) |
| `og-productive-patterns.png` | Abstract spiral of small colorful crossed circles on dark charcoal pattern; no headline | 1300×818 | [3064-875](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3064-875) |
| `og-resources-exit-survey.png` | Spiral of small colorful crossed-circle dots on dark green; abstract illustration, no headline | 1300×818 | [2301-951](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2301-951) |
| `og-retention-automation-plg.png` | Green zigzag line chart with dashed upward trend arrow and scattered colorful dots on cream; no headline | 1300×818 | [3658-1161](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3658-1161) |
| `og-revenue-growth-rate.png` | "Revenue growth rate" headline with playful bar chart and purple trend arrow on lilac | 1300×818 | [4441-1040](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4441-1040) |
| `og-subscription-pauses.png` | Abstract mosaic of multicolored triangles on dark green; decorative background, no text | 1300×818 | [2101-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2101-927) |
| `og-trial-extension.png` | Hand-drawn illustration of checkbox grid rows with curved arrows above concentric arcs on light lavender | 1300×818 | [3656-883](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=3656-883) |
| `og-uplift.png` | Illustration of a multicolored icosahedron die with quote, medal and question icons on brick-red pattern | 1300×818 | [2023-927](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=2023-927) |

### YouTube covers — `/images/cky-catalogue/youtube-covers/`

17 video thumbnails (1280×720) with tutorial-style titles. Useful as visuals for how-to sections or wherever you reference the corresponding video. Source Figma page: [YouTube Covers](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4388-10580).

| File | What it shows | Size | Figma node |
|---|---|---|---|
| `yt-a-b-test-cancel-flows.png` | "How to A/B test your cancel flow with 95% confidence" over a cream stats card with confidence bar and p-value | 1280×720 | [5578-1693](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5578-1693) |
| `yt-adaptive-offers.png` | "Scale SaaS retention with adaptive offers" on pale green with three fanned time-limited discount deal cards | 1280×720 | [5424-1495](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5424-1495) |
| `yt-add-team-members.png` | "How to add team members to your Churnkey account" above four avatars labeled viewer, admin, developer, member | 1280×720 | [4395-2437](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4395-2437) |
| `yt-cancel-flow-analytics.png` | "Cancel flow analytics explained" over fanned dashboard cards with boosted revenue chart and performance stats | 1280×720 | [4413-2190](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4413-2190) |
| `yt-cancel-flow-split-testing.png` | "How to set up cancel flow split testing" above a yellow branch icon splitting into two A/B campaign cards | 1280×720 | [4413-1111](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4413-1111) |
| `yt-cancel-flows.png` | "How to save 78% of your voluntary churn (with Churnkey)" over three cancel-flow UI cards: pause, offer, feedback | 1280×720 | [5314-946](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5314-946) |
| `yt-configure-stripe.png` | "How to configure Stripe with Churnkey" above Stripe and Churnkey logo cards joined by a sync-arrows icon | 1280×720 | [4443-13488](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4443-13488) |
| `yt-dunning-strategy.png` | "Recover 89% of failed payments (SaaS dunning strategy)" above cards: card expired, bank flagged, billing outdated | 1280×720 | [5617-1335](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5617-1335) |
| `yt-feedback-ai.png` | "Stop guessing why customers churn (and scale retention)" Feedback AI title on dark navy with dot-matrix segments | 1280×720 | [5555-1128](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5555-1128) |
| `yt-get-the-most-from-your-churnkey-account.png` | "Getting the most out of your Churnkey account" over fanned numbered tip cards with doodled lightbulbs | 1280×720 | [4456-5476](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4456-5476) |
| `yt-introducing-churnkey-intelligence.png` | "Intelligence Suite — your new retention OS" serif title on warm yellow watercolor with orbiting feature icons | 1280×720 | [5281-1990](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5281-1990) |
| `yt-involuntary-churn.png` | "The Churnkey involuntary churn engine" on pink gradient over scattered failed-payment cards | 1280×720 | [5301-2051](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5301-2051) |
| `yt-payment-recovery-analytics.png` | "Churnkey payment recovery analytics explained" over dashboard cards with recovery progress bars | 1280×720 | [4440-3266](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4440-3266) |
| `yt-payment-recovery.png` | "How to start payment recovery in Churnkey" above a timeline of decline-code pills like insufficient_funds | 1280×720 | [4434-1907](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4434-1907) |
| `yt-stop-losing-20-percent-w-payment-recovery.png` | "How to stop losing 20% of your subscribers" above cards for payment walls, Precision Retries, recovery campaigns | 1280×720 | [5359-966](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5359-966) |
| `yt-voluntary-churn.png` | "Why 39% of subscribers leave" Churnkey x Stripe title on pink gradient over a grid of topic filter pills | 1280×720 | [5321-949](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=5321-949) |
| `yt-your-first-cancel-flow.png` | "How to set up your first cancel flow in Churnkey" with cancel button branching to pause, reasons, feedback steps | 1280×720 | [4393-1036](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets?node-id=4393-1036) |

## Existing libraries (indexed in place)

### Feature illustrations — `/images/illustrations/`

~55 files, mostly SVG, following the `illustration-<feature>-<concept>.svg` convention (e.g. `illustration-adaptive-offers-precision-targeting.svg`, `illustration-account-agent-instant-insights.svg`). These are the polished, hand-made illustrations used on feature pages — check the corresponding page under `app/pages/feature/` to see how each is used. Hero variants come as `-hero.svg` / `-hero-mobile.svg|png`, how-it-works variants as `-hiw.svg|jpg`, and pain-point illustrations as `illustration-pain-*.jpg`.

### Generated scenario illustrations — `/images/illustrations/generated/`

17 PNG illustrations in a shared minimal line-art style: cream cards on a pale mint background with blue accents and circled highlights. Each depicts one retention or monetization tactic — ideal inline visuals for tactic-style article sections. No text is baked in, so they work under any heading.

| File | What it shows |
|---|---|
| `activation-rescue.png` | Line chart with a flagged usage-drop peak leading via arrow to a rescue checklist card |
| `bill-the-right-person.png` | Payment card failing to reach a gray user while an arrow reroutes billing to a verified user with a green check |
| `dunning-sms.png` | Failed payment card with alert dot beside a phone showing a circled SMS bubble with a payment link |
| `feature-discovery.png` | Feature card with compass and gears branching to a growth-chart card, showing guided feature paths |
| `free-to-paid-conversion.png` | Cursor clicking an upward trend chart card, with an arrow to a plan card and circled CTA button |
| `hidden-rescue-plan.png` | Two pricing cards where an arrow reveals a hidden dashed-border rescue plan panel, circled in blue |
| `monthly-to-annual-conversion.png` | Circled calendar card with an arrow to a larger annual plan card and a discount price tag |
| `no-login-payment-update.png` | Message bubble with link passing through a circled padlock to a card-entry field — no login required |
| `pause-offer-at-cancellation.png` | Cancellation modal with a large pause button linked by dotted line to a circled resume date on a calendar |
| `pause-wall.png` | Blocked content screen with big pause icon and play button, flanked by dimmed calendar cards on a timeline |
| `plan-structure-review.png` | Three pricing plan cards with the middle plan's copy circled, next to an analytics review card |
| `post-upgrade-onboarding.png` | Upgraded plan card connected to a circled onboarding checklist with clock timer and checked first step |
| `reason-matched-save-offers.png` | Radio-button list of cancel reasons with arrows matching each to an offer: discount tag, pause, chat |
| `recovery-discount-in-dunning.png` | Two dunning emails leading after a clock delay to a final email with a circled discount-tag button |
| `trial-extension-save.png` | Trial card with a progress bar extending past its deadline as a dashed segment, with clock and calendar |
| `upgrade-moment-offers.png` | Usage gauge dashboard nearing its limit beside a pop-up upgrade offer card with a CTA button |
| `usage-limit-upgrade-offers.png` | Usage progress bar hitting a dashed threshold, triggering a callout card with a circled upgrade button |

### Product screenshots — `/images/samples/features/`

Real product UI, organized by feature. Pick from the folder matching your topic:

| Folder | Files | Covers |
|---|---|---|
| `cancel-flows/` | ~22 | Cancel flow builder, offers, exit surveys, flow overview (`cancel-flows-overview.png`, `feature-1.svg`…`feature-8.svg`, `sm/xl-cancel-hero.svg`) |
| `failed-payments/` | ~36 | Payment Recovery and Precision Retries: dunning emails, recovery analytics, payment walls — the biggest set |
| `customer-health/` | ~12 | Health scores, risk segments |
| `customer-timelines/` | ~4 | Customer Timelines event views |
| `insights-ai/` | ~8 | Feedback AI and insights dashboards |
| `metrics/` | ~12 | Free Churn Metrics dashboards |
| `reactivations/` | ~11 | Reactivations campaigns and revenue views |
| `white-glove/` | ~3 | White-glove service visuals |

Adjacent: `/images/samples/index/` (~17, homepage screenshots) and `/images/samples/mobile/` (~4). Note responsive prefixes `sm-`/`lg-`/`xl-` on some files.

### Everything else under `/images/`

| Folder | What's inside |
|---|---|
| `brand/` | Churnkey logo marks (`ck-logo-22.svg`), badges, glow backgrounds, calculator icons, UI chrome (~98 files) |
| `logos/` + `logos/mcp-clients/` | Churnkey logos and MCP client logos |
| `logocloud/` | ~39 customer logos (SVG) for social-proof strips |
| `integrations/` | Stripe, Braintree, Chargebee, Paddle, Recurly, Maxio, Slack logos and screenshots, plus generic icons |
| `people/` | Team and author headshots (an `optimized/` subfolder has web-ready sizes) |
| `testimonials/` | `avatar-sketch-<name>.png` illustrated customer avatars (~15) |
| `reports/retention-2025/` | 23 chart and figure exports from the State of Retention 2025 report |
| `reports/retention-2024/` | 3 figures from the 2024 report |
| `hero/`, `home/` | Hero art and homepage visuals |
| `use-cases/`, `case-studies/`, `pricing/`, `security/`, `conferences/` | Page-specific art |
| `articles/` | Article-specific images (currently `seasonal-churn-intent.png`); add new article-only images here |
| `textures/`, `video-thumbnails/`, `subscription-heroes/`, `variants/` | Textures, video thumbs, seasonal variants |

Legacy: `/img/` (note: `img`, not `images`) is a flat folder of ~148 older blog and OG images, including the site-default OG image `/img/og-img-2024.jpg`. Prefer `/images/` paths for new work.

## Using images in articles

Articles are Vue pages under `app/pages/articles/<slug>/index.vue`. The established embed pattern (from `reduce-subscription-churn`):

```vue
<figure class="max-w-3xl mx-auto mt-6 rounded-2xl border border-gray-200/70 bg-white p-4 sm:p-6">
  <img
    src="/images/cky-catalogue/covers/og-churn-analytics.png"
    alt="Free churn analytics dashboard showing total, voluntary and involuntary churn"
    class="w-full rounded-xl"
    loading="lazy"
  />
</figure>
```

Conventions:

- reference images by root-absolute path (`/images/...`), plain `<img>`, `loading="lazy"`
- write descriptive alt text in sentence case; if the image contains data, state the takeaway in the alt
- OG image goes in the article's `meta.image` as an **absolute** URL: `https://churnkey.co/images/cky-catalogue/covers/<file>.png`
- covers with baked-in headlines should only be used where the headline matches the content — don't pair "Reduce passive churn" art with a voluntary-churn article

## Provenance and refreshing

| Folder | Source | Exported |
|---|---|---|
| `covers/` | Figma [External-Marketing-Assets](https://www.figma.com/design/q880CAmJ3AVSFGxm5pHYxz/External-Marketing-Assets), page "Blog OG, Twitter Threads, Stripe App" (node 19-5) | 2026-07-03 |
| `youtube-covers/` | Same file, page "YouTube Covers" (node 4388-10580) | 2026-07-03 |

Notes:

- Exports are curated: duplicate frames, stale iterations, Twitter-thread graphics, and unnamed working frames were skipped. Where Figma held several same-named frames, the newest non-broken iteration was exported.
- The catalogue was trimmed to stay generic: the topic-specific `charts/` (benchmark data viz) and the one-off voluntary-churn `carousels/` were removed. Re-export benchmark charts from Figma into `/images/articles/` per-article as needed, or use the report exports in `/images/reports/retention-2025/`.
- The [Churnkey Marketing Site 2.0](https://www.figma.com/design/BsFmy4pNh3lwKl9PXyPE3q/Churnkey-Marketing-Site-2.0) Figma file's Intelligence page was reviewed but not exported — its illustrations already live in `/images/illustrations/` and `/images/samples/`.
- To re-export or add a frame: open the Figma node, export as PNG at 1x, name it `<category-prefix>-<kebab-case-topic>.png`, drop it in the matching folder, and add a table row here. Keep the description factual — state what's visible, including any headline text.
- Weekly roundup email visuals are not in this catalogue yet — they weren't in the reviewed Figma pages. Add them under a new `emails/` subfolder when sourced.