Image AI Concept ArtIntermediate5 minSaves 1 hour

Generate UI Settings Screen Mockups: Light & Dark Mode Consistency

Q: How do I ensure accessibility standards are met visually in the output?

Explicitly state 'WCAG 2.1 AA or AAA contrast' in your `{{brand_palette_description}}`. You can also describe specific color pairs, for example, 'dark grey text on light grey background, ensuring AA compliance,' to guide the AI toward compliant designs.

For design system designers, create high-fidelity settings screen mockups, ensuring visual consistency and accessible contrast across both light and dark modes.

Produce a detailed UI mockup for a settings screen, providing both light and dark mode variants. Focus on maintaining hierarchical consistency, legible typography, and compliant contrast ratios to ensure accessibility for all users. Include interactive states and specific layout elements.

Midjourney Flux

READY-TO-USE PROMPT

Copy Prompt

prompt.txt

Role: Act as a senior UI/UX designer with expertise in scalable design systems and accessibility standards.

Context: You are developing the core settings interface for a new {{app_name}} application. The objective is to create a highly functional and aesthetically consistent settings screen, providing distinct light and dark mode variants that adhere to brand guidelines and robust accessibility principles. The design must demonstrate a clear information hierarchy and intuitive user interaction.

Task: Generate two high-fidelity UI mockups: one for the light mode and one for the dark mode of the settings screen. Each mockup should present a comprehensive view of the screen, illustrating how various UI elements adapt to different display preferences while maintaining functional integrity and visual harmony.

Constraints:
* **Screen Type:** A general application settings screen.
* **Layout:** Employ a clean, organized layout, likely a two-column structure (sidebar navigation + main content area) or a single-column scrolling list, as appropriate for a desktop/tablet interface.
* **Key Features:** Include common settings categories such as "General," "Account," "Notifications," "Privacy," "Appearance," and "About." Within these, incorporate specific UI elements like toggle switches, radio buttons, dropdown menus, text input fields, and action buttons. You must incorporate the following specific features: {{key_features_to_include}}.
* **Palette:** The light mode should use a predominantly light background with dark text, while the dark mode should feature a dark background with light text. Ensure both modes maintain an accessible contrast ratio (WCAG 2.1 AA or AAA where possible) for all text and interactive elements. Integrate a subtle brand color accent. Describe the palette using: {{brand_palette_description}}.
* **Typography:** Maintain consistent font families and sizing across both modes. Prioritize legibility.
* **Interactive States:** Show examples of interactive states where applicable (e.g., a selected navigation item, a toggled switch, a hovered button). These states should be visually distinct but not distracting.
* **Consistency:** The visual hierarchy, spacing, and overall user experience must remain consistent between light and dark modes. Avoid any design choices that might compromise usability in either variant.
* **Negatives:** Do not use overly complex or skeuomorphic designs. Avoid garish color combinations or low-contrast text. Do not include any placeholder text like "Lorem Ipsum" – use meaningful labels.

Output:
Provide two distinct, high-fidelity image descriptions suitable for an AI image generator:
1. A detailed description for the **Light Mode** settings screen mockup.
2. A detailed description for the **Dark Mode** settings screen mockup.
Each description should clearly articulate the layout, UI elements, color scheme, typography, and interactive states as described above.

Estimated results

DifficultyIntermediate

Setup time5 min

Time saved1 hour

Best modelsMidjourney, Flux

Best audienceSoftware Development, Product Design

Editor's note

Why this prompt matters

Creating consistent user interfaces across different display preferences, particularly light and dark modes, is a recurring challenge for design system designers. Ensuring visual harmony, functional integrity, and accessible contrast ratios while scaling a design system requires precise execution. This workflow addresses the need to rapidly visualize and validate how core UI components adapt.

This approach is designed for design system architects and UI/UX leads who need to articulate design specifications for development teams or stakeholders. It's particularly useful when prototyping new features or auditing existing ones, providing a quick way to generate high-fidelity mockups without committing to lengthy manual design iterations. By focusing on core settings screens, it tackles a fundamental application interface that often serves as a benchmark for design system consistency.

Reach for this workflow when you need to quickly produce visual evidence of design system adherence across themes, confirming that hierarchy, spacing, typography, and interactive states translate effectively between light and dark variants. It streamlines the initial conceptualization phase, allowing for faster feedback cycles and a clearer understanding of implementation requirements.

Anatomy

Prompt engineering breakdown

Role

Act as a senior UI/UX designer with expertise in scalable design systems and accessibility standards.

Context

You are developing the core settings interface for a new {{app_name}} application. The objective is to create a highly functional and aesthetically consistent settings screen, providing distinct light and dark mode variants that adhere to brand guidelines and robust accessibility principles. The design must demonstrate a clear information hierarchy and intuitive user interaction.

Goal

Generate two high-fidelity UI mockups: one for the light mode and one for the dark mode of the settings screen. Each mockup should present a comprehensive view of the screen, illustrating how various UI elements adapt to different display preferences while maintaining functional integrity and visual harmony.

Constraints

Screen Type: A general application settings screen. Layout: Employ a clean, organized layout, likely a two-column structure (sidebar navigation + main content area) or a single-column scrolling list, as appropriate for a desktop/tablet interface. Key Features: Include common settings categories such as "General," "Account," "Notifications," "Privacy," "Appearance," and "About." Within these, incorporate specific UI elements like toggle switches, radio buttons, dropdown menus, text input fields, and action buttons. You must incorporate the following specific features: {{key_features_to_include}}. Palette: The light mode should use a predominantly light background with dark text, while the dark mode should feature a dark background with light text. Ensure both modes maintain an accessible contrast ratio (WCAG 2.1 AA or AAA where possible) for all text and interactive elements. Integrate a subtle brand color accent. Describe the palette using: {{brand_palette_description}}. Typography: Maintain consistent font families and sizing across both modes. Prioritize legibility. Interactive States: Show examples of interactive states where applicable (e.g., a selected navigation item, a toggled switch, a hovered button). These states should be visually distinct but not distracting. Consistency: The visual hierarchy, spacing, and overall user experience must remain consistent between light and dark modes. Avoid any design choices that might compromise usability in either variant. Negatives: Do not use overly complex or skeuomorphic designs. Avoid garish color combinations or low-contrast text. Do not include any placeholder text like "Lorem Ipsum" – use meaningful labels.

Output format

Provide two distinct, high-fidelity image descriptions suitable for an AI image generator: 1. A detailed description for the Light Mode settings screen mockup. 2. A detailed description for the Dark Mode settings screen mockup. Each description should clearly articulate the layout, UI elements, color scheme, typography, and interactive states as described above.

Why this structure works

This prompt employs explicit constraints to define precise requirements for layout, palette, and interactive states. Role priming as a 'senior UI/UX designer' ensures the model focuses on design system principles and accessibility. The structured output format explicitly requests two distinct descriptions, guiding the AI to produce specific, usable outputs for image generation.

Pick your version

Prompt variations

BeginnerWorks with any model

For new users needing straightforward UI ideas without deep technical design knowledge. Focuses on core elements.

prompt.txt

Imagine you are a UI designer creating a settings screen for a new app called {{app_name}}. I need two versions: a light one and a dark one. Make sure they both look like a standard settings page with options like 'General' and 'Account'. Include simple elements like switches and buttons. The light version should have a light background and dark text, and the dark version should have a dark background and light text. Keep the colors easy to see and use a main brand color like {{brand_color}}. The fonts should be clear. Show how a button looks when you click it. Just give me two separate descriptions for an image generator, one for each mode. Avoid fancy or confusing designs.

ProfessionalBest with midjourney

When a detailed, standards-compliant design is required, matching the main prompt's full scope.

prompt.txt

Role: Assume the identity of a lead UI/UX architect specializing in scalable design systems and adherence to accessibility guidelines.
Context: Your task involves designing the fundamental settings interface for a novel {{app_name}} application. The aim is to deliver a highly functional and visually cohesive settings display, offering distinct light and dark theme variations that align with established brand guidelines and stringent accessibility standards. The design must clearly articulate information hierarchy and facilitate intuitive user interaction.
Task: Create two high-fidelity UI mockup descriptions: one for the light theme and one for the dark theme of the settings screen. Each description should comprehensively detail the screen, illustrating how UI elements adapt to different display preferences while preserving functional integrity and visual harmony.
Constraints:
* Screen Type: Standard application settings.
* Layout: Opt for an organized layout, either a two-column structure (sidebar nav + main content) or a single-column scrolling list, suitable for desktop/tablet.
* Key Features: Incorporate typical settings categories (e.g., "General," "Account," "Notifications," "Privacy," "Appearance," "About"). Include UI elements like toggles, radio buttons, dropdowns, text inputs, and action buttons. Specify {{key_features_to_include}}.
* Palette: Light theme: light background, dark text. Dark theme: dark background, light text. Ensure WCAG 2.1 AA/AAA contrast. Integrate {{brand_palette_description}} as a subtle accent.
* Typography: Consistent font families/sizing across modes. Legibility is paramount.
* Interactive States: Illustrate states (selected nav, toggled switch, hovered button) – visually distinct, not distracting.
* Consistency: Visual hierarchy, spacing, and UX must be consistent between modes. Avoid usability compromises.
* Negatives: No complex, skeuomorphic, garish, or low-contrast designs. Use meaningful labels, no "Lorem Ipsum."
Output: Provide two detailed image generation descriptions: one for Light Mode, one for Dark Mode, covering layout, elements, colors, typography, and states.

Short VersionBest with flux

For quick ideation or when communicating core concepts to a model with limited token context.

prompt.txt

Design a clean settings screen for {{app_name}} in both light and dark modes. Ensure consistent layout, typography, and accessible contrast for all elements, adhering to WCAG 2.1 AA standards. Include common sections like 'General', 'Account', and 'Appearance', with interactive elements such as toggles, radio buttons, and action buttons, specifically {{key_features_to_include}}. Use a subtle {{brand_palette_description}} accent for brand identity. Output two separate, detailed image prompts, one for each mode, focusing on clear hierarchy and functional integrity, avoiding complex, skeuomorphic, or low-contrast designs.

EnterpriseBest with midjourney

For large organizations where compliance, stakeholder alignment, and risk mitigation are critical design considerations.

prompt.txt

Role: Assume the role of a lead design system architect, tasked with defining a compliant and scalable settings interface for {{app_name}}.
Context: The initiative is to establish a foundational settings screen, critical for enterprise application consistency and regulatory adherence. This requires distinct light and dark mode implementations that not only meet brand standards but also rigorously comply with WCAG 2.1 AAA accessibility for all interactive elements and text contrast. The design must support future scalability and mitigate usability risks across diverse user groups.
Task: Develop two comprehensive, production-ready UI mockup specifications: one for light mode and one for dark mode. Each specification must detail element adaptation, visual integrity, and functional consistency, ensuring stakeholder approval and minimizing rework.
Constraints:
* Screen Type: Enterprise application settings, supporting desktop/tablet.
* Layout: A structured, maintainable layout (e.g., two-column sidebar navigation).
* Key Features: Must include standard enterprise settings categories (e.g., "General," "Account Management," "Security & Privacy," "Notifications," "Appearance," "Legal & Compliance"). Specific interactive elements to include: {{key_features_to_include}}.
* Palette: Light mode (predominantly light, dark text) and Dark mode (dark, light text). Absolute adherence to WCAG 2.1 AAA contrast. Integrate {{brand_palette_description}} for brand identity.
* Typography: Enterprise-approved, legible font families and sizing.
* Interactive States: Define all interactive states (focus, hover, active, disabled) for robust user experience and compliance.
* Consistency & Scalability: Unwavering consistency in hierarchy, spacing, and UX across modes, designed for long-term maintenance within a large design system.
* Negatives: Prohibit any design that introduces accessibility barriers, visual clutter, or deviates from established brand governance. Avoid placeholder text.
Output: Generate two distinct, high-fidelity image descriptions suitable for an AI image generator, detailing each mode's layout, elements, palette, typography, and interactive states with an emphasis on compliance and scalability.

What you'll get

Expected output

Light Mode Settings Screen Mockup Description:

A high-fidelity UI mockup of the AetherFlow application's settings screen in light mode, designed for a desktop or tablet interface. The layout features a two-column structure: a narrow left sidebar for navigation and a wider main content area. The background is a clean, bright white (#FFFFFF), with primary text in a dark charcoal gray (#333333). Headings are slightly darker (#1A1A1A) to establish hierarchy.

The left sidebar contains navigation items: "General," "Account," "Notifications," "Privacy," "Appearance," and "About." The "Appearance" item is selected, indicated by a subtle light blue background (#E0F2F7) and a vibrant blue text color (#4A90E2), with a small, unobtrusive vertical bar on the left edge. The main content area displays settings related to "Appearance." It includes a section for "Theme" with radio buttons for "Light," "Dark," and "System Default." Below this, there's a "Data Sync" section with a toggle switch, currently in the 'on' position, displaying the vibrant blue accent color (#4A90E2).

Further down, a "Language" dropdown menu shows "English (US)" as the selected option. A "Keyboard Shortcuts" section presents a text input field for searching shortcuts and a "Customize" action button. A "User Profile" section includes a circular placeholder for a profile picture with an "Upload Photo" button next to it. Finally, a "Billing Information" summary displays a read-only text field with a masked credit card number and an "Update Billing" button. Typography uses a clean sans-serif font like Inter or Roboto, with clear hierarchy in font sizes. All interactive elements have accessible contrast ratios. Hover states for buttons are a slightly darker shade of their default color; active toggle switches are the vibrant blue.

Under the hood

Why this prompt works

This prompt employs several deliberate prompt engineering techniques that contribute to its effectiveness beyond a simple one-line request. First, role priming sets the AI as a "senior UI/UX designer with expertise in scalable design systems and accessibility standards." This immediately frames the AI's perspective, ensuring outputs align with industry best practices for UI/UX rather than generic design suggestions.

Explicit constraints are central to this prompt's success. By specifying "Screen Type," "Layout," "Key Features," "Palette," "Typography," and "Interactive States," the prompt guides the AI to include necessary elements and adhere to specific design principles. The detailed palette description, including WCAG contrast requirements, pushes for accessible and visually consistent outputs. This level of detail prevents arbitrary design choices and ensures the generated mockups are functionally relevant.

Furthermore, the prompt uses negative constraints (e.g., "Do not use overly complex or skeuomorphic designs," "Avoid garish color combinations") to proactively filter out undesirable output characteristics. This helps refine the output by clearly defining what *not* to include. Finally, the demand for structured output—two distinct, high-fidelity image descriptions—ensures the AI delivers a usable, actionable format that directly feeds into an AI image generator, making the entire workflow efficient and predictable.

Model fit

Best AI models for this prompt

Midjourney

Midjourney excels at generating visually rich and aesthetically pleasing UI mockups, often interpreting abstract design principles into tangible visuals with strong composition. Its strength lies in its ability to produce highly stylized images that capture a specific mood or brand feel. See the full Midjourney hub for deeper guidance.

Flux

Flux generally produces cleaner, more functional UI representations, focusing on clear layouts and precise element rendering. It tends to be more literal in its interpretation of design constraints, which can be beneficial for specific technical requirements like accessible contrast and consistent hierarchy. See the full Flux hub for deeper guidance.

When to use

When initiating a new design system's core settings UI.
For presenting consistent light and dark mode concepts to stakeholders or teams.
To quickly visualize specific accessibility contrast applications in a functional context.
When needing diverse UI element examples within a structured settings interface.
For rapid prototyping of desktop or tablet application settings screens.

When not to use

For mobile-specific UI designs; the prompt's layout guidance targets larger screen formats.
When highly custom, experimental, or non-standard UI layouts are required.
If the primary focus is on detailed interaction animations or micro-interactions.
When generating low-fidelity wireframes or abstract UI conceptualization.
For single-mode designs where light/dark consistency and comparison are not needed.

Get more from it

Pro tips

1
Define the `{{brand_palette_description}}` precisely. Include hex codes for primary, secondary, and accent colors to ensure accurate brand representation in both modes, preventing color drift.
2
Be explicit with `{{key_features_to_include}}`. List every required toggle, dropdown, radio button, and text input to ensure the AI renders a comprehensive and functional settings screen.
3
Specify desired font families, weights, and sizing in the `{{typography}}` section. This prevents generic font choices and maintains the intended visual identity and legibility.
4
If using a two-column layout, describe the sidebar navigation elements clearly. State categories and how selection is indicated for a structured and intuitive user experience.
5
Iterate on the `{{app_name}}` and its context. A well-defined application type helps the AI infer appropriate icon styles and overall interface feel, enhancing relevance.
6
For accessibility, mention specific contrast ratios or examples like 'subtle highlight for focus state' to guide the AI towards compliant designs, avoiding inaccessible color choices.
7
Consider information density. If many settings are needed, explicitly request a scrolling list within the main content area for better organization. This prevents cluttered layouts.

Don't ship this

Common mistakes

✗ Providing vague color descriptions, leading to inconsistent or unbranded palettes in the output.
Fix — Use precise color names, hex codes, and specify their roles (primary, accent, background) for both light and dark modes.
✗ Omitting specific UI elements from `{{key_features_to_include}}`, resulting in incomplete settings screens.
Fix — Explicitly list every required toggle, input field, or button for comprehensive mockups, ensuring all components are present.
✗ Generic layout descriptions, causing the AI to generate unorganized or unsuitable screen structures.
Fix — Detail the layout (e.g., 'two-column with left sidebar,' 'single-column scrolling list') and element placement clearly.
✗ Forgetting to mention interactive states, leading to static, uninformative mockups without visual feedback.
Fix — Describe specific interactive states like 'selected navigation item' or 'hovered button' for functional clarity and realism.
✗ Using 'Lorem Ipsum' or similar placeholders despite the negative constraint.
Fix — Always use meaningful, short labels for all text elements to maintain design integrity and usability.
✗ Not specifying contrast guidelines, resulting in inaccessible text and UI elements.
Fix — Reiterate WCAG 2.1 AA/AAA requirements and suggest specific text/background color relationships to guide the AI.

Frequently asked questions

Q.Can I use this for mobile application settings screens?

While core concepts are transferable, this prompt is optimized for desktop/tablet interfaces, especially regarding two-column layouts. For mobile, you'd need to significantly adapt the layout constraints to suit smaller screens and typical mobile navigation patterns.

Q.How detailed should `{{key_features_to_include}}` be in my input?

Be as specific as possible. List each toggle, radio group, dropdown, and text input field individually. For example, specify 'Toggle for Dark Mode, Radio buttons for Language (English, Spanish), Dropdown for Theme, Text input for Username.' Precision yields better results.

Q.Will the AI generate exact hex codes in the resulting image?

No, the AI will interpret your color descriptions and aim for visual similarity. Providing hex codes helps guide the AI more accurately towards your brand's aesthetic, but the output is an image, not a technical style sheet with specific values.

Q.How do I ensure accessibility standards are met visually in the output?

Explicitly state 'WCAG 2.1 AA or AAA contrast' in your {{brand_palette_description}}. You can also describe specific color pairs, for example, 'dark grey text on light grey background, ensuring AA compliance,' to guide the AI toward compliant designs.

Q.Can I request specific icons or illustrations for the settings screen?

The prompt focuses on UI elements and layout. While you can mention 'standard gear icon for settings,' requesting complex or custom illustrations might dilute the primary output. Keep icon requests brief and generic to maintain the prompt's focus.

Q.What if I only need a dark mode or a light mode mockup, not both?

The prompt is structured to generate both for consistency comparison. If you only require one, you can instruct the AI to focus solely on generating either the 'Light Mode' or 'Dark Mode' description in its output, though the prompt's design value is in the comparison.

Version 1.0Last reviewed August 6, 2026

Reviewed by PromptInFlow Editorial Team