Problem-Solution Copy Frame

A reusable copy structure for turning a pain point into a practical next step.

Copy Frames CopyProblemSolutionConversion
Problem-solution copy framework worksheet mockup with numbered sections.
copy-frame

COPY FRAME

Name the friction, show the simple fix, invite the next step

  • 1. What feels hard
  • 2. Why it happens
  • 3. What to do next

For product, course, service, and guide pages

How to adapt it

01

Pain

  • Describe the situation in the user's words.
02

Cause

  • Explain the reason without blaming the user.
03

Next step

  • Offer one concrete action, tool, template, or example.

Copy and adapt

Design specs

Color values

Clean white

#ffffff · RGB(255, 255, 255)

Card surface and worksheet background.

Slate text

#1f2937 · RGB(31, 41, 55)

Main copy and section labels.

Process blue

#3b82f6 · RGB(59, 130, 246)

Step numbers, arrows, and primary callout.

Lime note

#c8ff42 · RGB(200, 255, 66)

Small sticky-note highlight, never the full background.

Type and size

Frame title

  • Use system sans or grotesk sans at 34-46px, 850-950 weight, line-height around 1.05.

Step copy

  • Use 15-18px body text, 500-650 weight, with short numbered lines for easy scanning.

Layout rules

Reading path

  • Use a vertical 3-step stack or 3-column row. Each step needs a number, one heading, and one sentence.

Spacing

  • Use 24-32px card padding, 14-18px gaps between steps, and 2px dividers to make the worksheet feel usable.

Build notes

  • Good for landing-page sections, PDF worksheets, carousel slides, and product explanation cards.
  • When copying into a document editor, keep each step under two lines.

Replaceable parts

Pain verbs

  • stuck
  • scattered
  • hard to choose
  • hard to explain

Avoid when

  • The user already knows the problem.
  • You need a purely emotional brand line.
  • The next step is not clear yet.

Variants

  • Turn it into an FAQ answer.
  • Use it as the intro of a tutorial.
  • Use it as a section heading on a landing page.

Usage notes

  • Keep the pain specific.
  • Avoid exaggerated claims.
  • Give only one next step.

Best for

Landing pageSocial captionProduct intro

Colors

Related ideas

Keep browsing similar structures, styles, and use cases.