Dark Mode Design for BlackBerry HUB+ - Including Secure Inbox App, Calendar, Contacts, Notes, Tasks, Passwords Keeper, Power Battery Center and other security-focused apps.
Illustrations for Light Thene - BlackBerry Hub+ Services
Design Impact & Insights
Established theme-aware contrast and color rules that improved readability across dark and light modes.
Replaced traditional white space with spacing, elevation, and surface contrast in dark interfaces.
Preserved semantic meaning and hierarchy across themes to support fast scanning and decision-making.
Designed for extended, real-world usage across varied lighting conditions and devices
Creating an inclusive experience with careful consideration of color exploration and an understanding of various design principles that prioritize accessibility and diminish the reliance on color as the sole conveyor of critical information.
Design Principles Validation
Visual Hierarchy in Dark Mode defined using surface contrast and tonal layers rather than shadows
High-contrast text and icons established to support readability across lighting conditions
Mobile layouts ignored ergonomic reach and scanning patterns
Avoiding relying solely on ColorColor-independent UI states designed using labels, icons, and structural cues
Accessibility validation through WCAG contrast and internal usability testing
Testing with users Conducting usability testing to get valuable insights into the user experience that can help identify areas that may need improvement.
Design & System Constraints
Design SystemBuilt a theme system that supports dark and light modes without relying on color inversions
Hierarchy Defined scalable contrast, spacing, and hierarchy rules to replace traditional white space in dark UI
BrandingEstablished theme-aware color semantics to preserve brand meaning across modes
Accessibility for low-light use Balanced accessibility requirements with visual comfort for extended, c
Consistency Enabled consistent theming across multiple productivity apps and device sizes
Accessibility and Colour Exploration
Dark Theme testing colour variations
Dark Theme Top Bar Color Explorations
Dark Theme Action Bar Color Explorations
Dark Theme Action Bar Color Explorations
Design System Breakdown
Color Spec
UI Spec
Layout General Template
Illustrations
Illustrated background adjusted for Dark and Light background.
Explore here more Illusrrtations & Onboarding screens
Light vs Dark Example
Dark Mode Design for BlackBerry HUB+ - Including Secure Inbox App, Calendar, Contacts, Notes, Tasks, Passwords Keeper, Power Battery Center and other security-focused apps.
Summary
Designing accessible products requires balancing brand expression, usability, and real-world constraints across diverse users and environments. While leading the Dark Theme Guidelines for BlackBerry products, I researched industry standards and accessibility requirements to address challenges unique to dark and light interfaces—particularly around contrast, color perception, and long-duration use.
Rather than treating dark mode as a visual preference, this work focused on building a flexible, standards-compliant theming system that supports both dark and light modes, allowing users to choose what works best for them. The outcome was a more inclusive, scalable design approach that improved accessibility, preserved brand integrity, and reinforced user trust across BlackBerry’s productivity ecosystem.
