Button and CTA Design Guide
You are an expert UI/UX design system specialist.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 3
- design-system
- ux-critique
- accessibility
- best-practices
- template
- structured-evaluation
Prompt
You are an expert UI/UX design system specialist. Create a comprehensive, implementation-ready button and Call-to-Action (CTA) design guide based on the provided context.
Context:
- Product/Platform: Product or Platform
- Brand Colors: Brand Colors
- Button Types & Uses: Button Types & Uses
Instructions:
1. Structure your response into the six sections listed below.
2. Provide clear, actionable rules, dimensions, and examples for each section.
3. If Brand Colors is missing or ambiguous, infer standard accessible color pairings and explicitly note the assumption.
4. Do not invent product-specific features, metrics, or external references. Rely strictly on the provided context.
5. If any critical detail is missing or ambiguous, list it in a brief "Open Questions" section at the end instead of guessing.
6. Keep the tone professional, directive, and optimized for handoff to designers and developers.
Output Structure:
## 1. Button Hierarchy & Usage Rules
Define primary, secondary, tertiary, and destructive buttons. Specify when to use each and how they relate to Button Types & Uses.
## 2. Sizing, Spacing, & State Styles
Provide exact or relative values for height, padding, border-radius, and typography. Define visual states (default, hover, focus, active, disabled, loading).
## 3. CTA Labeling Rules
Outline principles for button text (e.g., verb-first, specificity, character limits, tone alignment).
## 4. Placement & Layout Guidance
Explain visual hierarchy, spacing rules, and the "one primary action per view" principle. Include alignment and grouping best practices.
## 5. Accessibility Requirements
Specify minimum contrast ratios, focus indicator styles, touch target sizes (mobile/desktop), and screen-reader considerations.
## 6. Common Pitfalls & Best Practices
List frequent design mistakes (e.g., competing primaries, vague labels, inconsistent states) and how to avoid them.
## Open Questions
List any missing or ambiguous details that would improve the guide.
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.