
prologue
Chapter 00
The Previous Dark Mode Color Palette Caused A Myriad of Problems
Mobile design and engineering necessitate a meticulously crafted color palette for dark mode. Our present color palette is inefficient and not user-friendly. We required a robust and thoughtfully planned color palette to provide our engineers with comprehensive designs and, more importantly, to enhance the experience of our dark mode mobile users.
Chapter 01
Memories of Schema 2021
I watched a presentation by the Asana design system team at the 2021 Figma Schema Conference. They explained their process for creating a dark mode for their product. This presentation was my favorite from Schema 2021, so I had already watched it multiple times. I expected creating a dark mode color system to be a simple and systematic task. I never gave it much thought, assuming it was just a matter of inverting and adjusting the colors from the light mode. However, I was completely mistaken, as I learned from this keynote and by correctly implementing it for my own project.
Chapter 02
Developing a Strategy Before Taking Actionβ¦This Time
After delving into the depths of iconography, I learned to never underestimate any discipline in design again. I recognized that color theory was no different. I also came to the realization that I was a level five designer taking on a level twenty mission. This situation was less than ideal for most entry-level designers, given that I was self-taught and had several knowledge gaps. However, I welcomed the challenge. This meant that I had to either elevate myself to a level twenty designer by the end of this project or start seeking a new role. (*Do not try this at home.)
I conducted extensive research and studied the Human Interface Guidelines and Material Design Guidelines. This allowed me to gain a comprehensive understanding of how color should be used in interface design, particularly in the context of dark mode.
The Human Interface Guidelines provide best practices and recommendations for designing user interfaces on Apple platforms, including iOS and iPadOS. These guidelines emphasize the importance of creating visually appealing and accessible designs that enhance the user experience. In the case of dark mode, the guidelines provide specific recommendations for adapting colors, maintaining contrast ratios, and ensuring legibility in low light environments.
Similarly, the Material Design Guidelines provide guidance for designing interfaces across different platforms, including Android. These guidelines focus on creating consistent, intuitive, and visually engaging experiences. They offer insights into color usage, including how to create color palettes that work well in both light and dark modes. By studying these guidelines, I gained valuable knowledge about the principles and considerations for designing effective color systems in dark mode.
Chapter 03
Using the Leonardo Color Tool to Develop the Dark Mode Variants
Mobile design and engineering necessitate a meticulously crafted color palette for dark mode. Our present color palette is inefficient and not user-friendly. We required a robust and thoughtfully planned color palette to provide our engineers with comprehensive designs and, more importantly, to enhance the experience of our dark mode mobile users.
Chapter 04
Listening for the Mentioning of the Component
Mobile design and engineering necessitate a meticulously crafted color palette for dark mode. Our present color palette is inefficient and not user-friendly. We required a robust and thoughtfully planned color palette to provide our engineers with comprehensive designs and, more importantly, to enhance the experience of our dark mode mobile users.
Chapter 05
The Complexity of Color
Mobile design and engineering necessitate a meticulously crafted color palette for dark mode. Our present color palette is inefficient and not user-friendly. We required a robust and thoughtfully planned color palette to provide our engineers with comprehensive designs and, more importantly, to enhance the experience of our dark mode mobile users.