When we started designing Focusly, we had a constraint that most product teams wouldn't impose on themselves: every design decision had to actively reduce cognitive load, not just avoid adding to it. Neutral wasn't good enough. The interface had to feel quieter after each iteration, not just the same.

That constraint shaped everything — from the background color to the spacing scale to the way we handle notifications. Here's how we arrived at each major decision and why we believe calm design is the future of tools for knowledge workers.

The background color is not black

The Focusly background is #08080D — a very dark navy-black with a slight blue undertone. This was an intentional departure from pure black (#000000), which creates too much contrast with light elements and causes visual fatigue over extended sessions.

The blue undertone is subtle enough to be invisible in isolation but creates a sense of depth and atmosphere when combined with the purple accent system. It feels like looking at a well-designed workspace rather than a terminal window.

Why we chose purple as the accent

Purple sits between blue (trust, technology) and red (urgency, action) on the emotional spectrum. For a productivity tool, this is the ideal position — it signals something worth paying attention to without triggering the stress response that red-adjacent colors create.

More practically, purple is underused in the productivity software space. Most tools default to blue. The distinctiveness of purple made Focusly immediately recognizable in screenshots and in motion — which matters enormously for a Framer marketplace template.

Information density as a design lever

Most productivity tools are too dense. They try to show everything at once because showing everything feels thorough. But thorough and useful aren't the same thing. A dashboard that shows 40 pieces of information is less useful than one that shows 8 — if those 8 are the right 8.

In Focusly, every piece of information on the main dashboard view earned its place by answering one question: does this help the user decide what to do next? If it didn't answer that question, it moved to a secondary view or a detail panel.

Typography as atmosphere

DM Serif Display for headlines creates an editorial quality — it feels like something worth reading rather than something to scan. DM Sans for body text and UI elements is neutral enough to disappear, which is exactly what UI typography should do.

The contrast between the two families isn't just aesthetic. It creates a clear signal hierarchy: Serif = this is a headline, pay attention. Sans = this is supporting information, process and move on. Users internalize this hierarchy without being told about it, which means they orient faster on each screen.

The things we removed

The most important design decisions in Focusly were the things we took out. No sidebar badges that pulse. No notification dots on the nav. No empty state illustrations. No onboarding tooltips. No confetti on task completion. Each of these is a tiny interruption — a small claim on attention that adds up over hundreds of interactions per day.

Calm isn't the absence of features. It's the presence of exactly the right features, with everything else removed. That's harder to design than adding things. It requires saying no constantly, and defending those decisions under pressure.