Dopastep — a focus app designed to be looked at less, built with Tailwind v4

[androidwangchong]

Dopastep — https://dopastep.com — a focus app where you work through a task alongside other people in a live room.

Built solo on Next.js with Tailwind v4 (@tailwindcss/postcss).

The design problem was unusual for a productivity app: the screen is meant to be looked at less, not more. It's a room you sit in while doing something else, so anything that pulls attention — animation, notifications, chrome — works against the product. Most of the styling effort went into taking things away.

Two things Tailwind v4 made easy:

• The whole thing runs on a very small token set (one accent, a neutral ramp, two type sizes that matter), and v4's CSS-first config meant those live as real custom properties rather than a JS config object — so the timer phase can shift the palette by swapping variables instead of toggling class lists on a tree of elements.
• Rooms have exactly two visual states (focus / break) and everything else is derived from them. Keeping that as a data attribute on a container plus variant selectors, rather than conditional classNames everywhere, kept the room component readable.

Launched July 2026. Feedback on the visual restraint — or on where it's gone too far and reads as unfinished — genuinely welcome.