Why my screen time app looks like a handheld game from 2005

ControlMole — Mon, 19 Oct 2026 18:07:05 +0000

Most screen time apps look like a bank. Clean white cards, a thin progress ring, a calm blue accent, and a notification that says "Limit reached." They are tidy and sensible, and I swipe them away without a second thought. That's the problem. If an app is going to stand between me and my fifth hour of short videos, it can't feel like a settings page. It has to feel like someone.

So when I started ControlMole, a screen time app for Android, I gave it a someone: a grumpy little mole in a red headband. You give your scrolling apps a daily limit, and when you go over it, Mole bursts out of his molehill and closes the app until tomorrow. If you ask for five more minutes, he makes you answer a question first, and every snooze gets harder.

The other decision came right after: the whole app should look like a cosy handheld game from around 2005. Not a modern app with a mascot sticker in the corner, but a small, warm, slightly chunky world with crisp pixels, cream menus and a character who lives in it. This post is about how that look is made, and about the things I threw away along the way.

Why a cosy old game?

There's a reason those mid-2000s handheld games still feel nice to hold. The characters were made from very few polygons, so they had to be bold and simple. The colours were painted on rather than lit. Everything sat on a tiny screen, so every pixel had a job. The result was friendly and readable, and it never tried to impress you with realism.

That's exactly the tone I wanted for an app that tells you off. Being scolded by a sleek, glowing interface feels like being judged by a machine. Being scolded by a grumpy toy mole who says "dig dig" feels more like a friend who's had enough of your nonsense. The look does half the work of making the rules feel fair.

It also gave me a strict set of rules, which turned out to be the best part. Once you decide "this is a 2005 handheld game", a hundred small design questions answer themselves.

Building Mole from a few rounded shapes

Mole is a low-poly 3D model, built in Blender from a handful of rounded primitives: an ellipsoid body, a big head, little cone and lathe shapes for the snout, paws and feet, and a band wrapped around his forehead. Lathes get six to ten sides, no more. The whole character is 982 triangles. The faceting is meant to show. If you can't see the flat faces on his belly, he's too smooth.

Proportions come from toys rather than animals: a big head, a short round body and simple shapes that still read as a mole when you squint at the silhouette. Each model is built by a small Python script inside Blender, which means I can change his snout length or the size of his paws in one place and rebuild every render. A .blend file is saved next to it too, so I can still push vertices around by hand.

Mole's character sheet: 982 triangles, one 256 × 256 texture with twelve expressions as tiles, no lights.

Mole from the front, side and back.

His face lives on a single 256 × 256 texture, painted pixel by pixel. Each expression is a tile on that texture (zen, proud, focused, fired up, annoyed, unimpressed, shocked, sad, smug, furious and a couple more), and changing his mood just means pointing the face at a different tile. It's the same trick old games used for faces, and it's still the cheapest way I know to give a tiny character a lot of feelings.

Flat colour, three tones, no lights

There are no lights in the scene. None. Every material is pure emission, so Blender just shows the colour I give it. The shading is faked: a direction fixed to the camera decides whether each face gets the light tone, the base tone or the shadow tone, with hard edges between them and a small white glint on top.

The three tones come from one base colour. The light tone is the base multiplied by (1.6, 1.5, 1.25), which warms it up. The shadow tone is the base multiplied by (0.66, 0.62, 0.80), which pushes it towards a cool purple. That purple matters more than anything else in the look: grey shadows make a character look dirty, and purple ones make him look painted. I always pick the base as the middle tone, mid-saturated, and let the shader do the rest.

The palette is small and fixed: chestnut fur (#8C5433), a cream bib (#FBF3E2), the headband red (#E5483A), a muddy dirt brown for molehills and an ink colour (#17142B) for every outline and every letter. A new colour has to sit happily next to the chestnut, cream and red, or it doesn't go in.

Render tiny, scale up whole

The next rule is the one that makes the pixels: render small, then scale up by a whole number using nearest neighbour.

Mole gets rendered in Eevee at the size he'll actually be on screen, which is tiny. One sample, filter width zero, the Standard view transform, no dithering. Everything that would normally smooth the image is turned off, so each pixel is a hard, flat colour from the palette. Then the image is scaled up by an exact factor (2×, 3×, 4×) with nearest neighbour, so every art pixel becomes a clean square block. A fractional scale like 2.5× would smear the edges, so it's never allowed.

The 1-pixel ink outline

Old sprites had outlines, and a flat-shaded model without one looks like a cut-out. So every render goes out in two passes: the colour pass, and a second pass that stores depth and a part number for every pixel. Each separate part of the model (head, snout, paw, headband) has its own number.

The finishing step reads both. It draws a 1-pixel ink line around the whole silhouette, and darker inner lines wherever one part overlaps another, using the depth jump and the change in part number to find those edges. That's what lets you see his paw in front of his belly, even though both are the same chestnut. A couple of parts are left out on purpose: the whiskers and the soft blob of shadow under his feet get no outline, because outlined whiskers look like scratches.

The four steps: rendered tiny at actual size, emission only with three hard tones, the depth and part pass, then the 1-pixel ink outline and the nearest-neighbour upscale.

Keeping pixels crisp on a phone

All of that is wasted if the phone blurs it. Phone screens have odd densities, and an image dropped into an app at its "natural" size usually ends up scaled by something like 2.75, which turns crisp pixels into mush.

So the app works in whole physical pixels. Sprites are shown at a whole number of screen pixels per art pixel (three on a typical 1080-pixel-wide phone), with filtering switched off. The interface has its own unit: one UI pixel is about 2.2 dp, snapped to whole physical pixels, and every margin, border and button is a multiple of it. Text sizes snap to whole pixels too, so the bitmap font never goes soft.

A DS-style menu around him

The interface is built like a game menu rather than an app. Panels are cream boxes with notched pixel corners and ink borders. Behind them, a two-tone checkerboard "paper" drifts slowly. The primary buttons are headband red; the secondary ones are cream with muted text, and they're small on purpose, because the easy way out shouldn't be the big shiny button. Dialogs slide up from the bottom with a speech bubble from Mole.

Motion follows the same thinking. Small pops, hops and shakes move in a few hard steps, like a sprite animation. Big slides across the whole screen run at full frame rate, snapped to whole pixels, because a few hard steps across a whole page just read as lag. That one took me a while to learn.

The home screen: cream panels, the checkerboard paper and Mole in his molehill.

What I threw away

The rules didn't arrive all at once. Most of them came from trying something and hating it.

Mole himself. The first version was a dark blue mole with a pink nose and pink paws. He was fine, but he looked like every other cartoon mole, and at small sizes the dark blue swallowed his face. I tried a few fur colours, including a sandy one, before chestnut won. The red headband came later, and it's what made him him: one bold shape that reads at any size and keeps him from looking like any other mole you've seen in a game.

How he started: the first, dark blue version.

Early versions, including the one without the headband.

Smooth vector badges. The achievements started as glossy badges with gradients, the kind you see in every fitness app. Next to Mole they looked like stickers from a different product. Now each achievement is a little low-poly object standing on a round dirt plinth, like a trophy shelf in his burrow, made exactly the way he is: a gold padlock with a red band is 288 triangles, a leather belt with a gold buckle is 338. Locked ones show as a flat silhouette on the same plinth.

A hand-drawn icon set. I also tried drawing small 13 × 13 pixel icons by hand. They looked crude next to the rendered art, so anything bigger than a button glyph is now a model too.

3D progress bars. This one hurt, because I liked the idea a lot: toy blocks sitting in a little wooden or dirt tray, filling up as you use your time, rendered just like Mole. At bar size, about 18 art pixels tall, the 3D simply couldn't read. The blocks turned into noise and looked weaker than a plain flat bar. So the progress bars stayed flat pixel UI, like the rest of the menus. Not everything has to be a model. Things only need to look like they belong in the same game.

What I learned

A strict style is a gift. Every time I wasn't sure about a screen, the answer was usually "what would a 2005 handheld game do?", and the answer was nearly always simpler than what I had. Fewer polygons, fewer colours, fewer effects, and whole pixels only.

And the look isn't decoration. People forgive a lot from a character they like. They're far more likely to put their phone down for a grumpy mole who's clearly on their side than for a progress ring.

ControlMole is out now on Google Play, free, with no ads, no account, and nothing leaving your phone. iPhone comes later; there's a waitlist on controlmole.app. If you give it a try, I'd love to hear what Mole catches you doing. Dig dig.

Viktor, maker of ControlMole

DEV Community: ControlMole