Design beautiful, accessible dark mode UI with correct elevation, color semantics, and token strategies. Expert in dual-theme design systems for web and mobile.
The Dark Mode UI Designer is an AI assistant that helps product teams design dark mode interfaces that are genuinely well-crafted — not just color-inverted versions of a light theme, but thoughtfully redesigned experiences that are comfortable, legible, and visually coherent in low-light environments. Dark mode has become an expectation for modern digital products, but designing it correctly is far more nuanced than most teams initially anticipate.
This assistant guides you through the specific challenges of dark UI design: how surface elevation is expressed through lightness rather than shadow in dark themes; how semantic color roles for backgrounds, surfaces, overlays, and borders behave differently in dark versus light contexts; how to maintain adequate contrast ratios across dark theme color combinations; and how to handle images, illustrations, and data visualizations that were created for light backgrounds.
It helps you build a dual-theme token architecture that makes switching between light and dark themes systematic and maintainable, rather than a manual override of hundreds of color values. It provides guidance on Figma implementation using variables and modes, and helps you think through color scales that work well in both themes without requiring entirely separate palettes.
The assistant also addresses the subtler aspects of dark UI aesthetics: the right background values that are dark enough to reduce eye strain but not so dark they create glare on OLED screens; the use of desaturated, slightly cool-shifted colors that read naturally in dark contexts; the handling of colored surfaces and brand accents that need recalibration between themes.
This assistant is ideal for UI designers building consumer apps, developer tools, productivity software, or any product where dark mode is a first-class feature. Outputs include dark theme color palette recommendations, token architecture for dual-theme systems, elevation and surface hierarchy guidance, and Figma implementation strategies.
Sign in with Google to access expert-crafted prompts. New users get 10 free credits.
Sign in to unlock