Miara · colour
Miara measures rooms. So its colour is a tape measure.
Miara started with a default blue. When I redesigned it, I wanted the colour to say what the tool does. Here are the five decisions that followed, each with the problem it solved.
1
Yellow is a fill, never text
Tape yellow as text on white is 1.5:1. Nobody can read that.
Yellow fills buttons and tags, with dark ink on it (10.8:1). When yellow has to be text, it darkens to a mustard that still reads (4.6:1).
2
Steel, not beige
The greys cover most of the screen. Warm greys made Miara feel like a home magazine, and the wood floor of the plan blended into the panels.
Cool steel greys, opposite the yellow on the colour wheel. The yellow pops hardest, and the warm plan stands out from a cool interface. Yellow and steel, like a real tape measure.
3
Chosen is not the same as do this
If selection were yellow too, a selected wall would look like a button asking to be pressed.
Yellow at 95°, selection at 275°: opposite sides of the wheel.
Selection takes the yellow’s opposite slot on the wheel: violet-blue. It never competes with the yellow, and it never looks like an action.
4
Warnings became caution tape
Yellow sits exactly where warnings usually live. Moving warnings away from it pushed them into the red, and then a warning and a problem looked the same.
- △ Blisko okna✕ KolidujeMove the hue
- △ Blisko okna✕ KolidujeSofter warning
- △ Blisko okna✕ KolidujeDifferent shape
- △ Blisko okna✕ KolidujeCaution tape · chosen
So warnings became the yellow, with black stripes and a △, like caution tape on a building site. Problems are solid red with ✕. The stripes are the rule: no stripes, no warning.
5
The tape lies on the floor
A yellow measuring line on the wood floor is 1.1:1. It disappears exactly where you need it.
The tape lies on the floor: a soft shadow lifts it off the wood, like a real tape measure in the room. Try the other options I considered:
The palette
Every colour Miara uses, in light and dark. The floor, walls and wall caps stayed as they were.
Light
- Primary
#f4ce23 - Yellow as text
#947100 - Selection
#5863d3 - OK
#2ea55c - Problem
#d8625c - Ink
#1c2024 - Panel
#fdfdfe - Background
#e9ebee
Dark
- Primary
#f4ce23 - Yellow as text
#f4ce23 - Selection
#8b9bff - OK
#4dbf74 - Problem
#f47b74 - Ink
#e6e8eb - Panel
#1b1d1f - Background
#121416