Drawing the 23made mark

23made is where I build the things I want to exist: apps, tools, and the infrastructure that runs them. Before any of that goes out with our name on it, it needs a mark. Something that works as a 16-pixel browser tab and still feels like us on a poster.

Most logos start from a clever idea. I wanted ours to start from how it should feel, and I wanted to still like it in ten years. This is the story of how it got there, including the rounds that didn’t work.

Ideas first, and why that failed

The first round started where most logos start: with ideas. A globe tilted at 23.4°, a maker’s stamp, a ring of 23 dots. Each one had a nice story behind it. Each one also looked like clip art.

Taste first, and why that worked

So I threw that round out and started over from taste. I rated 47 company homepages, from Linear and Laravel to Teenage Engineering, and wrote down why each one worked for me or didn’t. Two things came out of it. The site should do what The Browser Company and Ink & Switch do: say who we are, then get out of the way of the products. And the craft should hold up next to the developer tools I like best.

Two, then three

With that as the brief, we generated about fifty rough candidates. Most were generic. One stuck: two rounded capsules and three dots, side by side. It doesn’t draw the number 23. It counts it.

From there it was drawing, on a grid, in code. The capsules lean at 23.4°, the tilt of the earth’s axis, so the one angle in the mark means something. The dots step back along the same slant, so the whole thing reads as one leaning shape instead of two piles. And the gap between the capsules and the dots is a little wider than the gaps inside each group, because that space is what lets you see two and three at a glance.

Underneath, the mark is just four numbers: the slant, the size of the dots, and two gaps. Here they are. Move them around and you’ll see pretty quickly why each one ended up where it did.

One family

The wordmark is drawn in the same language. Every stroke has round ends, so every letter ends the way a capsule does, and the 3’s diagonal leans at exactly 23.4°, parallel to the mark.

I tried making everything share one stroke width, so every round end would have the same radius. On paper that’s the tidy answer. In practice the mark looked thin and small next to the letters. What we kept is a family resemblance instead: the mark is drawn at twice the stroke of the letters, with the same round ends and the same angle. That’s what the drawing at the top of this post shows.

The small stuff

The last rounds were about things you only notice when they’re wrong. The spacing between letters was one of them. Where an upright stroke meets a round bowl, “ma”, “ad” and “de” sat 6, 16 and 10 pixels apart at 600 pixels tall. Nobody would ever point at that, but you feel it as a word that doesn’t quite sit right. They’re all 13 now.

Sixteen pixels

The hardest size turned out to be the smallest. Scaled down to a 16-pixel favicon, the vector turns to gray mush. So I drew it pixel by pixel instead, with two-pixel capsules and two-by-two dots, and for a while that was the favicon.

Looking at it again for this post, something felt off, and it took a minute to see what. On the pixel grid, the capsules step over one pixel every two rows and the dots one pixel every three. That’s two different slants, about 27° and 18°, in a mark built around one. The fix was to stop fighting the grid: draw the mark’s real shape and let each pixel’s shade say how much of it is covered. Edges that land between pixels go gray, and everything leans at 23.4° again. Turn on the guides and you’ll see it.

Why bother

Nobody is going to pick an app because the gap between the a and the d is right. But I think people notice when something was made with care, even when they couldn’t tell you what they noticed. That’s most of what 23made is about, and the mark seemed like a good place to start.