Prompt lesson · 22 prompts
Typography in UI Design prompts for UX/UI Designers
22 ready-to-use prompts from our AI for UX/UI Designers course. Copy one, fill in the {{placeholders}}, and paste it into ChatGPT, Claude, Gemini or any other AI.
Accessible Text Color Selection
Use this when you need to choose text colors that ensure readability and meet accessibility standards.
Role You are an accessibility and color theory expert. Your goal is to recommend text colors that provide sufficient contrast and readability for all users, including those with visual impairments.
Context you provide
- {{background_color}}: The background color or image the text will appear on.
- {{user_needs}}: Specific user needs (e.g., visual impairments, color vision deficiencies, lighting conditions).
- {{accessibility_standard}}: The accessibility guideline to follow (e.g., WCAG 2.0, WCAG 2.1).
Instructions
- Ask for missing inputs if not provided.
- Evaluate the background color and user needs to determine contrast requirements.
- Suggest one or more text colors that meet the specified accessibility standard, providing hex codes.
- Explain why each color works, referencing contrast ratios and color theory.
- If the background is an image, advise on how to ensure contrast (e.g., overlays, text shadows).
- Provide alternative color combinations for different user needs.
Output format Deliver a structured recommendation with sections: Recommended Colors, Contrast Ratios, Rationale, and Alternatives. Use a table for clarity and keep the tone practical.
Guardrails
- Do not suggest colors without verifying contrast ratios; if unsure, state the need for testing.
- Stay within the scope of text color selection; avoid unrelated design advice.
- Flag any assumptions about the exact background or lighting.
Example
- background_color: #FFFFFF; user_needs: color vision deficiency; accessibility_standard: WCAG 2.1 AA.
Open this prompt Analysis · Intermediate
Creative Text Effects Ideas
Use this when you need creative and visually appealing text effects for a design project.
Role You are a creative typography designer. Your goal is to generate innovative and practical text effect ideas that enhance visual appeal while maintaining readability and brand consistency.
Context you provide
- {{project_type}}: The type of project (e.g., digital marketing campaign, branding, art exhibition poster, music festival brochure).
- {{effect_type}}: The specific effect you're interested in (e.g., shadows, outlines, gradients, or a combination).
- {{brand_tone}}: The desired tone or style (e.g., modern, playful, elegant).
Instructions
- Ask for missing inputs if not provided.
- Based on the project type and effect type, brainstorm 3–5 creative text effect ideas.
- For each idea, describe the visual effect, how to achieve it (e.g., CSS, design software), and why it suits the project.
- Include tips for balancing creativity with readability.
- If combining effects, explain how to layer them effectively.
- Provide examples of when to use each effect and when to avoid it.
Output format Present ideas as a list with headings: Idea, Description, Implementation, and Best Use. Keep the tone inspirational yet practical.
Guardrails
- Do not suggest effects that compromise readability; always prioritize legibility.
- Stay within the scope of text effects; avoid unrelated design advice.
- Flag any assumptions about the brand or audience.
Example
- project_type: music festival brochure; effect_type: gradients; brand_tone: vibrant and energetic.
Open this prompt Creating · Beginner
Font Pairing Guide
Use this when you need to create a comprehensive guide on pairing fonts effectively for UI design projects.
Open this prompt Creating · Intermediate
Font Selection Guidance
Use this when you need tailored font recommendations that align with a specific brand identity, audience, and design goals.
Open this prompt Decisions · Beginner
Font Size and Line Height Optimization
Use this when you need to determine optimal font sizes and line heights for readability and visual balance across different devices and interfaces.
Open this prompt Analysis · Intermediate
Font Weight and Style Emphasis
Use this when you need to effectively use font weights and styles to emphasize specific elements and create visual contrast in your design.
Open this prompt Decisions · Beginner
Readability and Legibility Enhancement
Use this when you need to improve text legibility and readability through optimal font sizes, line lengths, and spacing for various content types and audiences.
Open this prompt Analysis · Intermediate
Responsive Typography Strategy
Use this when you need to ensure text remains readable and visually consistent across various screen sizes and devices.
Open this prompt Analysis · Intermediate
Suggest Font Pairings for Design
Use this when you need font pairing suggestions that match a specific aesthetic and project context.
Open this prompt Creating · Beginner
Text Alignment Best Practices
Use this when you need to choose the optimal text alignment for readability and visual consistency in a design.
Open this prompt Analysis · Beginner
Typography Accessibility Checker
Use this when you need to build or enhance a tool that evaluates typography accessibility in UI designs.
Open this prompt Creating · Advanced
Typography Animation Library
Use this when you need to create a comprehensive library of typography animations for UI projects, including customization and collaboration features.
Open this prompt Creating · Advanced
Typography Best Practices Guide
Use this when you need a comprehensive, practical guide to typography best practices for UI design, covering font size, line spacing, and readability.
Open this prompt Research · Beginner
Typography Color Palette Generator
Use this when you need to design a tool that generates harmonious color palettes based on selected fonts, with features for customization, preview, and accessibility.
Open this prompt Creating · Advanced
Typography Contrast Checker
Use this when you need to design a tool that checks text-background contrast ratios for accessibility, with a user-friendly interface and validation features.
Open this prompt Creating · Intermediate
Typography Grid System Framework
Use this when you need to design a framework or plugin for implementing consistent typography grids in UI designs, including real-time feedback and automation.
Open this prompt Creating · Advanced
Typography Hierarchy Guide
Use this when you need to establish a clear typographic hierarchy for a user interface to improve readability and visual organization.
Open this prompt Creating · Intermediate
Typography Learning Resource List
Use this when you want a curated list of courses, tutorials, and articles to improve your typography skills in UI design.
Open this prompt Research · Beginner
Typography Mockup Template Set
Use this when you need pre-designed UI mockup templates with placeholder text to visualize and test typography choices in realistic contexts.
Open this prompt Creating · Intermediate
Typography Showcase Platform Design
Use this when you need to design a platform for showcasing innovative typography in UI design, including features like search, gallery, and user profiles.
Open this prompt Creating · Advanced
Typography Style Guide Generator
Use this when you need to create a customized typography style guide to ensure consistency across your UI project.
Open this prompt Creating · Intermediate
Typography Trends Overview
Use this when you need a current, practical overview of typography trends for UI design, including fonts, styles, and techniques.
Open this prompt Research · Intermediate