Design System/Style Guide Creation
Developing a Unified Iconography System for Consistent Visual Language
This prompt helps teams design a unified iconography system as part of a design system or style guide. It ensures icons are consistent, recognizable, and aligned with the brand's visual identity, improving usability and aesthetics across platforms.
Responsible:
Product Design
Accountable, Informed or Consulted:
Design, Product, Engineering
THE PREP
Creating effective prompts involves tailoring them with detailed, relevant information and uploading documents that provide the best context. Prompts act as a framework to guide the response, but specificity and customization ensure the most accurate and helpful results. Use these prep tips to get the most out of this prompt:
Review existing icons or imagery used in the product.
Define the primary use cases and platforms for icon implementation.
Gather feedback on icon clarity or recognition from user testing or analytics.
THE PROMPT
Help create a unified iconography system for [specific product or brand]. Focus on:
Style Consistency: Defining icon styles (e.g., flat, outlined, filled) to maintain visual harmony across the interface.
Scalability: Ensuring icons are designed in vector formats and adaptable to various sizes without losing clarity.
Clarity and Recognition: Using simple, universally recognizable symbols that minimize ambiguity.
Accessibility: Adding descriptive labels or ARIA attributes to ensure icons are screen reader-friendly.
Alignment with Brand Identity: Incorporating elements of the brand's style, such as color palette or unique shapes, into the icon design.
Provide recommendations for designing and documenting the iconography system, including tools (e.g., Figma, Illustrator) and frameworks (e.g., Material Design, Font Awesome). If additional details about the product’s purpose or visual guidelines are needed, ask clarifying questions to refine the suggestions.
Bonus Add-On Prompts
Propose a style guide for icons that balance simplicity with brand uniqueness.
Suggest naming conventions for organizing and referencing icons in a library.
Highlight best practices for designing accessible icons for diverse user groups.
Use AI responsibly by verifying its outputs, as it may occasionally generate inaccurate or incomplete information. Treat AI as a tool to support your decision-making, ensuring human oversight and professional judgment for critical or sensitive use cases.
SUGGESTIONS TO IMPROVE
Focus on industry-specific icon needs, such as medical or financial symbols.
Include recommendations for creating animated or interactive icons.
Highlight multi-language considerations for culturally sensitive icons.
Propose strategies for integrating icons with text labels in the UI.
Add tips for testing icons with users to ensure clarity and usability.
WHEN TO USE
During the development of a design system or visual identity.
To create or refine icons for a product’s interface.
When standardizing icons across multiple teams or platforms.
WHEN NOT TO USE
If the product does not use icons or graphical symbols.
When focusing solely on other visual elements, such as illustrations or photos.