Dark-mode-first or brand-first? How Chatterbox tested a design-system fork for a millennial social app

Design · 5 min read

Chatterbox's product team was split: some designers argued that dark-mode-first components matched user preferences and reduced battery use on OLED devices, while brand advocates wanted a signature, color-forward identity to stand out in a crowded market. Rather than choose blindly, leadership approved an experiment to test both system branches on matched cohorts.

Designers built two forks of the component library. The dark-mode-first branch used contrast-optimized surfaces, muted accent tones, and focus on micro-interactions. The brand-first branch kept vivid accents and higher saturation with an accessible light-mode baseline. Both forks shared identical interaction patterns; only visual tokens differed. Researchers measured engagement, session length, accessibility issues reported, and qualitative sentiment through in-app feedback.

Results showed the dark-mode-first branch increased evening-session retention by 9% and lowered reported glare complaints by 68%, while the brand-first branch performed better on discoverability of new features (+7%) and net-new installs driven by marketing creative. The team decided on a hybrid approach: dark-mode as the default for existing users based on time-of-day and a brand-forward onboarding experience for new installs. The experiment highlights how design-systems can be productized and evaluated with real user signals.