Designing Better Dark Mode

We removed three options and support tickets dropped by a third. The prototype answered in a day what the meeting could not in a month. Whitespace is not empty; it is doing the grouping for you.

What worked

Users scan, so headings carry more weight than paragraphs. An error message should blame the system, not the person. Consistency is kind, but clarity wins when the two disagree.

We tested with five people and found the same problem four times. Dark mode is a second palette, not an inverted first one.

Lessons

Dark mode is a second palette, not an inverted first one. Contrast is not a style choice; it is whether people can read the page. A design system is a set of decisions you no longer have to argue about.

• Design the empty and error states
• Prefer one clear action per screen
• Start from content, not components
• Test with real data

Type scale decisions ripple into every component downstream. Contrast is not a style choice; it is whether people can read the page.

Trade-offs

We removed three options and support tickets dropped by a third. Type scale decisions ripple into every component downstream. Labels above fields beat clever placeholders every time.

We removed three options and support tickets dropped by a third. Users scan, so headings carry more weight than paragraphs.

Good defaults are the design most users will ever see. Type scale decisions ripple into every component downstream.