Skip to content
All work

DNSFilter

Dark mode

Dark mode was the most requested feature. Because the interface was being refactored end to end on a token-based design system, dark mode came along from the start rather than as an inversion pass.

Role
Design lead
Company
DNSFilter
When
2021 to 2025
Industry
Cybersecurity

The approach

Every component reads its color from a semantic token, from data visualizations to buttons, so both themes render from one set of components and both meet the same accessibility bar. Switching is instant and nothing is styled twice.

Walkthrough

Screen 1 of 6. Click the screen or use the arrow keys to step through.

Dark mode color palette: brand, pairing, status, and background colors