Color Systems That Survive Dark Mode
Your light palette is half a system. Here's how to design tokens that work in both modes — without doubling your work.
Sofia Reyes
The mistake everyone makes: design the light theme, then "do the dark version". You end up with two parallel palettes that drift over time.
The cleaner approach: design semantic tokens (surface, text-primary, border-subtle) and resolve them per theme. The component never knows which mode it's in.
Three things to watch
- Pure black is wrong. Use
#0a0a0cor similar. Pure black makes shadows disappear. - Brand colour usually shifts. What looks vivid on white can scream on dark. Test both.
- Keep contrast ratios in lockstep. If body text is 13:1 in light, aim for 13:1 in dark.
Related articles.
DesignDesign Tokens at Scale: Lessons from Migrating 200 Components
We migrated a five-year-old design system to tokens. Here's what we'd do differently — and what was worth the pain.
DesignTypography Pairing in Five Minutes (Without Losing Your Mind)
A repeatable framework for choosing two fonts that work together — without the analysis-paralysis tour of Google Fonts.
DesignThe Underrated Craft of Interface Copy
The best UX writing isn't clever — it's invisible. Three rules we use to write button labels, error messages, and empty states.