Solora is a bedtime story app. Parents use it at night, often in a dark room with a sleepy child. Building it light-first and adding dark mode later wasn't an option — we had to get dark mode right from the start.
Start Dark, Stay Dark
Most apps treat dark mode as an afterthought. They design in light mode, then invert colours and call it done. The result is usually muddy greys, harsh whites, and contrast issues everywhere.
We did the opposite. Every design decision started with the dark theme, then we verified it worked in light.
What We Learned
1. Pure Black is Harsh
#000000 looks great in mockups but feels aggressive on screens. We use #0A0A0F — still very dark, but softer on the eyes.
2. White Text Needs Hierarchy
In light mode, you can use weight and size to create hierarchy. In dark mode, you need colour too:
- Primary text:
#FFFFFF - Secondary:
#A1A1AA - Muted:
#71717A
3. Glows > Shadows
Drop shadows disappear in dark mode. We use subtle glows and gradients instead — they feel more intentional and premium.
4. Test in the Dark
This sounds obvious, but we tested Solora in actual bedrooms with the lights off. Colours that looked fine on a bright monitor were too harsh at 2am.
The Result
Parents tell us Solora "feels calming" — that's not an accident. Every pixel was designed for the moment when you're winding down with your kid.
Want to see how we approach design for your product? Get in touch.
