Why is the Halt app icon a hand?

Because the app does one thing at one moment: it refuses a checkout before the card is charged. An open palm is the one sign that reads as stop without any words, at any size, in any country, and it survives being shrunk to sixteen pixels because it is a single shape with no interior detail.

How do you design an app icon that stands out in a store?

Design it against its neighbors rather than on a white page. An app store listing is a grid of tiles at the same size, most of them blue or green with a small glyph in the middle. One saturated red tile carrying one shape that fills it is found by the eye before anything is read.

Mark study, one of ours

One gesture,
one color,
nothing else

Halt refuses a card-testing checkout before the card is charged. The whole product is one moment, so the mark is one gesture. An open palm on a single red, with no line, no gradient and no detail inside it.

The brief

It is not read, it is found

This icon does not live on a website where somebody studies it. It lives in an app store, in a grid of tiles at the same size, next to dozens of others. Most of those are blue or green with a small glyph floating in the middle of a lot of empty space.

So the job is not to be understood. It is to be found, and then to be obvious in the half second after. That flips the usual order of work: the color and the silhouette get decided before anything is drawn, and the drawing has to survive both.

The idea

A gesture beats a glyph when the product is a verb

The obvious icons for this category are a shield, a lock or a crossed circle. All three are taken, all three are abstractions, and all three say security in general rather than this app in particular.

An open palm says stop before any word is read. It works without language. It is a thing a person does, which matches what the app does: it steps in at one moment and refuses. And unlike a shield, it is a silhouette rather than an outline, so it stays solid all the way down.

The trade is that a hand is harder to draw well than a shield. Get the fingers wrong and it reads as a comb, a leaf or a mitten. Which is where most of the work went.

The construction

One number does most of the work

The hand is not drawn on a square grid. There is no grid to put it on, because a hand has no right angles. What it has instead is a small set of numbers reused everywhere, and 52 is the one doing most of the work.

Bar width: 104 Every finger is the same width. Nothing tapers.
Gap: 20 Three identical gaps. The fingers are touching, not spread.
Cap radius: 52 Exactly half a bar, so each finger ends in a true semicircle rather than a rounded rectangle.
Thumb tip radius: 52 The same number again. One radius ends every stroke in the drawing.
Baseline: 560 Where all four bars stop and the palm takes over.
Span: 400 to 876 476 units of a 1200 box, sitting right of center so the thumb has room on the lower left.

Drawn on paper before it was drawn in code

The hand did not start as a curve somebody pushed around until it looked right. It started as a ruled sheet and five circles, and the order matters: the ends were placed before the shape between them existed. Step through it. The paper and the rules stay on at every step, including the last. The finished mark can be checked against the circles it came from.

The grid

12345678

1. The square. A 1200 tile, centered at 600, with its 240 corner radius drawn as four circles. These four are the only geometry here that is symmetric on both axes.2. The paper. Ruled at 2 units, which is the only square grid every position in this drawing lands on. We checked all of them up to 124, and nothing coarser catches every one. At 600 divisions it can only read as tone.3. The module. So the grid is not square. It is a module: bands of 104, gaps of 20, a pitch of 124 repeated exactly three times. Every vertical keyline is a band edge or a band center.4. Seven circles. Two radii do nearly all of it. 52 caps the four fingers and the thumb. The heel circle is centered on the tile axis, and its right edge is the right edge of the hand. The wrist circle bottoms out at 1019, which is where the hand does.5. Where they overlap. Fill in every circle and every band and the hand is already there. Nothing was traced around them. The darker areas are where two shapes cover the same ground.6. The baseline. The gaps stop at 560 and the bands carry on to 720. One shared line is what stops four bands reading as four separate objects.7. The one exception. The web is the only part of this mark that no circle produced. We fitted one and it gained almost nothing, so the web stays a quadratic. Everything else is within one percent of a circle.8. Filled. Fifteen shapes account for 98 percent of the filled area. Top to bottom the hand runs 188 to 1020, centering on 604 against the tile 600. Centered vertically, deliberately not horizontally, because the thumb needs the room.

Why it is not on graph paper

A first version of this sheet ruled the tile at 25 and 100 and the keylines refused to sit on it. That was not a drawing error. Of the twelve horizontal positions the fingers use, two land on a 25 grid, two on 50 and two on 100. This mark was never on square paper.

It is on a modular grid, and the module is the finger. 104 wide, a 52 radius, a 20 gap, repeated at a pitch of 124. On the sheet the four blue bands are the fingers and the three amber bands are the gaps. The grid is the mark, rather than something laid over it. Every keyline is a band edge or a band center.

Nothing on that sheet moves. Every circle and every line arrives in its final position and stays there, because a guide that shifts between steps cannot be checked against anything.

Which is also why the thumb looked wrong against the finger lines. It is on the same grid, turned. Its tip runs 90 across and 52 up, a chord of 103.94 at 30.02 degrees. That is the 104 module at 30 degrees.

That is the part worth taking away. Four of the circles become fingertips and the fifth becomes the thumb. Because they were placed first, nothing later had to be rounded by eye to match. The graph paper is not decoration either. It is what makes every one of these numbers a thing a second person could reproduce exactly.

Why the cap is exactly half the bar

A 104 wide bar with a 52 radius cap is a semicircle, not a rounded corner. That matters at the small end. A cap of 40 would leave two short straight edges at the top of every finger. At 16 pixels those turn into a flat, slightly chewed profile. A true semicircle has no straight to lose.

The same 52 turns up again on the thumb tip, at the other end of the drawing. One radius ends every stroke, so nothing in the silhouette looks like it came from a different hand.

It goes further than that. The arc across the thumb tip spans 103.94 units, and a chord of twice the radius is a semicircle rather than a corner. So the thumb is 104 wide, which is exactly a finger, capped by exactly the same circle.

The palm is the same idea at a different scale. Its two curves are written as cubics rather than arc commands. Fit a circle through each one and you get 278 for the heel and 320 for the wrist. Neither real curve leaves its circle by more than two percent of the radius.

So the whole hand is seven circles and the lines between them. Two large ones holding the palm, five small ones of a single radius ending every finger and the thumb. The construction above draws all seven.

Why the heights are uneven

This is the only irregular thing in the whole file, and it is what makes the shape read as a hand rather than a comb.

Index: top at 300 third tallest, and the one the eye lands on first
Middle: top at 240 the tallest, which is where a real hand peaks
Ring: top at 270 second, which is the order most hands are in
Little: top at 340 shortest by 100 units, and the one that sets the slope

Tallest to shortest runs middle, ring, index, little. That is the order most hands are in, and it is worth following even though nobody will consciously check it. Get it wrong and people cannot say why the icon looks off, only that it does.

The little finger is 100 units below the middle, which is a big gap on a 1200 box. That drop is what gives the top edge a slope, and the slope is the part that survives when the gaps between fingers close up.

The curves at the bottom

All four bars stop at 560. Below that line the drawing stops being regular and becomes three curves, because a palm has no repeating parts to reuse.

The heel
One wide cubic sweeping from the right edge down and across the bottom. It is deliberately fuller than a real palm, because a thin one disappears first when the shape is scaled down.
The wrist
A second cubic bringing the left side back up. The hand is cut off rather than tapered, so the eye finishes the arm instead of the drawing spending pixels on it.
The thumb
A straight run up the left, the 52 radius tip, and then a short quadratic back into the web between thumb and index. That last curve is the only place two parts of the hand meet. It is why the thumb reads as attached rather than stuck on.

The thumb is also why the hand sits right of center. The bars span 400 to 876 on a 1200 box, leaving 400 units of room on the left and 324 on the right. Center the fingers and the thumb runs out of tile.

The color

One red, and the tile is the logo

Ground: #E5432E across the whole tile, edge to edge
Hand: #FFFFFF, the only other value in the file
Box: 1200 units, 240 unit radius, which is 20 percent

Corner radius

0%10%20%30%50%

0% is 0 units on a 1200 unit canvas. A hard square reads as a window, not an app.10% is 120 units on a 1200 unit canvas.20% is 240 units on a 1200 unit canvas. This is what Halt ships.30% is 360 units on a 1200 unit canvas.50% is 600 units on a 1200 unit canvas. At half the width it is a circle, and a circle in a grid of rounded squares looks like a profile picture.

The red fills the tile rather than sitting behind a white card. In a store grid that means the whole square is the brand, so it is the largest possible amount of color the format allows.

The red: #E5432E 7 degrees, 78% saturation, 54% light. A red pushed seven degrees toward orange.
The hand: #FFFFFF and nothing else. Two values in the whole file.

Those seven degrees matter more than they sound. A red at zero is a stop sign and an error state. Pushing it toward orange keeps the urgency and takes out some of the alarm. That suits an app which refuses things quietly all day, with nothing actually wrong.

White on this red measures 4.06 to 1. A graphic has to clear 3 to 1, so it passes with room. It would not pass the 4.5 to 1 that body text has to clear. That is the right trade for an icon. Buying the last half point would mean a darker red, and a darker red stops being found in a grid.

Red is the honest choice here and it is also a slightly uncomfortable one. It is the color of an error, and this app is not an error, it is a refusal. That distinction is carried by the hand rather than by the color. It is why the hand is a calm open palm and not a cross.

The corner radius matches what the store masks to anyway. The file looks the same in the listing as it does on our own pages.

The floor

What is left at sixteen pixels

128px

64px

32px

24px

16px

Same file at every size, nothing redrawn and nothing simplified.

Those are vector renders. Below is the same icon as it is actually rasterized, magnified. These are the files the app ships, not a drawing of what small looks like.

16 × 16The finger gaps have closed. The profile is doing all the work.

32 × 32Gaps reappear. The thumb reads as a thumb.

64 × 64Full detail, and the same file as the 16.

The gaps between the fingers close first, somewhere under 24 pixels. What is left is a white shape with a stepped top edge on a red ground. It still reads as a hand, because the profile survived. This is the argument for a silhouette over an outline in one picture: an outlined hand at this size is a grey smudge.

The pair

Two products, two opposite answers

Halt is a gesture. The product is a verb that happens once, its icon competes in a grid, and the mark is one shape with nothing inside it.

You are reading this one

QRFLOW.codes is a grid. The product draws modules all day, so its mark is built from those modules and comes apart into them.

See how that one was made

Neither approach is better. They came out of two different questions, which is the point of asking what the thing does before drawing anything. A house style applied to both would have produced two marks that matched each other and suited neither product.

The product this belongs to is Halt. The other mark of ours is QRFLOW.codes, drawn for the QR code app of the same name. The method behind both is on the logo page.

One gesture,one color,nothing else

Three steps, and the first one is the color