circle, square, triangle

In 1923 the wall-painting workshop at the Bauhaus sent a questionnaire around the school. It showed a triangle, a square and a circle and asked each person to fill them with the three primary colors. Wassily Kandinsky, who had written it, already had an answer: yellow for the triangle, red for the square, blue for the circle.

His reasoning was about temperament. The triangle is acute and restless, like yellow. The square is heavy and settled, like red. The circle is deep and turns inward, like blue. Most of the replies agreed with him, which proves mainly that people had been to his lectures. The pairing is not a law of perception. It is a hypothesis with a very good poster.

We keep it for illustration and for the studio wheel, where the inner triangle marks the primaries. The mark deliberately breaks it: a red circle, a blue square, a yellow triangle. Partly for contrast, since a yellow triangle beside a blue square reads at any size, and partly as a reminder that the pairing is a choice, not physics.

one circle makes all three

The geometry is older than any of this. Draw a circle with a compass. Keep the same radius and draw a line through the center: a diameter. Draw a second diameter at right angles to it. The four points where the two lines meet the circle are the corners of a square.

Now put the compass point on the circle, keep the radius, and swing an arc that cuts the circle. Move the point to that cut and do it again. Six steps bring you back where you started, because a radius fits around its own circle exactly six times. Join every second mark and you have an equilateral triangle.

So one number, the radius, makes all three shapes. The square's side is the radius times the square root of two, about 1.41. The triangle's side is the radius times the square root of three, about 1.73. That is why the three feel related even when their sizes differ: they are the same number, counted differently.

what each one is for

A circle has a center and no direction. It is the shape for here: the profile, the ground under the play button, the status dot, the center of the wheel. A square is a cell of the grid, so it stands for a place or a container: a card, a field, a library tile, a checkbox. A triangle is the only one of the three that points, so it does all the pointing: play, forward, warning, the roof that turns a block into a house.

When an icon needs a direction, add a triangle. When it needs a boundary, add a square. When it needs a focus, add a circle. If it needs something else, it probably needs a word instead.

why they are not the same size

Geometry says a circle, a square and a triangle of the same width have different areas: the square is largest, then the circle, then the triangle. The eye goes further and says the circle looks smaller than it is and the triangle smaller still, because the eye reads mass near the edges of the bounding box and those two shapes have little there.

So when the three stand together, the square is 80 units wide, the circle is 84 across, and the triangle is 80 wide but 88 tall. Set side by side they look equal. Measured, they are not. This is the same correction type designers make when a round letter like o overshoots the baseline that a flat letter like n sits on. The grid is a tool for the eye, not a judge over it.

the order

Circle, square, triangle. The order is not alphabetical and it is not Kandinsky's; it runs from the shape with no direction to the shape that is all direction. Write them in that order everywhere, from the mark to this sentence, and the system stays legible as a sequence: stillness, structure, motion.