cta-patterns
CTA Patterns
Design calls-to-action that people actually click.
How to use
/cta-patternsApply CTA constraints to this conversation.
Constraints
Copy Rules
- MUST start with a verb ("Start", "Get", "Try", "See", "Create")
- MUST tell the user what happens next, not what they're committing to
- "Start free trial" beats "Sign up". "See pricing" beats "Learn more".
- NEVER use "Submit", "Click here", or "Learn more" as primary CTA text
- SHOULD include a benefit: "Get started free" not just "Get started"
- Secondary CTA should be a text link, not a competing button
Placement
- MUST be visible without scrolling on the primary landing surface
- MUST repeat after every major content section that builds intent
- MUST be the highest-contrast element in its container
- NEVER place two primary CTAs with different actions in the same viewport
- SHOULD add a low-commitment alternative near high-commitment CTAs
Progressive Commitment
- First CTA: lowest friction possible (no credit card, no forms)
- In-product: escalate commitment as the user experiences value
- NEVER ask for payment before the user has experienced the core value
- SHOULD show what the user gets before showing what it costs
Anti-Patterns
- Ghost buttons for primary CTAs (low contrast = low clicks)
- CTAs that navigate away without explaining the destination
- Identical CTA text across different page sections
- Pop-up CTAs that interrupt before the user has engaged
- Disabling the CTA while "loading" with no feedback
More from dragoon0x/product-skills
prd-writing
Write product requirement documents that engineers want to read and can actually build from. Covers structure, scope discipline, and the balance between clarity and over-specification. Use when writing PRDs, reviewing spec quality, or when engineering keeps asking clarifying questions.
1freemium-vs-paid-gate
Decide whether a product should offer a free tier, free trial, or go straight to paid. Structured decision framework based on economics, distribution model, and competitive landscape. Use when launching a new product or reconsidering your pricing model.
1error-recovery
When things break, guide people forward instead of leaving them stranded. Error message copy, retry patterns, graceful degradation, and recovery flows. Use when building error handling or failed state UIs.
1onboarding-flow
Design first-run experiences that create the aha moment fast. Reduces time-to-value by sequencing actions, progressive disclosure, and contextual guidance. Use when building signup flows, product tours, or empty states.
1user-psychology
Apply motivation, friction, and trust patterns to product decisions. Maps cognitive biases and behavioral triggers to specific UI and copy choices. Use when reviewing flows for drop-off points or when something feels right but doesn't convert.
1microcopy
The small words that shape big experiences. Button labels, tooltips, confirmations, placeholders, and the 3-word strings that determine whether a product feels polished or half-finished. Use during any copy audit pass.
1