Introducing a white theme to a dark-mode-native platform and refactoring for developer consistency
Collaborating with the web developer, I designed a high-legibility white theme for the DANU analytics platform. We established global text styles to solve accessibility issues, transforming a dark-mode interface into a scalable design system.
As the UI Designer, I led the visual development of a new white theme from concept to handoff. Beyond the visuals, I championed the implementation of global text styles, moving the platform away from hardcoded values to create a consistent, scalable design language.
Background information
The DANU Analytics Platform was originally designed as a dark-mode-native platform, and while the design was sleek, it was a significant issue for usability in bright environments. The DANU team requested for me to design a white mode to help with visibility in bright/sun-lit environments and as a new default theme for new medical/clinical clients.
Overview page of the DANU Analytics Platform before the project began.
While I had previously identified issues in legibility in high-light environments, the team did not pursue a project of such scale due to resource and time constraints. The team brought forth the project to me during one the web developer’s down-time.
I also wanted to use this project as a strategic opportunity to create coherence and consistency in the platform’s use of texts and colours. Before my arrival, rapid feature releases had resulted in a fragmented UI with hardcoded styles and inconsistent typography.
Once I received my verbal brief, I created a two-fold strategy: deliver a high-legibility white theme and use the development of the theme as an opportunity to propose a standardisation of the platform’s typographic foundations.
Design process
Since the core problem (poor legibility and lack of a light theme) was validated by the team, I made the conscious decision to skip the first stage of the double diamond process. I didn’t need to waste time on discovery when I knew I needed to jump straight into the ideation stage of the second diamond.
My starting point was volume. I knew that simply inverting the hex code values to bright alternatives would result in a flat, unreadable interface. I needed to find a palette that maintained the DANU brand identity while adhering to the visual hierarchy already in place.
I began by generating a wide array of colour tests, and instantly found that cool greys and blue hues matched the vision for the clinical feeling of the platform while staying true to the DANU brand identity I had created thus far.
Colour tests using hues which match the DANU brand identity.
The colour tests went a step further, as now I had a broad palette to work with, but needed to narrow it down to an exact set of colours which would visually translate the preexisting hierarchy from the dark mode.
Traditionally, when creating a dark mode from a white mode base, it is easy to start with a dark colour as the base primary colour and use brighter tints for the secondary and tertiary colours to create a sense of elevation – the higher up the element, the brighter it is. However, in this case I was working backwards, starting with the dark theme as my baseline, and I couldn’t use pure white as my primary colour as there would be no brighter tints than a pure white.
My experimentation began from using a pure white primary background and working my way up using blue shades for elevation, but nothing stood out to me as a good solution. This direction had two glaring issues, the first being poor contrast between text & the background colour, which led to poor legibility and did not solve the initial issue I was trying to solve. The second issue was that my tests ended up being monochromatic, reducing overall contrast and disinterest. Simply flipping the dark theme status quo of using lighter tints to indicate elevation did not work.
Colour testing brought positive results instantly.
When I pivoted to using a different colour for the primary colour (a cool grey) and white as my secondary colour, things started to look promising and I felt that this direction would bring good results.
After many tests, I settled on a colour for the primary and secondary, but because the chosen secondary colour was almost a pure white, I was not able to use a lighter colour for the tertiary layer with enough contrast. At this point, I had to trade consistency in execution for consistency in outcome; I decided to create the tertiary elevation by using a 1pt dark stroke.
Instead of filling the shape with a new colour, the subtle stroke defined the boundary. This worked really well and was easily legible and maintained the hierarchy without requiring a colour brighter than white!
The final colour design. There were some changes between this and the live product, such as the light/dark theme switch.
Long before I started on this white theme project, I repeatedly wanted to fix significant font and sizing inconsistencies in the analytics platform, however there was never an opportunity for the developer to work on such a project. When this project came around, I saw this as an opportunity to not just give the site a fresh splash of paint, but to also refactor the design system. I proposed and heavily pushed for systemising the typography on the site.
The issue was that before, all text styles were hardcoded throughout the site, creating more work for the developer (always re-entering the style info) and myself (double-checking and following up the design was implemented correctly). Thankfully, the team approved the idea after I had shown them the potential time-saving & efficiency benefits.
I worked closely with the developer and we workshopped the project together, defining a strict type hierarchy (H1, H2, Body, Caption, etc.) that would work across both themes. The new text styles also made the white-theme switch code easier for the developer, which was a win-win scenario for both of us.
Components of the white theme, including the text styles. This is what the developer used to create the reusable white theme components.
Results
While this project didn’t start with a specific KPI like “increase sign-ups”, the impact was felt immediately upon completion in the product quality and developer workflow.
The introduction of the white theme successfully solved legibility issues, with users finding the new theme was much easier to read in bright light environments. This change helped make the DANU platform more accessible to a wider demographic, especially people who struggle with low-contrast dark modes.
Equally as important was the structural change achieved under the hood. By convincing the team to move away from hardcoding and go ahead with the text styles, I achieved:
Visual consistency: the fonts are now cohesive across all pages
Faster workflow: future design changes to the font can be updated globally, and the developer does not need to work as hard to implement new copy.
The result wasn’t just a new coat of paint, it was an evolution of the platform into a more mature, legible, and scalable design system.
Since this project focused heavily on legibility and preference, my primary plan for measuring impact would involve tracking the theme’s adoption rate. Unfortunately, my team considered it an unnecessary metric so I am unable to track what percentage of the user base would adopt the new view. However, from a limited amount of real world testing with users, I confirmed that the white-theme did in fact increase legibility, especially in outdoor scenarios, and no elements of the platform suffered in usability.
It is also worth noting that all new medical/clinic DANU users will automatically have the white theme enabled, with the option to change at any time.
Key learnings
The most significant takeaway from this project for me is that designing a new colour theme is not a simple splash of colour. It is not a simple inversion of colours, but rather a process of translation. The fact that depth is perceived differently in both themes was a challenge at first, but one I was able to overcome and learn from.
This project also reinforced the value of advocating for what I think is important, with the creation of text styles being a huge success. It might have been more work upfront however it has already paid off in efficiency since the project ended. Not to mention, the newfound consistency in fonts is invaluable and a non-negotiable for any professional tool.
© 2026 Kacper Ufniarz