The Scenario
A productivity app has a polished light-mode design. Users have been requesting dark mode for months. The design team needs a comprehensive dark mode specification — not just "invert the colours."
The Brief
Design the dark mode conversion specification. Cover colour mapping, contrast ratios, elevation representation, component state changes, and image/icon handling.
Deliverables
- A colour mapping table: each light-mode colour and its dark-mode equivalent with WCAG contrast ratios
- An elevation strategy: how shadows, borders, and surface colours represent depth in dark mode
- Component state changes: how hover, active, disabled, and focus states adapt for dark backgrounds
- Image and icon handling: when to invert, when to add backgrounds, when to swap assets
Submission Guidance
Dark mode is not "white background → #121212." It is a complete rethinking of elevation, contrast, and visual weight. Shadows do not work on dark backgrounds — you need lighter surfaces instead.
Submit Your Work
Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.