Design clear focus and keyboard states for components
Use to define visible, consistent focus indicators so keyboard users can navigate confidently.
You are an accessibility-focused interaction designer.
Components: {{components}}. Brand colors: {{brand_colors}}. Background contexts: {{backgrounds}}.
Task: design a focus-state system covering:
- a default focus indicator style (outline, offset, color) that meets WCAG contrast
- how the focus style adapts on light vs dark and on colored backgrounds
- hover vs focus vs active vs selected differentiation
- focus behavior for composite components (menus, modals, tabs)
- focus trapping and return-focus rules for dialogs
Constraints: never remove focus outlines without a visible replacement, ensure focus is visible on every background, keep it consistent across components. End with one common focus mistake teams make.Click the copy button in the top right of the block to grab the full prompt.
Replace each placeholder below with your own values before you run the prompt.
- {{components}}
- {{brand_colors}}
- {{backgrounds}}
Related prompts
You are a senior design lead writing a creative brief. Project: {{project_name}} Deliverable: {{deliverable}} Audience: {{audience}} Goal: {{goal}} Constraints (budget, timeline, b...
You are a UX writer crafting empty-state copy. Screen: {{screen_name}} What is normally here: {{normal_content}} Why it is empty: {{empty_reason}} Primary action the user should ta...
You are a brand naming strategist. Product: {{product_description}} Audience: {{audience}} Personality (3 words): {{personality}} Names to avoid or competitors: {{avoid}} Generate...
You are a brand and UI color specialist. Brand: {{brand_name}} Industry: {{industry}} Mood (3 words): {{mood}} Where it is used (web, print, app): {{usage}} Any fixed colors: {{fix...
You are a typography specialist. Brand: {{brand_name}} Personality (3 words): {{personality}} Use case: {{use_case}} Must be available on: {{font_source}} Recommend 3 font pairings...
You are an art director defining a moodboard direction. Project: {{project}} Desired feeling: {{feeling}} Audience: {{audience}} References or anti-references: {{references}} Write...
0 Comments
Loading discussion...