A System-First Approach to Dark Mode
2025
A foundational effort to guide dark mode adoption at Wells Fargo through research, accessibility, and system-first thinking.
Agency
Wells Fargo, Bangalore
Tools
Figma
KitchenSync Application
My Role
Research, Design system
Setting the Stage
What is Dark Mode ?
Dark mode is a feature that changes the color scheme of an application or website from light to dark. It's a popular option for those who prefer a less bright and more subdued interface.
What Dark Mode Is Not ?
Dark mode is not a simple color inversion or a visual skin applied on top of existing designs. It does not automatically improve accessibility, performance, or usability if not designed intentionally.
Without clear principles and system support, dark mode can easily introduce contrast issues, visual noise, and inconsistency especially in large, regulated products with dense data and complex UI states.
Why Dark Mode Became Necessary ?
Market & Industry Movement - Dark mode was becoming a baseline feature across financial applications, signaling a clear shift in industry standards rather than a visual trend.
User Expectations & Behavior - User insights showed strong preference for dark experiences, especially among users who keep their system UI in dark mode and use the app in low-light environments.
Business & Product Context - Dark mode was viewed as a system-level capability—one that could reduce future design and development effort through scalable theming.
Quick Wins & Value
-
Better comfort in low-light usage
-
Alignment with system-level dark mode
-
Foundation for tokenized, scalable theming
My Role
I was a core contributor, focused primarily on research and system foundations.
Responsibilities
-
Dark mode research across domains
-
Fusion 1.0 audit for dark mode readiness
-
Defining principles and guidelines
-
Supporting leadership reviews with insights and explorations
Research Landscape
Learning from outside before deciding inside
Industry & Thought Leadership
Nielsen Norman Group
Dark mode improves comfort in low-light conditions but does not automatically improve usability
Poor contrast, excessive saturation, and incorrect hierarchy can reduce readability
Dark mode requires deliberate design decisions, not simple color inversion
Banking & Financial Platforms
BBVA, Scotiabank, Bank of America
-
Dark mode is treated as a controlled, accessibility-first experience
-
Conservative use of color to maintain clarity and trust
-
Strong emphasis on readability, contrast, and compliance
Pattern observed
Regulated environments prioritize restraint, consistency, and accessibility over visual expression.
Cross-Domain Products
-
Non-banking applications
-
Clear hierarchy through tonal contrast rather than color
-
Minimal use of pure blacks; preference for dark grays
-
Reduced visual noise through softer borders and restrained highlights
Observation: Real-world usage revealed gaps between intent and execution in dark mode adoption.
Light to Dark Mode: Visual & System Behavior
This comparison looked at how Groww, PhonePe, and Coin by Zerodha translate their interfaces from light to dark mode. Across these applications, dark mode was not treated as a direct color inversion but as a controlled rebalancing of surfaces, contrast, and color intensity. Brand and accent colors were softened to avoid visual fatigue, backgrounds shifted to darker neutrals, and primary actions were adjusted to retain clarity without overpowering the interface. Icons, banners, and interactive states showed improved tonal hierarchy, while accessibility was handled through careful contrast management rather than extreme brightness.
Design Systems & Dark Mode
System-level approaches
Token-based color systems enable scalable theming
Separation of semantic and visual tokens improves flexibility
Light, dark, and black modes require different contrast strategies
Reference: Zerodha’s black mode highlighted how extreme dark themes change hierarchy and perception.
Key Insights
What emerged across all research ?
-
Across domains and systems, a few consistent patterns stood out.
-
What Worked Consistently
-
Dark mode performs best when treated as a system capability, not a visual layer
-
Controlled contrast and tonal hierarchy improve readability
-
Muted surfaces and restrained color usage reduce cognitive load
Repeated Pitfalls
-
Simple color inversion breaks hierarchy and accessibility
-
Brand colors often fail contrast requirements on dark surfaces
-
Shadows, borders, and strokes behave unpredictably in dark mode
Core Takeaway
Dark mode requires intentional design rules, clear principles, and system-level thinking to scale effectively.
Fusion 1.0 - Dark Mode Audit
What emerged across all audit?
-
Component Behavior
Many components assumed light surfaces, causing shadows and outlines to lose clarity on dark backgrounds and weakening visual hierarchy. -
Brand & Color Challenges
Brand and accent colors struggled with contrast in dark mode, often appearing either too muted or overly dominant. -
Accessibility Gaps
Text and interactive states failed contrast needs, with focus, hover, and disabled states lacking clear visibility.
Outcome
The audit highlighted the need to evolve components and tokens to support dark mode at a foundational level.
Defining Dark Mode Foundations
A set of core principles was defined to guide dark mode implementation across the system.
Contrast & Accessibility First
Dark mode must meet accessibility standards by default, not as a corrective step. Text and interactive elements are designed to maintain sufficient contrast without relying on pure white-on-black combinations, reducing eye strain while ensuring readability across lighting conditions. Accessibility is treated as a baseline system requirement.
Hierarchy Through Layering
Visual hierarchy in dark mode is established through tonal layering rather than heavy shadows or outlines. Subtle variations in surface brightness create clear separation between background, content, and actions, allowing hierarchy to remain legible without visual noise.
Color Usage
Color in dark mode is used with restraint. Neutral surfaces form the foundation, while brand and accent colors are applied selectively to guide attention and communicate meaning. Semantic color roles are clearly defined to support tokenization and consistency across components.
Adapting Visual Elements
Icons, illustrations, and logos are adapted to maintain clarity and legibility on dark surfaces. Visual elements are simplified where needed to avoid loss of detail, ensuring they remain functional and recognizable without overpowering the interface.
Surfaces, Backgrounds & Effects
Dark mode favors deep gray surfaces over true black to preserve depth and comfort. Elevation is communicated through subtle tonal shifts rather than strong shadows, ensuring consistent surface behavior across components while maintaining a calm visual experience.
Explorations
Focus Areas
Color token exploration for light and dark modes, component behavior on dark surfaces, and accessibility-led contrast adjustments.
Outcome
The audit highlighted the need to evolve components and tokens to support dark mode at a foundational level.
What Was Explored
Buttons, surfaces, and interaction states, along with hierarchy across layered UI elements and consistency across common components.
These were directional explorations, not final designs, used to validate system thinking and inform future implementation.
Outcome & Reflection
Alignment & Communication
The findings and explorations were shared across design, system, and leadership teams through structured walkthroughs and reviews. Presentations to leadership teams in India and the U.S. aligned everyone around a system-first approach to dark mode.
Outcomes & Impact
Dark mode was formally approved as a design-system capability. Color tokens for light and dark themes were defined and adopted, enabling development teams to work with scalable, tokenized variables. The learnings directly influenced Fusion 2.0 guidelines, shifting the system from screen-level styling to components that support both modes without detachment, reducing future design and development effort.
Reflection
This initiative reinforced that visual changes should be treated as system decisions, not surface updates. Grounding dark mode in research, accessibility, and scalability helped transform it from a feature request into a long-term capability for the design system.