Dark Mode

Design a single desktop product screen in dark mode. Treat this as a working interface, not a palette sample: include navigation, a content area, at least one form field, and a primary action so the theme is tested across real components.

Build the screen from a small set of dark tokens: background, elevated surface, border, primary text, secondary text, muted text, accent, and state colors. Use them to show clear depth between page, panel, and control without relying on bright outlines everywhere.

Show the key interaction states the theme needs to support: default, hover, focus, disabled, and selected. Make sure focus is visible on dark surfaces and that controls still read cleanly at small sizes.

The result should feel calm in low light, with enough contrast for scanning and editing, but no glare from pure black or pure white everywhere. Dark mode should look intentional, consistent, and usable across the whole screen.

To truly appreciate Dark Mode, try using your hi-fi mock in a dark environment. Notice how the color palettes and contrasts affect visual comfort and legibility of elements under these conditions.