To stand out in a crowded parenting app space, Napper needed more than a UI refresh — it needed a unified visual system that could flex between the functional demands of a data-driven product and the emotional warmth of a brand built for sleep-deprived parents.

We set out to design a system that could:

• Feel warm and friendly across every touchpoint, from App Store to smartwatch
• Bridge the gap between clinical precision and emotional reassurance
• Scale across platforms — phone, tablet, widget, watch — without losing its soul

We developed a brand identity rooted in warmth, trust, and gentle intelligence. Central to the system is the Napper Brand Scale — a framework that maps the full spectrum of visual expression, from the light, image-driven warmth of marketing to the dark, illustration-led functionality of the app.

The scale isn’t a rigid rule. It’s a guide: marketing material leans into warm, light colors and emotional imagery. The app lives in dark mode with illustrated elements, designed for parents navigating screens in dimly lit rooms. And in between — website, presentations, app store assets — the brand flexes depending on context and message.

Everything within the Napper brand should feel warm and friendly. That’s the non-negotiable.

The color system follows a deliberate gradient. Light, earthy Napper Brand tones anchor the marketing side. Dark, rich Napper Land colors drive the in-app experience. The middle ground — website, presentations, app mockups — draws from both, depending on whether the context is about the product itself or the softer emotional story around it.

At the heart of the app lives Napperland — an illustrated world built in layers, each with its own color logic. Foreground elements are brighter and more saturated, drawing the eye to what matters most. Highlights — stars, flowers, small details — add vivid accents around the focal point. Backgrounds sit darker and more muted, giving depth without competing for attention. And the sky shifts between tones of blue, pink, and purple, setting the mood of each scene.

This layered system gives Napper’s illustrators and designers a clear, flexible framework to create new compositions that always feel part of the same world — whether it’s a bedtime scene, a nap tracker screen, or a push notification.

Our collaboration extended deep into the product. We refreshed the app’s UI across phone, widget, and Apple Watch, building on the circular motifs that echo Napper’s signature 24-hour clock dashboard. The interface is designed for one-handed use by exhausted parents — large tap targets, high contrast in dark mode, and information hierarchy that surfaces the next actionable step without overwhelm.

“Napper is a product born from real parental experience. Our job was to make that story visible — from the very first website visit to the hundredth time a parent checks the app at 3 AM.”

Oskar Pettersson Hedin, Design Director

From sleep tracking to sound playback, onboarding to trend charts, every screen balances data density with emotional calm. The app should feel like a reassuring companion, not another source of anxiety.

The widget and smartwatch experiences strip the interface down to essentials: the next nap window, a quick-start timer, the current sleep prediction. Just enough to be useful in a glance, without pulling a parent out of the moment.