Create Comprehensive User Interface Style Guides for Consistent Design
This prompt directs a professional UI/UX designer to create a comprehensive User Interface (UI) style guide based on provided brand and project details. It requires defining visual and interaction standards including color palettes, typography, iconography, layout, and component usage. The output must be a structured style guide document that ensures design consistency across platforms and guides development teams effectively.
Act as a professional UI/UX designer with expertise in creating cohesive design systems. Based on the provided [BRAND NAME], placeholder, [PROJECT DESCRIPTION], placeholder, and [TARGET PLATFORM(S)], placeholder, create a detailed User Interface (UI) style guide that defines the visual and interactive standards for the product. Include specifications for color palettes, typography, iconography, spacing, layout grids, button styles, form elements, and component usage. Ensure the style guide addresses accessibility considerations and responsive design principles. Deliver the results as a structured style guide document that enforces design consistency and facilitates collaboration between design and development teams.
Highlighted text is a blank. Swap it for your own detail before you send the prompt.
What it produces
- A style guide defining primary and secondary color palettes with HEX and RGB values.
- Typography guidelines specifying font families, sizes, weights, and line heights.
- Iconography standards including style, size, and usage rules.
- Layout grid system with spacing and margin rules for responsive design.
- Component usage examples such as buttons, forms, and navigation elements.
How to use this prompt
Four steps, about a minute. Nothing to install and no account needed.
Copy the prompt
Use the Copy button above. The whole prompt goes to your clipboard exactly as written. Nothing is trimmed.
Fill in the blanks
Replace [BRAND NAME] [PROJECT DESCRIPTION] [TARGET PLATFORM(S)] with your own details. Everything in square brackets is a blank for you to fill in.
Paste it into your assistant
Checked against ChatGPT, Claude, Gemini. It is written as plain instructions, so paste it into whichever of them you already use.
Read the result, then push back
Compare what you get to the example below. If it is close but not right, say what to change: shorter, warmer, more specific, then ask again in the same conversation.
More prompts like this one
Close neighbours in Branding, by shared subject and tagging.
- Brand Color Palette Recommendation with Strategic Rationale
- Create a Comprehensive Contact Us Page Blueprint for Customer Engagement
- Strategies to Integrate Branding and Personality into FAQ Sections
- Create Balanced Bold and Eye-Catching Design Without Overwhelm
- Guide to Structuring Content with Proper Heading Hierarchy for Enhanced Navigation and Comprehension
- Expert UX Design Consultation Template for User-Centric Digital Experiences
Reviews and questions
What other people got out of this prompt, and what they asked about it.
Sign in to review this prompt.
Sign In to ReviewNo reviews yet
Be the first to share how this prompt worked for you.
Ask how to customize, adapt, or use this prompt more effectively.
Sign In to AskNo questions yet
Have a question about using or customizing this prompt? Be the first to ask.