SUMMARY
Purpose: A Visual Style Guide ensures cohesion across design, content, and branding by standardising visual and content elements for consistent product experiences.
Design Thinking Phase: Prototype
Time: 1 full-day workshop or 2–3 async sprints
Difficulty: ⭐⭐
When to use:When launching or redesigning a product or design systemTo align cross-functional teams on design direction and voiceTo scale design coherently across distributed teams or touchpoints
What it is
A Visual Style Guide (Visual & Content Design) is a source-of-truth document that codifies the product’s UI patterns, branding attributes, colour systems, typography, iconography, imagery, and content tone. It ensures alignment between design and content teams while providing clear rules for consistent UX across devices or platforms.
📺 Video by NNgroup. Embedded for educational reference.
Why it matters
Visual consistency builds user trust, brand recognition, and accessibility. A strong style guide prevents design drift in multi-team environments and increases efficiencies by reducing redundant decision-making. It supports better handoffs, onboarding, and long-term scalability of design systems. Teams can confidently build interfaces that “feel” right, avoiding time lost in subjective debates.
When to use
- During design system creation or scaling across teams
- When refreshing a brand or adapting for new platforms
- Before development to prevent visual inconsistencies across sprints
Benefits
- Rich Insights: Helps uncover user needs that aren’t visible in metrics.
- Flexibility: Works across various project types and timelines.
- User Empathy: Deepens understanding of behaviours and motivations.
How to use it
- Start with a stakeholder workshop to align on brand values, design tone, and communication principles.
- Audit existing UI patterns, imagery, and tone of voice across products, marketing, and support.
- Document UI elements (e.g., buttons, forms, alerts) with tokenised styles (e.g., colour ramps, font scales).
- Define voice and tone principles for key flows—error messages, onboarding, modals, etc.
- Use diagrams or specimens to show do/don’t examples of visual behaviour (e.g., empty states).
- Iterate with developers, product ops, and content strategists to ensure cross-functional usability.
Example Output
Button Guidelines (Fictional Example – BoldBank App):
- Primary CTA: #1A73E8, 16px bold Roboto, 48px height
- Secondary CTA: Transparent background, 2px #1A73E8 border
- Disabled State: #E0E0E0 background, #A0A0A0 text
- Copy: Action verbs only (“Transfer funds”, “Schedule now”)
Voice Guidelines – Error States:
- Be empathetic and helpful (“Looks like something went wrong. Try again in a few minutes or contact support.”)
- Avoid technical jargon (“404” should never appear in user-facing copy)
Common Pitfalls
- Over-engineering: Avoid bloated guides filled with unused components or speculative edge cases.
- Content Silos: Design and content guidelines often live separately. Merge or cross-link them intentionally.
- Static Documentation: Style guides aren’t one-off deliverables. Keep them alive via shared libraries or design tokens.
10 Design-Ready AI Prompts for Visual Style Guide – UX/UI Edition
How These Prompts Work (C.S.I.R. Framework)
Each of the templates below follows the C.S.I.R. method — a proven structure for writing clear, effective prompts that get better results from ChatGPT, Claude, Copilot, or any other LLM.
C.S.I.R. stands for:
- Context: Who you are and the UX situation you're working in
- Specific Info: Key design inputs, tasks, or constraints the AI should consider
- Intent: What you want the AI to help you achieve
- Response Format: The structure or format you want the AI to return (e.g. checklist, table, journey map)
Level up your career with smarter AI prompts.Get templates used by UX leaders — no guesswork, just results.Design faster, research smarter, and ship with confidence.First one’s free. Unlock all 10 by becoming a member.
Prompt Template 1: “Define a Visual Style Tone for a New Product”
Define a Visual Style Tone for a New Product
Context: You are a Senior Product Designer launching a new SaaS dashboard for financial advisors.
Specific Info: The brand traits are trust, clarity, and elegance. Users range from novice business owners to enterprise executives.
Intent: Generate a cohesive visual style tone to inform colour, typography, and iconography choices.
Response Format: Return as design principles list with 3–5 items per category (colour, typography, icons), each with brief rationale.
Ask for clarification if brand characteristics conflict. Suggest one refinement based on platform best practices.
Prompt Template 2: “Audit Visual Consistency Across Screens”
Audit Visual Consistency Across Screens
Context: You are conducting a UI audit for a native iOS health app in mid-development.
Specific Info: There are inconsistencies in form inputs, colour usage, and system messages.
Intent: Identify and group inconsistencies, recommend alignment strategies.
Response Format: Use a 3-column table: "Element", "Observed Inconsistency", "Recommended Update".
Request screenshots or component documentation if unavailable. Recommend one strategy for preventing future drifts.
Prompt Template 3: “Draft UI Token Naming Conventions”
Draft UI Token Naming Conventions
Context: You’re formalising the design token architecture for a cross-platform style guide.
Specific Info: Tokens should work in both Figma and code (Tailwind).
Intent: Propose logical, scalable token names across colour, typography, and spacing.
Response Format: Grouped bullet list by token type with at least 3 example mappings per type.
Ask whether semantic or functional naming is preferred. Suggest token structure for accessibility variants.
Prompt Template 4: “Document Voice Rules for Empty States”
Document Voice Rules for Empty States
Context: You’re defining UX writing patterns for empty states in an e-commerce app.
Specific Info: Brand tone is friendly and empowering. Error, zero-state, and logged-out are key scenarios.
Intent: Create a guideline document for voice, length, and structure.
Response Format: Table by scenario: Scenario, Tone Guidance, Sample Message.
Ask for a sample persona to tailor tone alignment. Prompt for real product examples to validate tone.
Prompt Template 5: “Generate Icon Style Guidelines Pros and Cons”
Generate Icon Style Guidelines Pros and Cons
Context: You’re assessing two icon styles: rounded vs. sharp corners.
Specific Info: The product is a B2B admin portal used mainly on desktop.
Intent: Analyse pros and cons of each icon set for usability and brand consistency.
Response Format: 2-column comparison chart with annotations.
Suggest additional icon traits (e.g., filled vs outline) to stress test selection further.
Prompt Template 6: “Review Font Pairing Options Aligned to Tone”
Review Font Pairing Options Aligned to Tone
Context: You're designing an AI writing tool for mobile and web platforms.
Specific Info: Brand tone values approachability and performance. Body content is long form.
Intent: Suggest 3 font pairings with accessibility-tested rationale.
Response Format: List view: Heading Font + Body Font + Justification + Accessibility Notes.
Request regional constraints (e.g., APAC markets) to recommend system-safe fallbacks.
Prompt Template 7: “Create Do/Don't Guidelines for Button Content”
Create Do/Don't Guidelines for Button Content
Context: You're documenting content rules for button CTAs used in modals and mobile cards.
Specific Info: Buttons should be clear, concise, and mobile readable.
Intent: Generate Do/Don't guidelines that can be embedded into a design system.
Response Format: Side-by-side examples under 3 categories (Length, Clarity, Tone).
Ask whether multilingual UI is relevant. Recommend follow-up test with screen readers.
Prompt Template 8: “Estimate Colour Contrast and Suggest Fixes”
Estimate Colour Contrast and Suggest Fixes
Context: You’re verifying contrast ratios in a legacy banking app’s UI kit.
Specific Info: The current palette may not meet WCAG AA. Key colours include #236AB9, #F4F6FB, and #878787.
Intent: Report any non-compliance and propose accessible replacements.
Response Format: Table: Original Colour Pair, Contrast Ratio, Compliance Status, Suggested Fix
Request user context (e.g., typical environments or common user impairments) to prioritise fixes.
Prompt Template 9: “Compare Illustration vs Icon Use in Onboarding”
Compare Illustration vs Icon Use in Onboarding
Context: You’re designing an onboarding sequence and debating between illustrations or UI iconography.
Specific Info: Illustrations are branded but larger file size; icons are inline but less expressive.
Intent: Evaluate pros and cons by onboarding step.
Response Format: 2-column comparison for each step: Onboarding Step, Preferred Visual Style + Explanation.
Prompt for device constraints or localisation needs to optimise decision.
Prompt Template 10: “Generate a One-Pager Visual Brand Summary”
Generate a One-Pager Visual Brand Summary
Context: You’re preparing onboarding resources for new freelance designers on your product.
Specific Info: The product has defined brand values, colour palette, font styles, and iconography.
Intent: Compile these into a shareable PDF for style onboarding.
Response Format: Headings and bullet points ready to place in Figma or PDF: Logo Usage, Colours, Type, Icon Style, Tone.
Ask for team onboarding pain points to better prioritise what belongs in the one-pager.
Recommended Tools
- Figma: For interactive documentation and visual token systems
- Zeroheight: For maintaining style guides with live components
- Stark Plugin: For accessibility checks on contrast and text legibility
- Google Fonts or Fontshare: For quickly testing open-source font pairings
- Design Tokens (by W3C): For structuring cross-platform style systems
