From Brief to Brand:
Rethinking the Calculator — One of Design's Most Overlooked Canvases

Case study no. 04 — the fourth in an ongoing series where I take a fictional brief and build it like it's real.

Share:

Calculators are invisible. Not literally — you use one probably every day — but invisibly, in the sense that nobody thinks about them. They're utilities. They ship with your phone, they do their job, and nobody writes a case study about them.

That's exactly why this brief interested me.

DailyUI prompt 004 was: design a calculation element or interface. Scientific? Mortgage? Currency? Speciality? And for what platform? The open-endedness was the challenge. I could have gone niche and clever — a tip-splitting calculator for restaurant groups, a runway calculator for startups. Instead, I went in the opposite direction. What would it look like to design a multi-tool calculator that felt genuinely refined? Clean enough to be beautiful, functional enough to be used daily.

What I built

The result is a multi-mode iOS calculator UI with four distinct modes accessible from a persistent top navigation: a standard calculator, a live currency converter, a unit converter (volume in the prototype), and a world clock/time zone tool. Light and dark modes are both fully realised, with the dark variant using a cool slate-blue tone rather than the predictable near-black — a considered choice that gives the dark mode its own character rather than just inverting the light one.

Landing page UX Ui Design in a laptop mockup
The accent colour — a warm amber-orange — threads through both modes as the primary interactive signal. It appears on operator keys, active mode icons, and selected states, doing the work of a brand colour without the need for a brand.
The design decisions worth unpacking

Three things drove the outcome here more than anything else:

Restraint over decoration. The temptation with utility UI is to compensate for simplicity with visual complexity. I went the other way. Soft shadows, generous border radii, and a near-white background in light mode create depth without noise. The interface recedes so the numbers don't have to compete.

Colour as the only signal. There are no labels telling you which keys do what — the orange does that. Operator keys are orange. Active states are orange. The selected tab is orange. Limiting accent usage to a single hue means it never loses meaning.
Dark mode as a parallel identity. A lot of dark mode implementations feel like a photographic negative — same design, different palette. The dark variant here uses a warm slate background that was chosen specifically to complement the amber accent rather than fight it. The result is a UI that feels premium in both modes, rather than polished in one and adequate in the other.
Landing page UX UI design in a laptop mockup
Device testing as a non-negotiable

Before finalising anything, the designs went to the device. This is always part of the process — testing on an actual screen at actual scale — and with a calculator, it's especially important. Touch targets for number keys need to feel natural under a thumb, not just look balanced in a Figma frame at 390px. The spacing between the operator column and the number grid, the visual weight of numerals at different sizes, the contrast of secondary labels like currency flags — none of this reads the same on a monitor as it does in your hand.

It's the step that takes the work from designed to usable.
Landing page UX Ui design on several devices iPads and IPhone mockup
What's next

This series keeps going. Each brief is a new constraint, a new corner of UI design to explore — and a new reason to think carefully about something that usually just ships.

Let’s Create Something
AMAZINGAMAZINGAMAZINGAMAZINGAMAZINGAMAZINGAMAZINGAMAZING
AMAZINGAMAZINGAMAZINGAMAZINGAMAZINGAMAZINGAMAZINGAMAZING
© 2026 Radu Iulian Baba